Create a Simple and Stylish Node Express App

I’ll investigate and get back to you! Thanks for reading the post.

I’ll be working on the comments on this thread today. I’ll investigate and get back to you. Thanks for reading the post.

Update:

Howdy, @haiemh! I just re-ran the steps up to adding the custom stylesheet and I didn’t get any errors. :thinking: The only things that comes to mind is the port maybe being used by something else. Stopping anything running on the ports may help, or a system restart.

I recommend using the link that BrowserSync shows in the console for Local:

[Browsersync] Proxying: http://localhost:8000
[Browsersync] Access URLs:
 -------------------------------
    Local: http://localhost:3000
 External: http://<Your IP address>:3000

That should work. Are you still having this problem? What version of BrowserSync got installed in your project? The one I installed today is "browser-sync": "^2.26.7", and it’s working fine.

Howdy, @craigz! I re-ran the steps up to when the custom stylesheet is added and everything is working as expected :thinking: I am not sure what could be happening on your end. Another teammate also tested this prior to the post going live and we reported no issues.

Are you still having the problem? Would you like to share a repo with the code you got so far? What operating system are you using?

Best regards!

hi @dan-auth0, thanks for getting back to me. i’ve created a repo on GitHub for the project located at: github link.

when you load the page at localhost:3000 the screen is all white, however if you scroll down, you’ll see the image followed by the text and finally the button. i just completely replaced my version of public/style.css with the text of the gist and updated to the point of adding the graphic so there should be none of my ‘troubleshooting’ evident to be the reason things aren’t working. (i had never got it working anyhow, however i was able to greatly reduce the whitespace at the top of the page; but then the graphic was a 4 pixel tall strip. not much better!)

i am working on a mac (mojave) and have tried this in the chrome browser as well as safari with similar results.

i’m curious to hear how it works for you after you’ve had a chance to check it out. thanks again.

-c.

1 Like

@craigz Thank you for sharing the repo! It helps tremendously. I found the source of trouble for your project:

That’s the tricky part of Pug, white spacing controls structuring:

	div.View.WelcomeView
	h1.Banner WHATABYTE

The Banner element gets pushed down because it’s a sibling of the WelcomeView element. If you indent it, it becomes its child :slight_smile:

At that point in the tutorial, the index.pug template should look like this:

extends layout

block layout-content
  div.View.WelcomeView
    h1.Banner WHATABYTE
    div.Message
      div.Title
        h3 Making the Best
        h1 Food For Devs
      span.Details Access the WHATABYTE Team Portal
    div.NavButtons
      if isAuthenticated
        a(href="/user")
          div.NavButton Just dive in!
      else
        a(href="/login")
          div.NavButton Log in

Please let me know if that fixes the issue :+1:

hi @dan-auth0,

so much closer now. the parent-child relationship now appears to work correctly and the image loads in the way i would expect. the only remaining issue is that the entire page remains pushed down an entire page of whitespace. so the initial page load is all white and unless you know to scroll down a page, it appears there is nothing there. i had entirely focused on the css as that is entirely unknown to me, i’d not even thought about what pug was doing there. i’ll focus on that a bit more and see how it goes. i’ll update here if i manage to work things out, otherwise if you have any other ideas as to why the whitespace, let me know. i’ve updated the repo with the changes to index.pug.

thanks again for taking a look at this.

-c.

Check out this line:

block layout-content needs to be indented to become the child of div#root :+1:

legend! :electric_plug: that did the trick. thanks so much i am looking forward to moving along with this tutorial. cheers.

2 Likes

Cool, glad it worked :+1:

Let us know @craigz if you have any more questions!

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