create-react-app serve 200.html

[s0l0ist]

Feature Request

Is your feature request related to a problem? Please describe.
Related to #117 - not a problem, just more clarification on how to serve 200.html in the readme to prevent index.html flashing.

Describe the solution you'd like
A section dedicated to common static services and how to properly configure them.

Describe alternatives you've considered
Leaving the readme as-is

Teachability, Documentation, Adoption, Migration Strategy
Describe a couple of use-cases for serving static sites with react-snap and redirecting to 200.html
Specifically, describe a few configurations for Nginx and the recommended serve -s build from create-react-app.

For Nginx, this is a simple configuration change:

server {
    ...
    root /var/www/my-site;
    index index.html;
    ...
    location / {
      # If SPA (no ssr) , serve index.html
      # try_files $uri /index.html;
      # React-snap, serve 200.html
      try_files $uri /200.html;
    }
}

For create-react-app's suggestion to use serve -s build:

• add a serve.json file containing the following:

{
  "rewrites": [{
    "source": "**",
    "destination": "200.html"
  }]
}

• Modify the serve script in package.json to be:

    "serve": "serve -c serve.json build",

[Daniel15]

try_files $uri /200.html;

This will serve 200.html even for 404 errors though, so the 404.html file will never be used and the response header will never have 404 File Not Found as the status.

It will alos

You probably want something like $uri.html $uri/index.html in your try_files so that requests to /foo/ (for example) serve either the /foo.html or /foo/index.html files if one exists, and only fall back to /200.html if they don't.

[Daniel15]

I was thinking about this more, and directly serving the files via Nginx isn't optimal at the moment, as it's tricky to configure HTTP/2 push correctly using the http2-push-manifest.json. That'd be possible with a Lua script (as per #73) or by using code generation to generate the correct Nginx config, eg:

location = / {
  http2_push /static/js/main.xxxxxxx.chunk.js;
  http2_push /static/js/1.xxxxxxx.chunk.js;
}

location = /about/ {
  http2_push /static/js/main.xxxxxxx.chunk.js;
  http2_push /static/js/2.xxxxxxx.chunk.js;
}

but in the end, for my particular use case I just made my backend server (using ASP.NET Core) handle it as that was the easiest approach.