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

#devops #angular #beginners #webdev

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

Top comments (0)