How to build and deploy angular application to surge using github actions

Hey there,

Suppose you have an angular application and need to automate building and deployment also you are looking for how to do it.

You are in the right place.

Requirements

• Angular application
• Github account
• surge token and domain name

Prerequisite

• Push your application to github repo
• Add a folder .github/workflows/ in the root location and create a file with an extension of yml inside of it . Lets say (deplyment.yml) ( .github/workflows/)

Add name for your workflow

  name : Build and Deploy

If you omit name inside the workflow file, GitHub will set workflow name to the workflow file path relative to the root of the repository.

Setup trigger

• A workflow trigger is required for a workflow. We need to provide event that trigger the workflow
• Read more about it right here

on:  push:    branches:      - 'master'

• So on pushing the master branch. Change as you want.

Create angular build

• In GitHub Actions, jobs are defined by a series of steps that are executed on a runner.
• Each job runs on a different workspace, meaning that files and job side effects are not kept between jobs.

jobs:  build:    name: Build    runs-on: ubuntu-latest

• The latest version of Ubuntu GitHub-hosted runner is utilized for this job

• Jobs will not pull the source code by default, you need to explicitly tell the job to do so
  

- name: Checkout  uses: actions/checkout@v1

• This action checks-out your repository , so your workflow can access it. More about actions/checout@v1 right here

Setup Node.js

- name: Use Node 12.x  uses: actions/setup-node@v1  with:    node-version: '12.x'

• This action sets by node environment for use in actions by:
  • Optionally downloading and caching a version of node - npm by version spec and add to PATH
  • Registering problem matchers for error output
  • Configuring authentication for GPR or npm
• Read it here

Run build

- name: Install dependencies  run: npm install- name: Build  run: npm run build

Upload artifact

• To expose the results of the current job to the next job, we can configure build job to upload the build artifacts

- name: Archive build  if: success()  uses: actions/upload-artifact@v1  with:    name: deploy_dist    path: dist

if: success() is used to make sure upload artifact only runs if all the previous steps passed

Create Deploy Job

deploy:  runs-on: ubuntu-latest  needs: build  steps:      - name: Checkout        uses: actions/checkout@v1

needs: build is used to tell GitHub to only execute deploy job when build and test job completed successfully.

Download build artifact

- name: Download build  uses: actions/download-artifact@v1  with:    name: deploy_dist

Install surge

- name: Install surge a    uses: actions/setup-node@v1    with:        node-version: '12.x'        - run: npm install -g surge

Deployment

- run: surge ./deploy_dist/projectname ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}

SURGE_DOMAIN

• DOMAIN_NAME - Set the secret in settings -> Secrets -> New repository secret

SURGE_TOKEN

• TOKEN - Set the secret in settings -> Secrets -> New repository secret

Type in terminal as follows to get surge token

surge token

Conclusion

name: Build and Deployon:  push:    branches:      - 'master'jobs:  build:    name: Build and Test    runs-on: ubuntu-latest    steps:      - name: Checkout        uses: actions/checkout@v2      - name: Use Node 12.x        uses: actions/setup-node@v1        with:          node-version: '12.x'      - name: Install dependencies        run: npm install      - name: Build        run: npm run build      - name: Archive build        if: success()        uses: actions/upload-artifact@v1        with:          name: deploy_dist          path: dist  deploy:    runs-on: ubuntu-latest    needs: build    name: Deploying to surge    steps:      - uses: actions/checkout@v2      - name: Download build        uses: actions/download-artifact@v1        with:          name: deploy_dist      - name: Install surge and fire deployment        uses: actions/setup-node@v1        with:          node-version: '12.x'      - run: npm install -g surge      - run: surge ./deploy_dist/projectname ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}