Find a css file node js

Question

Hi I'm new to nodejs and I've just succeed to deploy a nodejs app online. Now I would like to know how to link CSS, JS or image files be cause when I try to do it like I used to, I get the error GET (not found).

The folder architecture is:

--public
    --assets
    --css
       index.css
    --js
--views
    --index.ejs
--node modules
app.js
package.json

Assuming that I want to code the link index.css in index.ejs, what I need to write in my app.js file please.

app.js code:

var express = require('express');
var app = express.createServer();

app.set('view engine', 'ejs');

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

app.get('/', function(req,res){
    res.render('index');
});


app.listen(8080,'IP_ADRESS');

index.ejs code:

<link rel="stylesheet" type="text/css" href="/css/index.css">

You should add the css in the html file and set your express.static folder to "public". Show us your app.js so we could help you. — QoP, Apr 30 '16 at 16:58

Jose Hermosilla Rodrigo · Answer 1 · 2016-04-30T17:30:02.090

1

The basic set up of serving static files in express :

var express = require("express");
var app = express();
...
app.use(express.static(__dirname + '/public'));
...
app.listen(3000);

Now in your .ejs in order to load the css styles or js scripts :

<link rel="stylesheet" href="/css/index.css"/>

edited Apr 30 '16 at 17:30

answered Apr 30 '16 at 17:02

Jose Hermosilla Rodrigo

3,003
5
16
35

This is correct for Express 2.x. This has changed in Express 3+. – Evan Hahn Apr 30 '16 at 17:10
I'm using Express 3+ – anonym Apr 30 '16 at 17:16

score 0 · Accepted Answer · answered Apr 30 '16 at 17:18

0

First, there's a thing called a static file. Basically, that's a file that's sent over the internet without any kind of modification. Image and CSS files are typically static files.

It looks like you've put your static files in a folder called public.

Express has a built-in feature for sending static files, called express.static. You can use it like this:

// Require the modules we need.
var express = require('express');
var path = require('path');

// Create an Express app.
var app = express();

// Get the path to the `public` folder.
// __dirname is the folder that `app.js` is in.
var publicPath = path.resolve(__dirname, 'public');

// Serve this path with the Express static file middleware.
app.use(express.static(publicPath));

// ...

You should now be able to see static files. If your site is normally accessible at http://localhost:3000, you'll be able to see index.css at http://localhost:3000/css/index.css.

If you want to know way too much about express.static, you can check out a blog post I wrote that goes into Express's static files in depth.

answered Apr 30 '16 at 17:18

Evan Hahn

10,035
7
33
43

Your code seems to sork when I inspect the Sources on google chrome I can see a index.css file, when I edit it, it edit my code, but when I try to edit the index.css file located on my server, there is not update. Thank you for your link, it appreciated – anonym Apr 30 '16 at 17:25
It's possible that your browser is caching `index.css`. Try doing [a hard reload](http://stackoverflow.com/q/14969315/804100) in your browser. – Evan Hahn Apr 30 '16 at 17:33
Do you have any cache middleware elsewhere in your Express app? Posting your `app.js` (or equivalent) would be useful. – Evan Hahn Apr 30 '16 at 22:22
Ah, sorry, just saw you updated your question. Are you sure you're updating the `index.css` that's on your file system? – Evan Hahn Apr 30 '16 at 22:23
It didn't realy work, But I found some bugs in my app, I think I'm not using express well so I restarted from the beginning and I try express generator. – anonym May 01 '16 at 02:43

Find a css file node js

2 Answers2