This content originally appeared on DEV Community and was authored by Sandeep Balachandran
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 }}
This content originally appeared on DEV Community and was authored by Sandeep Balachandran
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Sandeep Balachandran | Sciencx (2021-10-24T15:02:14+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/
" » 🤷♂️ 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/
HARVARDSandeep Balachandran | Sciencx Sunday October 24, 2021 » 🤷♂️ How to build and deploy angular application to surge using github actions., viewed ,<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/>
VANCOUVERSandeep Balachandran | Sciencx - » 🤷♂️ How to build and deploy angular application to surge using github actions. [Internet]. [Accessed ]. 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 . 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: ]
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/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.