[Fixed] Serving css with express js


I have been having a lot of trouble with serving css using express js. I finally figured out how, but I’m a bit confused why my new code works, but my old code doesn’t. This is my new code that does work:

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 5010;

app.use('/public', express.static('public'));
app.set('views', path.join(__dirname, 'views'))

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'home.html'));

app.listen(port, () => {
  console.log(`Server started on port ${port}`);

My file system looks like this:


Originally instead of having:

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

I had:

app.use(express.static(path.join(__dirname, 'public')));

Why does the second version work, but the first one doesn’t? What is the purpose of the first parameter in the second version? Also, just in case it makes a difference, I’m coding on replit.com.


When using 1 parameter

app.use(express.static(path.join(__dirname, 'public')));

This code serve files in the "public" subdirectory of the current directory. The URL to access the file at public/css/home.css is : http://localhost/css/home.css

When using 2 parameters

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

This code also serve files in the "public" subdirectory of the current directory, with a virtual path prefix "/public". So, the URL to access the file at public/css/home.css is : http://localhost/public/css/home.css

We can change the first parameter to anything, for example, if we have :

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

Then the URL to the same file becomes : http://localhost/static/css/home.css.

You can find more information from the official document here

Leave a Reply

(*) Required, Your email will not be published