Deploy a PWA (how to)

[Al1_andre]

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

[Al1_andre]

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.