DEV Community

Cover image for 🤷‍♂️ How to build and deploy angular application to surge using github actions
Sandeep Balachandran
Sandeep Balachandran

Posted on

🤷‍♂️ 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
Enter fullscreen mode Exit fullscreen mode
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'
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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'
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

✅ 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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

✅ Install surge

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

✅ Deployment

- run: surge ./deploy_dist/projectname ${{ secrets.SURGE_DOMAIN }} --token ${{ secrets.SURGE_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

✅ 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 }}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)