How do I deploy Angular App to Heroku and keep as PWA? [duplicate]

Question

This question already has an answer here:

• Angular 6 PWA with Node not working 1 answer

Summarize the problem:

I'm trying to deploy my Angular 6 App to Heroku and keep the progressive web app features. There's no service worker for the end build on Heroku.

Background:

I've built a local Sports Store app in Angular 6. I'm following the book Pro Angular 6, 3rd Edition. by Adam Freeman and have gotten the app to roughly the stage at the end of chapter 9.

GitHub repository of chapter 9: SportsStore

To create this as a PWA I've run

ng add @angular/pwa

I edited the generated ngsw-config.json so it matches this shown below in Code

Following the blog post here I've done the following steps:

1. npm install --save express path
2. edited package.json moving @angular/cli, @angular/compiler-cli, typescript and @angular-devkit/build-angular": "~0.6.8" from devDependencies over to dependencies
3. Created server.js
4. Created Procfile with web: node server.js

heroku create sportsstoredemo
git add .
git commit -m "setup'
git push heroku master

This deploys on heroku but does not include the service worker. I'm lost what I can do as I barely understand the steps I've taken above.

Can someone take the GitHub repo and advise what steps will get this on Heroku with service worker running or point out where I have gone wrong?

Code

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/font/*"
      ]
    }
  }],
  "dataGroups": [
    {
        "name": "api-product",
        "urls": ["/api/products"],
        "cacheConfig" : {
            "maxSize": 100,
            "maxAge": "5d"
        }
    }],
    "navigationUrls": [
      "/**"
    ]
}

package.json

{
  "name": "sports-store",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "json": "json-server data.js -p 3500 -m authMiddleware.js",
    "postinstall": "ng build --prod"
  },
  "engines": {
    "node": "10.15.3",
    "npm": "6.4.1"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.6",
    "@angular/compiler-cli": "~7.2.0",
    "typescript": "~3.2.2",
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/pwa": "^0.12.4",
    "@angular/router": "~7.2.0",
    "@angular/service-worker": "~7.2.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "font-awesome": "^4.7.0",
    "path": "^0.12.7",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "^0.14.2",
    "jsonwebtoken": "^8.5.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0"
  }
}

server.js

const path = require('path');
const express = require('express');
const app = express();

// Serve static files
app.use(express.static(__dirname + '/dist/MY_APP_NAME'));

// Send all requests to index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
});

// default Heroku port
app.listen(process.env.PORT || 5000);

Describe expected and actual results

Expected - same app as code SportsStore but running as PWA on Heroku

Actual - just Angular App only when built on Heroku. Locally I can get this running as PWA.

Answer 1

The answer can be found at Angular 6 PWA with Node not working

Can someone mark my question as duplicate?

In main.ts the following works:-

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));

I had to also edit my package.json from "build": "ng build" to "build": "ng build --prod"

Below was going to be my update post until I found the above, I'll leave it here incase it's useful to anyone.

Rubber Ducking

I've had not found an answer to this so I've posted my progress so far in an attempt to Rubber Duck my problem in such a way anyone can follow.

Step 1: Get Angular 6 App running locally as PWA

git clone https://github.com/Apress/pro-angular-6
cd pro-angular-6
cd "09 - SportsStore - Admin"
cd SportsStore
ng add @angular/pwa

So per the angular docs >this last command is adding the @angular/service-worker package by adding the ServiceWorkerModule and registering ngsw-worker.js to app.component.ts Ok

Running the following builds the project and creates the /dist folder containing ngsw-worker.js

ng build --prod

Running the following means I can locally get this running as a PWA.

http-server -p 8080 -c-1 dist/SportsStore

Not too relevant but opening separate cmd and running the following populates the app with data.

npm run json

Step 2: Get Angular 6 App running on Heroku

So edited package.json moving @angular/cli, @angular/compiler-cli, typescript and @angular-devkit/build-angular": "~0.6.8" from devDependencies over > to dependencies

This blog post suggest "postinstall": "ng build --aot --prod" rather than "ng build --prod". Let's try that.

Ran

npm install express path --save

Added server.js with same code as OP. I had some issues with this using a ./dist > from someone else blog post but changed this back to /dist

Edited to "start": "node server.js" in package.json. Well that's different at least

Deploy to heroku (roughly along lines of)

heroku login
git init
git add -A
git commit -m "test"
heroku git:remote -a APP_NAME
git push heroku master