From e3c385f408e3d0ea41eca4b23d7b4f30dde3f2be Mon Sep 17 00:00:00 2001 From: Deepjyoti Barman Date: Sat, 27 Feb 2021 18:41:56 +0530 Subject: [PATCH] Fix the white screen issue The white screen on second load was happenning due to nginx and not our code. nginx (since it redirects all 404's to our index was doing just that.). This means, even when a chunk that the service worker has cached wouldn't be available, it'd be returned the `index.html` with a 200 OK and so our service worker thinks that's the correct file and accordingly caches it. In the second load, it tries to load this cached files and fails in doing so since the JS and CSS files are actually the `index.html` file. --- .github/workflows/build-push.yml | 5 +++++ nginx.conf | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build-push.yml b/.github/workflows/build-push.yml index de64f34..343408c 100644 --- a/.github/workflows/build-push.yml +++ b/.github/workflows/build-push.yml @@ -18,8 +18,13 @@ jobs: node-version: '15' - name: Install dependencies run: npm install + # Install workbox + - name: Install workbox + run: npm i workbox-cli --global - name: Build for production run: npm run build + - name: Build service worker + run: workbox generateSW workbox-config.js # Upload the dist directory - uses: actions/upload-artifact@master with: diff --git a/nginx.conf b/nginx.conf index 155a343..fc3a51c 100644 --- a/nginx.conf +++ b/nginx.conf @@ -23,11 +23,12 @@ http { # All the nested routes that would have atleast one dot in them # are to be served as it is. If not available, then it will # result in a 404. - location /.*\..*$ { # files (assuming they always have a dot) - root /app; - try_files $uri =404; + location ~ ^/.*\..*$ { + root /app; + try_files $uri =404; } + # All the nested routes that have something without a dot # will be redirected to the index.html location / {