SHARE

Yo gang, in this NodeJS tutorial, I’ll be showing you how we can serve up static files (such as CSS files) to the user using middleware. In this example, we’ll use some middleware built into Express, which makes things super easy!

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/node-js-playlist
+ Atom editor – https://atom.io/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== JavaScript for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

============ CSS for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

18 COMMENTS

  1. CSS and the todo-js file not found??
    use this in the middleware section:
    app.use('/assets',express.static('./public/assets'));

  2. It isn't working for me..i get 404 for style.css everytime.
    I created assets folder outside public folder, and created a new style.css in it. Then followed the same steps as mentioned in the video, but everytime it shows 404.

  3. Following code example works well. But when I navigate to localhost:3000/contact, it can't load style.css and 404 occur again. Note I have include <link href="xxxx" rel="stylesheet"> in contact.ejs

  4. It works, but when I put a trailing slash on the end of the URL, the website requests 'website/styles/styles.css' rather than 'styles/styles.css', so it loads the site with css, scripts and images when I got to '0.0.0.0/website' but without when I got to '0.0.0.0/website/'.

    If I handle '/website/' then it does the same, except it is inverted, and the css doesn't load for the first URL instead.

  5. Hi, Net Ninja! Thanks for another great tutorial. I got a bit lost when you passed in ‘/assets’ as the first argument in the app.use method. The index.ejs file’s URL path is ‘/‘, so I don’t see how the ‘/assets‘ middleware function can apply to it. Instead, is the middleware function fired when index.ejs requests the ‘assets/styles.css’ in its <link> tag? If so, then does that essentially mean all href links to external stylesheets in ejs files are separate requests to the server?

LEAVE A REPLY

Please enter your comment!
Please enter your name here