Hello All,
As a developer it will always be a repetative task for us to run deploy command and and then zip the files and connect to sftp > upload file > unzip. some times we find it hard to do so. and some cases it will be slow may be of various reasons like pc configurations, Internet speed and other

So recently github has launched Github Actions which will help us to automate tasks

So now we are going to see how to build an angular project then deploy it to a server using ssh

Let's get started

Prepare

Lets prepare our project in github and ready for deploy

Configure github workflow

Once our project is ready we need to configure our github workflow

To configure create a folder named .github inside it workflows now inside this workflows directory we are going to create new file which will hold our yml code to build an deploy

Code yml

First line of code will tell the Workflow name

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]

Code on > push > branch will tell on what action you want to run the job for more details about that visit this link

Workflow Syntax

jobs:
  build:
    # using Ubuntu
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1 #this installs node and npm for us
      with:
        node-version: '12.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-

    - name: NPM Install
      run: npm install
    - name: NPM Install Angular
      run: npm install -g @angular/cli > /dev/null
    - name: NPM build Angular Production
      run: ng build --prod
    - name: Delete Existing Files
      run : sudo sshpass -p ${{ secrets.SSH_PASS }} -v ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} 'rm -rf /home/runcloud/webapps/viuweb/*'

    - name: Compress and Copy New Files to server
      run : |
            cd dist/Viusasa/
            tar -czvf ../../viusasa.tar.gz ./
            cd ..
            cd ..
            sudo sshpass -p ${{ secrets.SSH_PASS }} scp -v -o StrictHostKeyChecking=no -r viusasa.tar.gz ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/home/runcloud/webapps/viuweb
    - name: Uncompress new Files
      run : sudo sshpass -p ${{ secrets.SSH_PASS }} -v ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} 'cd /home/runcloud/webapps/viuweb/ && tar -xzvf viusasa.tar.gz && rm viusasa.tar.gz'

In above code intially we create a job and tell it to which operating system to be used and what is your working directory if your project code is in sub directory

    # using Ubuntu
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./

Her we are going to use ubuntu and setting my work-directory to ./ as its completely optional but i am leaving it here as some may face problem with it

Once we are done with this we create steps to perform one by one

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

so in this first two steps we are using two actions first one is use full to clone your project. second one is used to set us nodejs environment for us in the allcoated space for us

- 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-

We setup cache for our node modules using actions/cache@v1 action

- name: NPM Install
  run: npm install
- name: NPM Install Angular
  run: npm install -g @angular/cli > /dev/null
- name: NPM build Angular Production
  run: ng build --prod

in this lines of code we install dependencies from our packages.json and then we install @angular/cli finally we run ng build --prod to build our code

- name: Delete Existing Files
  run : sudo sshpass -p ${{ secrets.SSH_PASS }} -v ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} 'rm -rf /home/example/host/html/*'

next we delete any files in the server from our hosting location so we can write new files

here if you see we have some variables ${{ secrets.SSH_PASS }} we are coming form github secrets you can add them in the project settings > secrets

- name: Compress and Copy New Files to server
  run : |
        cd dist/
        tar -czvf ../../app.tar.gz ./
        cd ..
        cd ..
        sudo sshpass -p ${{ secrets.SSH_PASS }} scp -v -o StrictHostKeyChecking=no -r app.tar.gz ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/home/example/host/html
- name: Uncompress new Files
  run : sudo sshpass -p ${{ secrets.SSH_PASS }} -v ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} 'cd /home/example/host/html && tar -xzvf app.tar.gz && rm app.tar.gz'

In the above lines of the code we execute some linux commands which will compress our files to app.tar.gz then connect to server via scp and upload it to our hosting location then uncompress the file and finally delte the app.tar.gz

Thanks for your time.

Hope you like it, if yes clap & share.