Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A node.js SPA server that serves static files and an index.html file for all other routes.
/*
Incredibly simple Node.js and Express application server for serving static assets.
Given as an example from the React Router documentation (along with examples
using nginx and Apache):
- https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory
*/
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
// serve static assets normally
app.use(express.static(__dirname + '/dist'));
// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response) {
response.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);
console.log("server started on port " + port);
@zoutepopcorn

This comment has been minimized.

Copy link

zoutepopcorn commented Apr 18, 2018

response.sendFile(path.resolve(__dirname, 'index.html'));
should be
response.sendFile(path.resolve(${__dirname}/index.html));
?

@LaughDonor

This comment has been minimized.

Copy link

LaughDonor commented Apr 24, 2018

No because path.resolve resolves the URL and normalizes it. It's also safer. __dirname is the directory of the current file.

@cullylarson

This comment has been minimized.

Copy link

cullylarson commented Jun 13, 2018

This is exactly what I was looking for. Thank you!

@shanmugam-sekar

This comment has been minimized.

Copy link

shanmugam-sekar commented Jun 21, 2018

Thanks a lot .

@isthisstackoverflow

This comment has been minimized.

Copy link

isthisstackoverflow commented Feb 5, 2019

Fun fact: When I link the bundle as relative path "./bundle.js", it won't work on example.com/oh/the/horror due to obvious reasons.

Just posting this for the next time I wonder what I'm doing wrong and find this page. Thanks for snippet!

@blindkrone

This comment has been minimized.

Copy link

blindkrone commented Jan 31, 2020

how do you route the 404s in this one?

@ryanoglesby08

This comment has been minimized.

Copy link
Owner Author

ryanoglesby08 commented Feb 1, 2020

how do you route the 404s in this one?

In this example, all routing is done client side. Because of the app.get('*', ...), there really isn't a concept of a 404 to the server. Any URL will return the index.html page.

You can handle unknown URLs however makes most sense with your app and JS framework. Here's an example from the current React Router docs: https://reacttraining.com/react-router/web/example/no-match

If you are asking about 404s of the static assets, such as a request for a /dist/foobar.js (doesn't exist on your server), check the latest docs for express.static for more info: https://expressjs.com/en/4x/api.html#express.static

@hasinthaK

This comment has been minimized.

Copy link

hasinthaK commented May 18, 2020

Thanks for the gist, very helpful, but i should point out that this server does not handle Invalid urls, I get no such file or directory error when any gibberish path is entered in the url, or am I doing something wrong? I pasted this code exactly as it is, thus it is giving the error,
Anyone have a thought?

@MaxmaxmaximusGitHub

This comment has been minimized.

Copy link

MaxmaxmaximusGitHub commented Aug 4, 2020

Thanks you =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.