Create a Simple and Stylish Node Express App

Blog Discussions
, , ,
1

Learn how to build the foundation of a simple Node.js and Express app by creating a user interface and API.

Read on :green_heart:

Brought to you by @dan-auth0 :man_technologist:t2:

1176Ɨ1056 276 KB

2

Itā€™s exciting to create stylish yet secure NodeJS apps. Let me know what you liked, or didnā€™t like, about this first part. In the next part, Iā€™ll show you how to easily add authentication to this app using Auth0 :slight_smile:

3

Thank you dan-auth0, great article for a beginner, I am very excited about the next part with the Auth0 authentication!

1 Like
4

Is the second part already release?

5

Thanks for reading, @gaborh! I am glad that you liked it. Hereā€™s the link to the second part:

6

It is, @johndavemanuel. Hereā€™s the link:

I hope that you like it.

7

Great!

Thanks for your response!

8

Let us know at any time in the future, if you have any questions about those!

9

hi dan,

great tutorial. i am picking up a good bit from it so far and am looking forward to moving on to the ā€˜goodā€™ part with authentication. however, i am a bit stuck when it comes to the css for the site. iā€™ve just replaced the basic style.css (with the aqua background) with that contained in the gist. when i save and browsersync reloads the content is all loaded below the page, as in, i have to scroll down past a white screen to see what would be the header ā€œWHATABYTEā€ text. by trial and error i was able to narrow the issue down to this part of the css:

html, body,
#root {
  height: 100%;
  width: 100%;
}

with that commented out, the page loads almost as expected. as soon as i uncomment and save; back to a white page.

i can narrow it further down to the single line:
height: 100%;

the issue is with the height commented out everything is a little bit s-t-r-e-t-c-h-e-d out. i am not too confident about moving on to images with this artifact in place. also, in your example image it appears the h1, h3, etc text is on the left hand side of the page, while i am seeing it centered across the middle.

i have tried this in both chrome & safari just to be certain itā€™s not safari (my preferred browser) acting like a jerk in this case.

does this ring any bells? can you suggest anything i can change to get the desired effect? for now i will carry on with the height commented out, but i have a feeling that things are going to be heading downhill from here.

-c.

1 Like
10

I had a bit of trouble getting browser-sync running. If I run the app with

nodemon ./index.js

Then Iā€™m able to browse to port 8000 and see the basic page through Pug. However, if I use the prescribed

browser-sync start --proxy=localhost:8000 --files='**/*.css, **/*.pug, **/*.js' --ignore=node_modules --reload-delay 10 --no-ui --no-notify

then the browser endlessly spins with ā€˜Loadingā€¦ā€™.

Digging deeper, it looks like Iā€™m successfully connecting to BrowserSync. I can telnet to port 3000, and I can issue a raw HTTP command like GET / HTTP 1.1, but the session hangs and never responds.

This happened on two different systems with fresh Node and NPM installs. Adding a --logLevel=debug flag didnā€™t reveal anything obviously amiss.

What might I be doing wrong? How can I go about troubleshooting this?

11

Iā€™ll investigate and get back to you! Thanks for reading the post.

12

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.

13

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!

14

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
15

@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:

16

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.

17

Check out this line:

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

18

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

2 Likes
19

Cool, glad it worked :+1:

20

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