Create a Simple and Stylish Node Express App

Blog Discussions
, , ,
23

Alejandro, I just tested this blog post from start to end and I saw no error and all the assets were served correctly. This is what my package.json looks like:

{
  "name": "whatabyte-portal",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js",
    "ui": "browser-sync start --proxy=localhost:8000 --files='**/*.css, **/*.pug, **/*.js' --ignore=node_modules --reload-delay 10 --no-ui --no-notify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "nodemon": "^1.19.4"
  },
  "dependencies": {
    "express": "^4.17.1",
    "pug": "^2.0.4"
  }
}

The statement to serve assets from the public directory is:

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

__dirname corresponds to the root project directory as it is the parent folder of the index.js file where that statement is being executed. For that file reference to work, the public directory must be a sibling of the index.js file as well. If you place public in another area or within a directory that is child to the root project directory, the reference won’t work.

The use of path.join is to create file paths that work across operating systems. So if that statement is run on Windows, you’ll get the right pathname delimiters for Windows – the same goes for macOS, Linux, etc. Some operating systems use / while others use \ to delimit file paths.

I’d recommend taking a look at your project structure to ensure that the references work. Please let me know if you have further questions :slight_smile: Happy to help!