Question

65

Next-Pwa not working on production server such as Nginx

rated 0 times [ 66] [ 1] / answers: 1 / hits: 6130 / 4 Years ago, fri, october 23, 2020, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaredsages

Add To Favorites

Follow

Total Points: 273

Total Questions: 97

Total Answers: 105

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

jaredsages questions

1 Unexpected reserve word 'await'

Tue, Aug 17, 21, 00:00, 3 Years ago

1 React.JS App MODULE_NOT_FOUND error on 'npm start'

Sun, Jan 10, 21, 00:00, 3 Years ago

1 How to call Vue instance in chrome console, if he created in a separated file

Mon, Aug 31, 20, 00:00, 4 Years ago

1 Record voice with recorder.js and upload it to python-flask server, but WAV file is broken

Mon, Feb 3, 20, 00:00, 4 Years ago

1 Why is only the last item in a map function being changed in react app?

Thu, Dec 26, 19, 00:00, 5 Years ago

View All

answered 4 Years ago ryderalfonsos · Accepted Answer

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