Deploy a PWA (how to)



  • Hi there, I created a little app thanks to your awesome framework and want to deploy it as a PWA but I couldn’t find a way to deploy it to a server.

    I want to deploy it to Heroku so I changed the package.json file this way (I moved quasar-cli to dependencies and added a postinstall script that build the ios PWA :

    "scripts": {
        "lint": "eslint --ext .js,.vue src",
        "postinstall": "quasar build -t ios -m pwa",
        "start": "node server.js",
        "test": "echo \"No test specified\" && exit 0"
      },
      "dependencies": {
        "axios": "^0.17.1",
        "express": "^4.16.3",
        "quasar-cli": "^0.15.2",
        "vue-i18n": "^7.3.3"
      }
    

    Heroku generate the PWA like you can see on this ls result :

    $ heroku run ls
    Running ls on ⬢ ecomoi... up, run.2588 (Free)
    @1	   dist        node_modules	  package.json	  server.js  src-pwa
    README.md  index.html  package-lock.json  quasar.conf.js  src
    

    But when I want to access my dist/pwa-ios url it gives a Cannot GET /dist/pwa-ios/ message

    How could I do to make it installable on a smartphone ? Thanks



  • Finally it is really easy !

    I just had to follow the app-deploying-spa page.

    What I did different is the following :

    In package.json

    {
      
      "scripts": {
        "build": "quasar build -t ios",
        "build-ios-pwa": "quasar build -t ios -m pwa -c",
        "build-mat-pwa": "quasar build -t mat -m pwa -c",
        "heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build-ios-pwa",
        "lint": "eslint --ext .js,.vue src",
        "start": "node server.js",
        "test": "echo \"No test specified\" && exit 0"
      },
      "dependencies": {
        "axios": "^0.17.1",
        "connect-history-api-fallback": "^1.5.0",
        "express": "^4.16.3",
        "serve-static": "^1.13.2",
        "vue-i18n": "^7.3.3"
      },
      "devDependencies": {
        "babel-eslint": "8.2.1",
        "eslint": "4.15.0",
        "eslint-config-standard": "10.2.1",
        "eslint-friendly-formatter": "3.0.0",
        "eslint-loader": "1.7.1",
        "eslint-plugin-import": "2.7.0",
        "eslint-plugin-node": "5.2.0",
        "eslint-plugin-promise": "3.4.0",
        "eslint-plugin-standard": "3.0.1",
        "eslint-plugin-vue": "4.0.0",
        "quasar-cli": "^0.15.2"
      },
      "engines": {
        "node": ">= 8.9.0",
        "npm": ">= 5.6.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 10"
      ]
    }
    

    And in the server.js

    const
      express = require('express'),
      serveStatic = require('serve-static'),
      history = require('connect-history-api-fallback'),
      port = process.env.PORT || 5000,
      path = require('path')
    
    const app = express()
    
    app.use(history())
    app.use(serveStatic(path.join(__dirname, '/dist/pwa-ios')))
    app.listen(port)
    

    For the moment I only deploy pwa-ios.