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)?

Answer 1

You should do the following things:

1. Serve your static files
2. 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.