Setting up express to enable the use of static css and js files

Question

I am having trouble setting up the middle-ware of my application so that it serves some of my static files such as css and js. I would like to be able to include my css and js files that are inside of the public directory in my index.html .

This is a picture of my current file structure.

This is the code for my express server.

server.js

var express = require('express');
var path = require('path');
var app = express();

//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//app.use(express.static(__dirname + '/')); worked when everything was in jqtest

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

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

app.env
//server
app.listen(process.env.PORT || 5000);
console.log('app live in 5000');

These are the src tags I am trying to use in my index.html ,but are not working. I know I will probably need to set up an additional app.use for the jquery file located in components as well.

index.html

<link rel="stylesheet" type="text/css" href="/public/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/public/js/myJS.js"></script>

Edit 1 I have made my github for this proj public. It is available Here

Edit 2

This has been answered. Thank you very much to teleaziz and 7zark7 for helping guide me through this process.

Solution:

Step 1:

So the problem when removing your application server code outside of the root director is that __dirname is not a global variable. The first step to setting up the routes for my static files was to tell my server when the new root is. I did this by adding this line of code provided by teleaziz

var root = path.normalize(__dirname + '/..');

Step 2:

Once I did that I had to change the route for public to use root instead of __dir as advised by teleaziz

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

Step 3:

Once that was completed I removed /public/ from the src in my index.html as advised by teleaziz and 7zark7. My new src tags that work look like this.

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/js/myJS.js"></script>

teleaziz · Accepted Answer · 2015-01-03 05:35:41Z

1

__dirname is not a global object, (even though in the docs is list under global objects which is confusing to the reader!). It's actually limited to the module scope and it always refer to the folder containing the module. which is in your case is server folder which is not your project root,

So looking at your file structure lets :

first require the path module to help normalize the path:

var path = require('path');
var root = path.normalize(__dirname + '/..');

change your use of __dirname to root:

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

edited Jan 3, 2015 at 5:35

answered Jan 3, 2015 at 4:01

teleaziz

2,2601 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tilted Over a year ago

Hey thank you for the advice. I have implemented the changes you have provided above. Unfortunately my application is still unable to get my css and js files within the public directory.Here is a link to the new server.js with your changes included. I have kept the src tags the same as listed above. Thank you for your time - Fredk

teleaziz Over a year ago

Thinking about it , actually the first answer should work, Maybe I'm missing something: If you are in jqtest/server/server.js and you want to access the jqtest/public/ then path.normalize(__dirname+'/..') should work

tilted Over a year ago

Hey I just tried your edited answer. It was unsuccessful as well. I have made my git hub repository public if you would like to clone. Here is a link to the repository. Thank you for everything , -Fredk

teleaziz Over a year ago

I just took a look, so the public folder should be the root of your assets, so just make sure take the public out of the href and you'll be good. i.e ' href='/css/style.css'

tilted Over a year ago

Wow you are right it worked. I thaught I had tried that, but I guess I had done something else that was causing it to error. Using the changes you had told me to orginally make, and them removing the /public from the src made it work properly. Thank you.

7zark7 · Accepted Answer · 2015-01-03 05:16:56Z

0

Remove public from these:

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script type="text/javascript" src="/js/myJS.js"></script>

As by mapping this:

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

You do not need public

answered Jan 3, 2015 at 5:16

7zark7

10.2k5 gold badges42 silver badges54 bronze badges

4 Comments

tilted Over a year ago

Hey thanks for the advice. I have tried that as that was my understanding of how it should work. But it does not. Here is the js file and here is the html file with your changes implemented into them. It is still not routing properly though.

tilted Over a year ago

You are right but I still needed to set the root folder because as teleaziz stated above the __dirname is not global, and since I moved my server code outside of the root it was not sure where root was. Thank you so much. -FredK

7zark7 Over a year ago

I see, it's because you have server.js under /server/, I usually put this at top-level and have /public as sub dir

tilted Over a year ago

Yes that is correct your solution would have worked had my server.js been in the root directory. Thank you super much for the help.

Collectives™ on Stack Overflow

Setting up express to enable the use of static css and js files

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related