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
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 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.