Create a Simple and Stylish Node Express App

Hi dan, how are you doing?
I’m using express 4.17.1. I followed the post but got a problem on app.use(express.static(...)). Basically it didn’t middlewared anything at all. I went to documentation and saw that it used relative path instead of path.join(base, public). I removed the path.join thing and it worked fine.
The question is, you said to use path.join to have a env independent file reference, but didn’t work for me. Do you think it might be the express version I have? does using app.use(express.static("public")); makes it env-dependent? how come?
Thanks,
Ale

Hello, Alejandro! Thank you for reading the blog post and also for joining our Auth0 Community. Today, I’ve been working on some Express content and I’ve been auditing this blog post. Let me run this again and see if I can spot any problems :+1:

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!

Good afternoon, error at this stage. I am using Visual Studio Code.
/ *

  • Routes Definitions
  • /
    app.get (“/”, (req, res) => { … }); ← this
    app.get (“/ user”, (req, res) => {
    res.render (“user”, {title: “Profile”, userProfile: {nickname: “Auth0”}});
    });
    error eslint
    “message”: “An announcement or statement was expected.”,
1 Like

Hello, Manyhp. Welcome to the Auth0 Community. That first app.get ("/", (req, res) => { … }); is a placeholder for the existing code to help you visually identify where you need to add the new function:

app.get ("/ user", (req, res) => {
  res.render (“user”, {title: “Profile”, userProfile: {nickname: “Auth0”}});
});

You don’t need to add or replace app.get ("/", (req, res) => { … }); in your code, only add the new function below it.

1 Like

thank you very much for your reply
but still routing doesn’t work
block code

  • Routes Definitions
  • /
    app.get (“/”, (req, res) => {
    res.render (“index”, {title: “Home”});
    });
    app.get (“/ user”, (req, res) => {
    res.render (“user”, {title: “Profile”, userProfile: {nickname: “Auth0”}});
    });
    error
    http: // localhost: 3000 / user
    Cannot GET / user
    help me please !!
1 Like

thanks, found an error - space
app.get (“/ _user”, (req, res) - _ this space
God bless you!

2 Likes

Thank you. I am glad you got it :muscle: Let us know if you need anything else, please.

1 Like

small error in user.pug template.
maybe I’m wrong. ((
in template →
div.NavButtons
a (href = “/ logout”)
div.NavButton Log out
But we have no direction “/ logout”
am i wrong?
it worked for me without the word “logout” → like this
div.NavButtons
a (href = “/”)
div.NavButton Log from
to go to the Hpme page :slight_smile:

Howdy, we tested this tutorial recently as we are launching an update soon as we found no errors. Could you use code fences please so that the code is formatted? :slight_smile: Pug is whitespace sensitive and a missing tab may cause trouble.

You can create a code fence by typing the backtick (`) three times, then press enter, then type the backtick three times again. Finally, you can paste your code between the backtick (the fence). This will help the code you paste keeps its formatting. :+1:

1 Like

Hey Dan, thank you for the great tutorial! I enjoyed following it.

The only issue I have would be similar to @haiemh’s issue. Running the command npm run ui doesn’t load the page at all, seems like browser sync is not working properly. Any thoughts on what could be the problem?

1 Like

Y’all are right! BrowserSync has been having some issues. Let me take a look at the whole application today :+1: I’ll report my updates here.

@kevinbryix I went through the tutorial and everything is working as expected. Ensure that you are visiting http://localhost:3000/ and not http://localhost:8000 after you run npm run ui.

npm run dev loads the server on port 8000
npm run ui asks BrowserSync to proxy the server from npm run dev on port 3000 and monitor changes on the codebase. Both commands need to run but npm run dev always needs to run first.

Please let me know if you are having the issue on port 3000. Thanks!

1 Like

Hey @dan-auth0 Thanks! The issue was I wasn’t running npm run dev first, silly mistake hehe. First time learner, so I appreciate the help!

1 Like

No worries! We’ve all been there!

1 Like

I am glad it’s all working for you! Don’t forget to explore the second part of this tutorial :eyes: :pray:

But also heads up, that tutorial uses Passport.js, which is more complicated that our latest guidance: