Next-Pwa not working on production server such as Nginx

Question

I am working based on Next.js example app like below link

https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

and here is my next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
    pwa: {
        dest: 'public',
        register: true,
        runtimeCaching,
    }
})

and here is the manifest.json

{
  "name": "nex-pwa",
  "short_name": "app",
  "display": "fullscreen",
  "orientation": "portrait",
  "theme_color": "#3056de",
  "background_color": "#3056de",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    }, {
      "src": "/icons/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

and there is Nginx server file

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location ~/images(.*$) { 
        proxy_pass http://localhost:3035/images$1; 
        proxy_redirect off; 
    }

    location ~/fonts(.*$) { 
        proxy_pass http://localhost:3035/fonts$1; 
        proxy_redirect off; 
    }

    location ~/icons(.*$) { 
        proxy_pass http://localhost:3035/icons$1; 
        proxy_redirect off; 
    }

    location ~/sw.js(.*$) { 
        proxy_pass http://localhost:3035/sw.js$1; 
        proxy_redirect off; 
    }

    location ~/workbox-c2b5e142.js(.*$) { 
        proxy_pass http://localhost:3035/workbox-c2b5e142.js$1; 
        proxy_redirect off; 
    }

    location ~/_next(.*)$ {
        proxy_pass http://localhost:3035/_next$1;
        proxy_redirect off;
    }

    location / {
        proxy_pass http://localhost:3035;
        proxy_redirect off;
    }

    location ~ /\.ht {
        deny all;
    }
}

It is working on the development on local dev server but when I deploy to production like DigitalOcean with nginx it's not working anymore, I mean web app working but Installing Icon not showing on the browser.

What I have done wrong here, please.

Thanks

Answer 1

this kind of error I was faced but I was overcome this stage & exactly sharing my configuration which working fine on my site with production server using Nginx.

Step 1: I am seeing your manifest.json file is okay.

Step 2: in the next.config.js

const withPWA = require('next-pwa')

module.exports = withPWA({
    pwa: {
        dest: 'public'
    }
})

and save & run/restart the development server like npm run dev then it will generate sw.js & workbox-*.js if these files are generated then again stop the development server & open the next.config.js update the file like below

module.exports = withPWA({
    pwa: {
        disable: process.env.NODE_ENV === 'development',
        // dest: 'public', // comment out this line
        register: true,
        sw: '/sw.js'
    }
})

Now project upload into the server & the Nginx server update but I am seeing the server file is fine just update this section based on your file

location ~/workbox-c2b5e142.js(.*$) {  // from public folder
    proxy_pass http://localhost:3035/workbox-c2b5e142.js$1; 
    proxy_redirect off; 
}

and restart the server & build the project & restart the pm2 & that's it.

I think it will work.

Let me know if you have any confusion.

Thanks

Answer 2

The console error you mention in the comments mentions /css/animate.min.css and shows a 404 error for that file... Also your nginx config doesn't appear to have a /css rule. Maybe you need to add that, like:

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location ~/css(.*$) { 
        proxy_pass http://localhost:3035/css$1; 
        proxy_redirect off; 
    }

    # ... your other location rules
}

That said, I'm wondering why you are proxy passing each directory separately to the same destination. Why not just use try_files on the static directory instead and only proxy calls that the server/next actually needs to render. I'm guessing localhost:3035 is your node/next server? You might try something like:

server 
{
    root /var/www/domain.com/html/pwa;

    server_name domain.com www.domain.com;

    error_log /var/www/domain.com/html/pwa/log/error.log;

    location / {
        root /var/www/domain.com/html/pwa/static;
        index index.html;
        try_files $uri $uri/ @proxy;
    }

    location @proxy {
        proxy_pass http://localhost:3035;
        proxy_redirect off;
    }

    location ~ /\.ht {
        deny all;
    }
}

This assumes your static files generated by your build process are located in /var/www/domain.com/html/pwa/static , if not, adjust the root settings in location / to the root folder where your image/ , fonts/ , etc. actually are.