alex61nn5 / angular-universal-pwa-heroku-starter

🔥 Angular 8 PWA Universal Heroku Starter 🔥- Starter project for an Angular 8 application with Universal implementation and heroku build configuration

🔥 Angular 8 PWA Universal Heroku Starter 🔥

DEMO SITE https://angular-heroku-starter.herokuapp.com/

This is a starting point for an Angular Universal application that can then be published correctly to heroku with working SSR(server side rendering)

This starter was created by creating a new angular application with @angular/[email protected] and combining the techniques shown in these two articles. deploying-an-angular-universal-app-to-heroku and enable-angular-universal-for-existing-app plus some additional configuration to get it all working on Angular 8

*If you're looking for the Angular Universal repo go to angular/universal

Table of contents

• Getting Started
  • Development
• Heroku
• PWA
• Universal Gotcha's
• Contribution Guidelines
• Lincence

Getting Started

Download the project files and install the dependencies. this project is set up with yarn

$ git clone https://github.com/Alex61NN5/angular-universal-heroku-starter.git
$ cd angular-universal-heroku-starter

then run yarn

The package.json has an engines section that specifies the node and yarn version to use for the heroku build

In your terminal run the following commands

$ node -v
$ yarn -v // or npm -v

now either update your node and yarn/npm to match the ones found in the package.json or change the engines to match your versions otherwise when you try to install packages it will throw an error

"engines": {
    "node": "10.16.3",
    "yarn": "1.5.1"
},

If you wish to use npm instead make sure you delete the yarn.lock file from the project and then change the engines to use the version of npm you are running to find this out run npm -v an example of what this would look like is

"engines": {
    "node": "10.16.3",
    "npm": "6.4.1"
},

IMPORTANT You will probably want to change the project name so what you will need to do is do a find and replace of angular-universal-heroku-starter and change everything to your new project name. Most of this stuff will be in the angular.json

Development

To run this project for development you can use the command ng serve or npm start

This project uses husky to implement git-hooks and commitLint to check commit messages. If you do not wish to use these features remove this from your package.json

"husky": {
  "hooks": {
    "pre-commit": "ng lint",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},

remove the commitlint.config.js file from the src directory and then run

yarn remove husky @commitlint/cli @commitlint/config-angular

Test Production/Server Side Rendering

npm run build:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000

Heroku

IMPORTANT For the heroku deploy to work correctly you must change this line in your package.json to match the new name of the project

"build:client-and-server-bundles": "ng build --prod && ng run <YOUR-PROJECT-NAME>:server"

To deploy to heroku

$ git init
$ heroku login
$ heroku create
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
$ heroku open

PWA

This project is now a Progressive Web Application, this was achieved by running ng add @angular/pwa.

Some things to keep in mind,

1. You will need to update the pwa icons located in the assets folder to match your application
2. You will need to update your manifest.json to reflect your application for eg.

{
  "name": "Your application name here",
  "short_name": "Short name for application",
  "theme_color": "#1976d2", // Colour Theme
  "background_color": "#fafafa", // Background colour
  "display": "standalone", 
  "scope": "/",
  "start_url": "/",
  ...

3. In the ngsw-config.json file if you plan on having a sitemap.xml or robots.txt you will need to add them to the resources section

Currently the application is getting a 92 lighthouse score, there are two issues http to https which unfortuantely is unavoidable with heroku, and the short_name is too long but you will need to update that anyway which will fix this issue and your score will be closer to 100

Universal "Gotchas"

https://github.com/angular/universal/blob/master/docs/gotchas.md

Contribution

Before contributing please read the contribution guidelines

Licence

---

angular-universal-pwa-heroku-starter's Issues

Add Husky git hooks

Add contribution.md

Add rules for contributing to project

Update README.md

Create readme

• how to install
• how to configure
• info about project
  etc.

Upgrade to Angular 7.1

Add Hot Module Replacement

Could potentially use this tutorial

https://theinfogrid.com/tech/developers/angular/enabling-hot-module-replacement-angular-6/

Create new landing app page

Build fails since update to Angular 8

Getting this error message

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/tmp/build_f2de83d063d50f940a16d7a36ce06678/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at /tmp/build_f2de83d063d50f940a16d7a36ce06678/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/tmp/build_f2de83d063d50f940a16d7a36ce06678/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] webpack:server: `webpack --config webpack.server.config.js --progress --colors`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] webpack:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.pNgEI/_logs/2019-10-10T04_30_23_331Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:ssr: `npm run build:client-and-server-bundles && npm run webpack:server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.pNgEI/_logs/2019-10-10T04_30_23_346Z-debug.log
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c npm run build:ssr
Directory: /tmp/build_f2de83d063d50f940a16d7a36ce06678

Steps to reproduce:

1. Fork this project
2. Follow the steps to deploy to heroku

Upgrade to Angular 9 - 10

Add 404 page with correct 404 request sent

Upgrade to Angular 8

add PWA capabilities to project

Integrate service-worker and manifest.json into project

Remove the need to specifiy engines in package.json for heroku deployment

For some reason if you remove the engines section in the package.json file, the heroku build fails. Steps to reproduce would be

1. Fork this project
2. Remove the engines section in package.json
3. Follow the steps to deploy to heroku

Create Demo Site