Я использовал промежуточное ПО для загрузки статических CSS-файлов, но оно не работает. Когда я просто открываю файл html / ejs без серверов, загружается css. Но когда я использую экспресс-сервер, чтобы сделать то же самое, это не работает.
В разделе сети в инструментах разработчика отображается ошибка 404 для файлов css.
Экспресс код:
//express
const express = require('express');
const app = express();
const path = require('path');
app.set('view engine' , 'ejs');
//middleware
app.use(express.static(path.join(__dirname, 'public')));
//home route
app.get('/' , (req , res) =>{
res.render('todosample');
});
//listning to port
app.listen(8080);
Структура файла:
public
todosamplestyle.css
views
todosample.ejs
app.js
HTML-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../public/todosamplestyle.css">
<title>Greatest To-do ever</title>
</head>
<body>
<header>
<span>Greatest To-Do Ever</span>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
</ul>
</nav>
</header>
<main>
<form action="#">
<input type="text" class="form-control form-control-lg" name="search" id="">
<input class="btn btn-primary" value="Add Item">
</form>
</main>
<div class="items">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio<button class="btn btn-outline-danger">X</button></li>
<li class="list-group-item">Dapibus ac facilisis in<button class="btn btn-outline-danger">X</button></li>
<li class="list-group-item">Morbi leo risus<button class="btn btn-outline-danger">X</button></li>
<li class="list-group-item">Porta ac consectetur ac<button class="btn btn-outline-danger">X</button></li>
<li class="list-group-item">Vestibulum at eros<button class="btn btn-outline-danger">X</button></li>
</ul>
</div>
</body>
</html>