🔥 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