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/cli@8.2.9 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
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
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
npm run build:ssr - Compiles your application and spins up a Node Express to serve your Universal application on http://localhost:4000
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"
$ git init
$ heroku login
$ heroku create
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
$ heroku open
This project is now a Progressive Web Application, this was achieved by running ng add @angular/pwa.
Some things to keep in mind,
- You will need to update the pwa icons located in the assets folder to match your application
- 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": "/",
...
- In the ngsw-config.json file if you plan on having a
sitemap.xmlorrobots.txtyou 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
https://github.com/angular/universal/blob/master/docs/gotchas.md
Before contributing please read the contribution guidelines
