How to send css files with express js-CodePudding

I am having a hard time sending css files with express. The way my project is structured is I have a src folder and inside the src folder is the app.js for the express code as well as another folder titled "public". Inside of this public folder I have an experience.html page as well as an experience.css page. I can only get the html to render on the page and cannot get the css styling to show up. Attached is my code for the app.js page.

const express = require('express');

const app = express ();
const port = process.env.Port || 3000;

app.get('/experience', (req, res) => {
    res.sendFile(__dirname '/public/experience.html');

})

app.use(express.static('/public/experience.css'))

app.listen(port);

CodePudding user response：

Just using middleware is enough, you don't need dedicated get routes to the files unless you want to mask some of the filenames.

This should work for your case

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

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

You can access them on http://localhost:3000/experience.html, http://localhost:3000/experience.css

CodePudding user response：

You can use the Express static middleware with the path to the public folder.

Once you do that, you can expose a route to the files (or) you can access at localhost:9900

//Import modules
const express = require("express");
const path = require("path");

// Define PORT for HTTP Server
const PORT = 9900;

// Initialize Express
const app = express();

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

app.listen(PORT, (err) => {
  console.log(`Your dog server is up and running!`);
});