When I go to localhost:3000 my css works, but when I go to localhost:3000/r/test my css doesn't work and I get this message:
Refused to apply style from 'http://localhost:3000/r/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Anytime I have a route where the path is longer than one sub path (I'm not sure if that's even the right term), my css doesn't work at all. For example these routes would work:
app.get('/', (req, res) => {
...
)
app.get('/cats', (req, res) => {
...
)
app.get('/dogs', (req, res) => {
...
)
But these won't work:
app.get('/cats/test', (req, res) => {
...
)
app.get('/dogs/blah', (req, res) => {
...
)
app.get('/hamster/foo', (req, res) => {
...
)
My index.js file:
const express = require('express');
const path = require('path');
const axios = require('axios');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname + '/views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('home');
});
app.get('/r/test', (req, res) => {
res.render('test');
});
app.listen(3000, () => {
console.log(`Listening at http://localhost:3000`);
});
My test.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Test</title>
</head>
<body>
<h1>Hi<h1>
</body>
</html>
The structure of my project is:
Project
|
+-- public
| |
| +--styles.css
|
+-- views
| |
| +-- home.ejs
| +-- test.ejs
|
+--index.js
Put CSS file in the public directory and add / in href of link like
<link rel="stylesheet" href="/styles.css">
Now it will request to localhost:3000/style.css every time no matter whatever URL you are on.
/ point to the root directory
It would be better to have a separate path to serve the static files
Change static path to
app.use('/static',express.static(path.join(__dirname, 'public')));
and in the ejs file use it as
<link rel="stylesheet" href="/static/styles.css">