Using express.js to serve html file along with scripts, css, and images

Question

I'm trying to build my first webapp, I started with the frontend and using jquery and jquery mobile as well as many plugins I have a significant frontend already, and all of it stems from a single html file (since jquery mobile uses page divs within the same file) but there is also a main js file for the app, a css file and many css and js files included from plugins and the like. I'm now trying to add in database and other backend functionality using node.js and express.js, but I've run into a wall, when I use res.sendFile() to serve up the html the scripts and css don't load, and when I try to serve the directory everything is in it shows the directory as links which I certainly don't want in the public view (though when I do this and click the html file link it works fine.

What I want to know is how do I use express to a) serve up an externally designed and maintained frontend and b) allow that frontend to send requests back to the server (so I can use forms and get data and stuff)?

Eric Douglas · Accepted Answer · 2015-07-19 20:18:14Z

26

You should do the following things:

Serve your static files
Create an API server that will listen for the requests coming from your frontend app

1. Serve your static files

To serve static files with Express, read this link.

You'll basically add it to your express app:

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

Where '/client' will be the name of the folder with your frontend app files.

2. Create an API server

You can see how to create an API server here.

For the entry point of your application, you should send/render a file.

This could be accomplished with the following code:

app
  .get( '/', function( req, res ) {
    res.sendFile( path.join( __dirname, 'client', 'index.html' ));
  });

This will send a static file every time that a user request a file at the root path of your application.

You can use the asterisk * (wildcard) instead of / too. That symbol meaning that for whatever route requested, you will respond with the same file/action.

More about the responses here.

Sum up

Those are the things that you should seek to build your app.

You can see a simple app with those things implemented here.

edited Jul 19, 2015 at 20:18

answered Jul 19, 2015 at 19:27

Eric Douglas

4597 silver badges12 bronze badges

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

6 Comments

Roscode Over a year ago

Thank you, that looks like what I need especially the github page, one thing though, when I use app.use(express.static(__dirname+ '/public')); where public is the directory with all of my important files I get an error: "Cannot GET /" at the localhost port, do you know why this might be happening?

Eric Douglas Over a year ago

You should set an app.get( '/', function( req, res ) { /* response */ }); "/" = refer to the root path of your app. To respond this request, you can use multiples methods: You can render a file with res.render() or you can send a static file, with the res.sendFile() method. For the (REST) API, you'll use the res.json() method. More about it here: expressjs.com/api.html#res

Eric Douglas Over a year ago

@Roscode I improved the answer answering your question. If you have more doubts, I'll promptly try to help you =)

Swaraj Giri Over a year ago

@Roscode - In production, you most probably will be using nginx as a reverse proxy. If so, use it to serve the static assets.

Phil Over a year ago

There is no need to add a specific GET / handler if there's an index.html file in the directory used to serve static files

|

Collectives™ on Stack Overflow

Using express.js to serve html file along with scripts, css, and images

1 Answer 1

1. Serve your static files

2. Create an API server

Sum up

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Serve your static files

2. Create an API server

Sum up

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related