Why is my express code not rendering css and javascript files?

Question

I am trying to write a basic express server code. However, the HTML file that gets served on a particular route does not render the static files (css, js and image files). Can anyone tell me what's wrong with my code? The following code includes the router function. FYI, the code is running on Ubuntu.

I have already used the express.static() function. However, it still does not seem to be working.

var express = require('express');
var router = express.Router();
var app = express();
app.use(express.static(__dirname+'/stat'));
router.get('/',(req,res)=>{
    res.send("Welcome to the home page");
});

router.get('/show',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
})

router.get('*',(req,res)=>{
    res.send("Error 404");
});

module.exports = router;

I did try to include html in my question initially - but stackoverflow isn't showing the code. And the path is right. I checked it twice. Could you share the code if you were to include such a static file? The directory structure is: the_main_folder which contains the server.js,router.js and index.html files and a sub-directory(named 'stat') which contains the style.css and script.js files. — Black Wind, May 14 '19 at 18:51
BTW @julianYaman since I have two js files (one the actual server.js file and one to handle routing aka router.js) do I include the express.static() statement in both of them? — Black Wind, May 14 '19 at 19:07
@BlackWind No, you don't have to. You include `express.static()` inside the file, where you load express. — julianYaman, May 14 '19 at 20:09

score 2 · Answer 1 · answered May 14 '19 at 16:06

2

One way to go about this would be to move the JavaScript and CSS files you want to serve to a public folder in the root directory and then access them like this:

app.use(express.static('public'));

However, it is usually safer to use the Node.js path module to access the relative path of the folder from which you want to serve these static files. This should do:

const path = require('path')
app.use(express.static(path.join(__dirname, 'stat')));

I think the docs will offer some more help.

answered May 14 '19 at 16:06

Chukwualuka Chiama

306
2
9

Tried that. Didn't help. :( – Black Wind May 14 '19 at 18:58
DIdn't get any - just got the basic HTML page without the CSS styling – Black Wind May 14 '19 at 19:04
Did you move the css file under the public folder and try serving it from there? Please take a look at this related question also: https://stackoverflow.com/questions/13395742/can-not-get-css-file – Chukwualuka Chiama May 14 '19 at 19:11

score 0 · Answer 2 · edited Mar 20 '23 at 08:48

I also faced the same issue, and the mistake was so stupid

const express = require('express');

const path = require('path');

// importing the routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

const app = express();

// rendering static pages using express.static()
app.use(express.static(path.join(__dirname, 'public')));

// rendering our custom route middleware
app.use(adminRoutes);
app.use(shopRoutes);

// adding Page not found middleware
app.use((req, res, next) => {
    res.status(404).sendFile(path.join(__dirname, 'views', 'page-not-found.html'))
    // res.status(404).send('<h1>404....Page Not Found</h1>')
})

app.listen(3000);

//For the above server code, to render static file from the express js I had 
//done the mistake in the link tag of html - instead of 
//<link rel="stylesheet" href="/css/main.css"> this line I had written this....
//<link rel="style-sheet" href="/css/main.css">

score -1 · Answer 3 · edited Oct 12 '22 at 20:35

First method: You can link your css file by entering the URL like http://localhost:8000/static/style.css.

Keep your CSS file as a static file and use express static function.
THen you can link your style.css file to your HTML.

<link rel="stylesheet" href="http://localhost:3000/static/styles.css" />

Remember to enter your own port. I think your problem will be solved.

Second Method:

Send your CSS file to express in the same way as you send your HTML file.

app.get('/style.css', (req, res) => {
  res.sendFile(path.join(__dirname + "/view/style.css"));
});

Then you can easily link your CSS file to your HTML.

<link rel="stylesheet" href="/style.css">

Why is my express code not rendering css and javascript files?

3 Answers3