Loading css file on front-end [Solved]

Hello,

I am building an app with cloud 9 and can’t get my custom css file to load.

The css file is located at : running-app/css/styles.css
‘running-app’ being the name of the workspace.

The link to load the stylesheet in my main handlebars template is:
<link rel="stylesheet" href="/css/styles.css">

When I load the page in chrome I see this error in the developer tools:

GET https://running-app-armytank.c9users.io/css/styles.css 404 (Not Found)

Right now the css file should just set the background-color to black but it doesn’t. Does anyone know what might be causing this? I tried moving the css file around in the directory and the error is consistent except the path changes.

I am using handlebars for templating if that makes a difference.

EDIT: Do I need to make an app.get router to handle links to my stylesheet?

EDIT: I added the following router:
app.get('/css/styles.css', function(req, res){ res.send('css/styles.css'); res.end(); });

And modified the load link to this:
<link rel="stylesheet" href="/css/styles.css" type='text/css'>

Now there are no errors in the chrome developer console but the css file still doesn’t take effect.

1 Like

Without seeing your directory structure or how you’ve got your (presumably node/express) index.js or server.js files set up it is hard to say.

But, if you are using Node / ExpressJS you need to explicitly point to your static files with something like:

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

Is this on Github, by any chance so I can peek at the code?

2 Likes

Here is my repo:

I do have a line in server.js saying:
app.use(express.static(path.join(__dirname, 'static')));

To be honest I don’t really understand what this middleware is supposed to do I just found it in a tutorial.

Thanks

EDIT: I’m linking to the css in views/layouts/main.handlebars

1 Like

Ok, you’re close :slight_smile:
That middleware is designed to point to the directory where you have your static files.

In one of my apps, I have these relevant files in this file structure:

/
index.js
  /public
    /stylesheets
      main.css
  /views
    /partials
      header.ejs

The index.js includes app.use(express.static(path.join(__dirname, '/public')));
Note the /public.

The header.ejs partial includes <link rel='stylesheet' type='text/css' href='/stylesheets/main.css' />
Note the lack of public, it’s implied by the middleware.

In your example, your current directory for static files doesn’t match where you are keeping static files.

2 Likes

I figured it out! Thank you so much - I put my css folder within a ‘public’ folder and changed the app.use line to the one you suggested.

Thanks, I appreciate your help.

2 Likes

Thanks, I think we posted at the same time.

No worries.

Btw, I like the idea of a running meetup app :slight_smile: Let me know when it’s done!

1 Like

This is really helpful because I was stuck with the idea of both serving a part static part template website, I don’t understand how the paths interweave with each other. Thank you!

Thanks @JacksonBates It helps me too.

thanks sir !! it worked