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

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

Print Share Comment Cite Upload Translate
APA
Sandeep Balachandran | Sciencx (2024-03-29T11:13:48+00:00) » 🤷‍♂️ How to build and deploy angular application to surge using github actions. Retrieved from https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/.
MLA
" » 🤷‍♂️ How to build and deploy angular application to surge using github actions." Sandeep Balachandran | Sciencx - Sunday October 24, 2021, https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/
HARVARD
Sandeep Balachandran | Sciencx Sunday October 24, 2021 » 🤷‍♂️ How to build and deploy angular application to surge using github actions., viewed 2024-03-29T11:13:48+00:00,<https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/>
VANCOUVER
Sandeep Balachandran | Sciencx - » 🤷‍♂️ How to build and deploy angular application to surge using github actions. [Internet]. [Accessed 2024-03-29T11:13:48+00:00]. Available from: https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/
CHICAGO
" » 🤷‍♂️ How to build and deploy angular application to surge using github actions." Sandeep Balachandran | Sciencx - Accessed 2024-03-29T11:13:48+00:00. https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/
IEEE
" » 🤷‍♂️ How to build and deploy angular application to surge using github actions." Sandeep Balachandran | Sciencx [Online]. Available: https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/. [Accessed: 2024-03-29T11:13:48+00:00]
rf:citation
» 🤷‍♂️ How to build and deploy angular application to surge using github actions | Sandeep Balachandran | Sciencx | https://www.scien.cx/2021/10/24/%f0%9f%a4%b7%e2%80%8d%e2%99%82%ef%b8%8f-how-to-build-and-deploy-angular-application-to-surge-using-github-actions/ | 2024-03-29T11:13:48+00:00
https://github.com/addpipe/simple-recorderjs-demo