[Updated] Deploy Angular to Production with Github Actions

Github Actions is cool. Angular is the best. Deploy your Angular application with Github Actions. Here’s how

To create your Github action, you can go here: https://github.com/your-github-username/your-repository/actions

Create a blank workflow, and copy paste the section below

name: CI

on: [push]

jobs:
  build:

    # using Ubuntu
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1 #this installs node and npm for us
      with:
        node-version: '10.x'

    - uses: actions/cache@v1 # this allows for re-using node_modules caching, making builds a bit faster.
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - run: npm install
    - run: npm install -g @angular/cli > /dev/null
    - run: ng build --prod

    - name: copy file via ssh key
      uses: appleboy/scp-action@master
      with:
        HOST: khophi.com
        USERNAME: username
        PORT: 22
        KEY: ${{ secrets.forSSH }}
        source: "./dist/your-angular-app-name/"
        target: "/home/user/domain.com/pwa/"
        strip_components: 3 # this is important

For the above workflow to work, the last step is to add the contents of your ~/.ssh/id_rsa to https://github.com/your-username/repository-name/settings/secrets

That way, the KEY: ${{ secrets.forSSH }} part will work. Remember to name it forSSH or anything you like, and change it accordingly in the above workflow script.

That way, the above will copy the contents after the build looks like this

The destination folder is /home/user/domain.com/pwa

The source folder, which is the temporal project folder created by github during the actions is ./dist/your-project name

I hope the above helps. Happy coding!