A Top Shelf Web Stack—Rails 5 API + ActiveAdmin + Create React App
Charlie Gleason
1.1K32

Thanks Charlie Gleason for the excellent post.
We use this strategy on Heroku and recently ran into a small snitch. You may run into this problem if you still use some non-api rails routes as we do for omniauth.
Recent versions of create-react-app include a service worker, registerServiceWorker.js. You can read more here.

In short, the service worker will cause rails route requests using this strategy to fail, or in our case 404. This is because the service worker will prevent the rails router from being reached.
There are a few options:
1. Disable the service worker. The quick fix is to merely comment out import registerServiceWorker from ‘./registerServiceWorker’; per gaearon in src/index.js and not register the service worker at all.
2. Disable the service worker’s fallback. The service worker implements its own fallback strategy to index.html. You can disable this fallback by removing the following lines from config/webpack.config.prod.js:
//navigateFallback: publicUrl + ‘/index.html’,
//navigateFallbackWhitelist: [/^(?!\/__).*/],
3. Blacklist non-api rails routes from fallback. It’s likely best to write a regex in the whitelist section that excludes those routes for pages where the service worker should not fallback.

Cheers, will update if we sort out anything more and thanks again Charlie.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.