Node.js Express serving index.html instead of static file

Question

Im starting a node.js with express app, using angular. Everything was working fine while creating the app on cloud9.

I just released the app on my ec2 instance and now node always deliver index.html instead of my static file... When i look in chrome debug network, i see all js files loaded (status 200) but when i preview them, its my index.html file... The type of my js files is also set to text/html...

Here is my little server.js (no routing as i fake my angular data, so no call to the server for now...)

var express = require('express'),
path = require('path'),
http = require('http'),
fs = require('fs');

var app = express();

var logFile = fs.createWriteStream('./logger/express.log', {flags: 'a'}); //use {flags: 'w'} to open in write mode

app.configure(function () {
    app.set('port', process.env.PORT || 3000);
    app.use(express.logger({stream: logFile}));
    app.use(express.bodyParser()),
    app.use(express.static(path.join(__dirname, 'public')));
});

 /*app.get('/events', eventRoute.getEvents);
app.post('/events', eventRoute.saveEvent);*/

http.createServer(app).listen(app.get('port'), function () {
    console.log("Express server listening on port " + app.get('port'));
});

As i said previously, everything is working fine on cloud9 (cannot try on local for now...).

Does anyone has a clue about what is going wrong?

Thanks

Dominic

PS: I forgot to mention that it is the same with my CSS file!

Edit: Here a little picture of what i mean! enter image description here

And when i look at the preview of any file i get enter image description here

Edit2: I just deleted all my files and uploaded them again. Same problem! I really need help on this one please!

Fo live demo of the problem, hit that site

How is jquery.min.js showing correct ? Also can you check if all the files in the public directory are valid and not copies of your index.html — user568109
– user568109, Commented Jul 18, 2013 at 6:00
jQuery.min.js is loading correct because it is load from cdn instead of being serve by my server. I will have a look as soon as possible to check if my js files are still like the original and not copies of index.html. (no ssh acces at job :/) — Doum
– Doum, Commented Jul 18, 2013 at 12:47
I juste checked and my JS / CSS file are ok. The contains what they sould contains. Anyone has an idea to solve this? — Doum
– Doum, Commented Jul 18, 2013 at 15:35
Are all files like that, I cannot see all from the screenshot. I don't see any problem in your express server. You said you faked angular data, are you intercepting all the links on the page, check your angular page/script. — user568109
– user568109, Commented Jul 18, 2013 at 15:53
Yes all the files are like that, except those loaded from CDN. My angular dont make any call for now. Just a few partial view filled with local data ($scope.client = {})... I dont see how it could make it happen... for now, i deleted all the file on the server and i am transfering it back to see if maybe there has been a problem while the initial upload! — Doum
– Doum, Commented Jul 18, 2013 at 16:07

ilmatic · Accepted Answer · 2013-07-18 03:08:54Z

4

Can you elaborate on what you mean by your 'static file' ?

on this line:

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

you have express routed to serve all files in the 'public' dir as static files. By default, express.static will serve 'index.html' if that directory is called. since you're serving the 'public' dir to '/', it's delivering index.html.

EDIT: I'm not sure if this is the problem, but this part of the code is redundant:

http.createServer(app).listen()

you can just say:

app.listen([port], [callback]);

since calling express() created a server. hope that helps.

edited Jul 18, 2013 at 3:08

answered Jul 18, 2013 at 0:28

ilmatic

5653 silver badges11 bronze badges

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

2 Comments

Doum Over a year ago

By static file i meant my Javascript files and my Stylesheet file. I have server.js in my root directory and then /Public/js /Public/css. How can i make it so it serve index.html when calling '/' and then serve the js file?

Doum Over a year ago

I removed the http.createServer! It is, as you said, redundant! Unfortunatly, the problem is still not solved ...

Doum · Accepted Answer · 2013-07-18 20:38:44Z

1

Well after a few hours of research about what can cause it, i finally found it!

The problem was not code related at all! I was hitting a new ec2 instance and i didnt route port 80 to my node.js app (81**).

I basically just runned this command and everything started working just fine.

iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to 81**

Thanks you all

answered Jul 18, 2013 at 20:38

Doum

3973 silver badges14 bronze badges

Comments

Prerna Tulsiani · Accepted Answer · 2023-10-24 04:50:41Z

In your root folder having server.js / index.js file, add the following code -

const express = require("express");
const app = express();
const path = require("path");

Sometimes the server.js file is not able to understand the location of build folder hence add the static location of build folder

app.use(express.static('client/build'));

// This will render your frontend at http://localhost:PORT/
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

// To serve you api at http://localhost:PORT/api
app.get("/api", (req, res) => {
  res.send("This is API");
});

// After this add the required the port number

const PORT = process.env.PORT

app.listen(PORT, () => {
  console.log("✅ Server running on port:",PORT);
});

Make sure the commands of calling functions are in this order -

app.use
app.get
app.listen

Command to run - node server.js

Collectives™ on Stack Overflow

Node.js Express serving index.html instead of static file

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related