🤷‍♂️ How to build and deploy angular application to surge using github actions
Tags: devops, angular, beginners, webdev
Published: 2021-10-24 15:02:14

---
title: 🤷‍♂️ How to build and deploy angular application to surge using github actions
published: true
description: Angular build and deploy
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs18v7uisv32dzwikr2j.png
tags: devops, angular,beginners, webdev
series: Angular Journey
---

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
  ```yml
  name : Build and Deploy
  ```
<blockquote>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.</blockquote>

### ✅ 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](https://docs.github.com/en/actions/reference/events-that-trigger-workflows)
  

```yml
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. 

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

```yml
- 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](https://github.com/actions/checkout)

### ✅ Setup Node.js

```yml
- 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](https://github.com/actions/setup-node)

### ✅ Run build
```yml
- 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

```yml
- name: Archive build
  if: success()
  uses: actions/upload-artifact@v1
  with:
    name: deploy_dist
    path: dist
```
<blockquote>if: success() is used to make sure upload artifact only runs if all the previous steps passed</blockquote>

### ✅ Create Deploy Job
```yml
deploy:
  runs-on: ubuntu-latest
  needs: build
  steps:
      - name: Checkout
        uses: actions/checkout@v1
```
<blockquote>needs: build is used to tell GitHub to only execute deploy job when build and test job completed successfully.</blockquote>

### ✅ Download build artifact
```yml
- name: Download build
  uses: actions/download-artifact@v1
  with:
    name: deploy_dist
```

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

### ✅ Deployment
```yml
- 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
```cmd
surge token
```

### ✅ Conclusion
```yml
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 }}
```