How to properly use serve-static?

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), e.t.c.) 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.

P.S. Console logs:

Does this answer your question? [static files with express.js](https://stackoverflow.com/questions/10434001/static-files-with-express-js) — Michael, Sep 02 '20 at 18:28

score 1 · Accepted Answer · answered Sep 02 '20 at 18:42

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

Great stuff! Thanks a lot for the help, @madflow! Everything worked perfectly! — JoshJohnson, Sep 03 '20 at 17:30

score 0 · Answer 2 · answered Sep 02 '20 at 18:33

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))

score 0 · Answer 3 · answered Sep 02 '20 at 18:34

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>

How to properly use serve-static?

3 Answers3