如何正确使用服务静态？

Question

This question tightly relates to This issue here .

I'm building an nodeJS app. You can see the file architecture in the screenshot below.

When I try running my index.JS file:

const express = require('express')
const server     = new express()
const srcDir  = require('app-root-path');
const port = 3000

server.get('/', (req, res) => {
  res.sendFile(`${srcDir}/app/views/index.html`)
})


server.listen(port, () => {
  console.log(`App listening at http://localhost:${port}`)
})

Issue: I get a blank page, where the console says that everything supplementary in my "app" folder (APART FROM HTML FILES THEMSELVES!) (components (js files), assets (css), etc) is unreachable: Failed to load resource: the server responded with a status of 404 (Not Found) . I know that the origin of the issue might be in establishing serve-static (which I don't understand), although it has always worked perfectly without it.

Can anyone help out? Thanks in advance.

PS Console logs:

Answer 1

You have to tell Express where the root directory of your static files is. Usually in the wild - this directory is called public and will contain all of your css, js files, which you want to ship to the browser. Do not include views or any other backend files.

So in your case: create a new directory called public and put assets and components in there.

Then in your Express server:

app.use(express.static(`${srcDir}/app/public`));

• Docs: https://expressjs.com/en/starter/static-files.html

Answer 2

Try using the methods outlined in the express.js docs

const staticDir = './views' // Or wherever it's being served from
server.use(express.static(staticDir)); 

You can also choose a specified path pre-fix to show these files from

server.use('/static', express.static(staticDir))

Answer 3

You need to add the "components" with express.static("directory") , like it's explained here: https://expressjs.com/en/starter/static-files.html

In your case, add this in your app.

server.use(express.static("app/components"));

To access the file FeaturePage/MainDisplay.js for example, you have to use this in your html.

<script src="/FeaturePage/MainDisplay.js"></script>