Skip to content

Instantly share code, notes, and snippets.

@aotimme
Last active June 3, 2022 19:37
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save aotimme/5006831 to your computer and use it in GitHub Desktop.
Save aotimme/5006831 to your computer and use it in GitHub Desktop.
Nginx config file to support pushState.
# pushState friendly!
# The setup:
# * website name is `site.com`
# * the API for your running on localhost:3000
# * the root for API calls is at `/api`, and you have authentication routes with root `/auth` (both go to localhost:3000)
# * javascript app is located at `/path/to/javascript/app`
# Assuming you have your server for API calls at localhost port 3000
upstream api_sitecom {
server localhost:3000;
}
# Assumes you want all API calls to go to `/api` and you want a separate path for authentication calls (`/auth`)
server {
listen 80;
server_name site.com;
root /path/to/javascript/app;
# API at `/api`
location /api {
proxy_pass http://api_sitecom;
proxy_set_header Host $http_host; # preserve the host (otherwise will be `api_sitecom`)
}
# Authentication routes (`/auth`) also go to API server
location /auth {
proxy_pass http://api_sitecom;
proxy_set_header Host $http_host; # again, preserve the host
}
# To make sure any assets can get through :)
location / {
try_files $uri @rewrites;
}
# If no asset matches, send it to your javascript app. Hopefully it's a route in the app!
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
}
@wbednarski
Copy link

Thanks for sharing. I see two issues here:

  1. Doesn't work with / at the and of the URL
  2. Doesn't work after page refresh with different URL then /

@yoannpicquenot
Copy link

Nice !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment