NGINX Docker image for SPAs

This docker image can be used for single page apps (SPAs) in history mode. It serves your index.html if no other file matches.

Quickstart

To create your own dockerfile, simply copy your distribution folder (often dist/ or build/) to /app into the image.

# append the following in your existing dockerfile
# this will create a multi-stage docker build for minimizing size and security vulnerabilities
# ...

FROM steebchen/nginx-spa:stable

# adapt the `dist/` folder to the output directory your build tool uses (such as `dist/`, `build/` or `www/`).
COPY dist/ /app

EXPOSE 80

CMD ["nginx"]

Simply run your container as follows:

docker build -t your-app .
docker run -p 8000:80 your-app

Now you can visit http://localhost:8000/ in your browser or run curl -v http://localhost:8000/ to check if it's working.

What it does

Single page applications (SPAs) often use the HTML5 history API. This results in neat urls like /user/john, but will result in a 404 when accessed directly in the browser.

This means you have to configure your webserver to serve your entrypoint (index.html) on all routes per default, which es exactly what this docker image does.

Additionally, routes containing a dot will default to a 404 to prevent sending the index.html for routes like /static/asset.js. This is super useful, but may break your app if you have app urls with dots in it (which I doubt).

Files including a dot will also have a Cache-Control header set to instruct browsers to cache content for 30 days. This is perfect if you're using webpack or similar frameworks which usually makes use of creating files with hashes in their names, but if your static files will be just named "bundle.js" or "0.css" (index.html is fine of course) you should avoid this image.