Express.js 服务器未呈现静态 javascript 文件

Question

I am building a website and using an express.js server to capture information submitted through a form. Before setting up the server I already had the site built, using static js and css files. After connecting to the server, I was able to get the server to render the html and css stylesheet. But it won't show the vanilla js I had already coded. I only want to use the server for the form and have the vanilla javascript still render like before connecting to the server.

I have the files set up as:

root
index.html
app.js
  public
     css
       styles.css
     javascript
       index.js

app.js

const express = require("express");
const https = require("https");
const path = require('path')
const app = express();
    
    
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
    
    
app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
});

index.html

<link rel="stylesheet" href="css/styles.css" />
<script src="javascript/index.js"></script>

What am I doing wrong here? Is there something I need to code in my index.js file to get it to connect to the server? Thanks in advance.

Answer 1

1. Add this middleware in the app.js

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

2. Folder Structure

|__public/   
    |__ css/
        |__ css files...
    |__ js/
        |__ js files...

3. Import this way

Now you set the path to the public directory you have to give the path public folder when you import

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

<script src="/js/main.js" crossorigin="anonymous"> </script>

You should now be all set up to access CSS or JS files