🤷‍♂️ 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 Deploy

on:
  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 }}