Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics (2015) Serving Static Files in Express Add Static to the Layout Template

Posted by Ron Gootman
Ron Gootman
24,409 Points

Unable to load the css style on to the page

Hi there,

I followed up with the course progression and at this point I am not able to load the CSS style on to the website.

If I go to the page source on the browser and click the css href link to /static/css/bootstrap.css, it redirects me to the bootstrap code. However I won't apply it for some reason when loading the site.

This is weird because I does locate the images from the static server. When I tried to debug in chrome, I couldnt find the css files in the sources tab.

Next, I cloned the branch of this video addStaticToLayout to my local machine and the issue is the same.

I am assuming I am running a more updated version of Node or Express on my machine hence the issue.

Appreciate any assistance

Philip Putnam
Philip Putnam
2,380 Points
Philip Putnam
Philip Putnam
2,380 Points

Hey Ron, I have also been following this tutorial recently with some slight modifications but I was able to get it working with little to no real main code tweaking. I'm running express ^4.15.3 vs. the tutorial's version of ^4.13.0 and I'm also using pug vs. jade, which is simply the updated version.

I believe that everything should work so we might be able to help with some code snippets to see if we can get another pair of eyes on the code. There are a number of files that are working off each other but if this only started breaking right here, maybe check your directories and ensure that you placed the css/js/etc. files in the correct place. i.e., within the public folder.

After double checking that, in your app.js or server file, check that the static server code is accurate:

app.use('/static/', express.static(__dirname + '/public'));

Finally, ensure that the template syntax is correct for the link:

link(rel='stylesheet', href='/static/css/bootstrap.css', type='text/css')

Double check that white space! Hopefully some of this helped or you've already fixed this.