[Fixed] Serving css with express js

Issue

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;

console.log(__dirname)
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:

index.js
public
  css
    home.css
views
  home.html

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.

Solution

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

ErrorsFixing