Skip to main content

How To Deploy An Angular Application To GitHub Pages Using Actions

 



  • In this article i will explain How to deploy an Angular Application to GitHub Pages using GitHub Actions. GitHub Actions make it easy to automate all your software workflows, now with world-class CD/CD. Using GitHub Actions we can Build, test and deploy our code directly from GitHub.

    GitHub Pages  is a feature in GitHub that allows you to host a static website or web application for free. Most of the companies & organizations using GitHub Pages as their Documentation site.

    If you are developing an Angular Application for GitHub Pages you need to build the Application for the production ready. Whenever we made some changes to the application we have to repeat the build process every time. By using GitHub Actions we can make the CI/CD process automated.

    To learn more about GitHub Actions : https://github.com/features/actions



    STEP 01 : 

    Code your Angular Application.

    STEP 02 : 

    In order to set up workflow, it is necessary to set up a secret key for the workflow. Its protect your workflow trigger accessing by outsiders. There for you need to create a GitHub Token.

    1. First Login to https://github.com
    3. Now navigate to the Developer Settings
    4. Click on the Personal Access Tokens.
    5. Generate New Token.

    Now you have got access token. Store it somewhere..

    STEP 03 : 

    Now its time to create the Secret Key in your Repository. 

    1. Go to your repository Settings.
    2. Click on Secrets
    3. Click on Add New Secret
    4. Put ACCESS_TOKEN as name and paste the GitHub Token that you got in the previous step. 
    5. Now Click Add Secret Button. 


    Now A Secret Key named ACCESS_TOKEN has been added to your repository.



    STEP 04 : 


    Now comes the main part. Go to your repository and navigate to Actions tab & Setup New Workflow. Now modify the workflow file as shown below.


    name: CI/CD
    on: [push]
    jobs:
    build:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 8.15.1
    uses: actions/setup-node@v1
    with:
    node-version: 8.15.1
    - name: Build and Deploy
    uses: JamesIves/github-pages-deploy-action@releases/v2
    env:
    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
    BASE_BRANCH: development
    BRANCH: master
    FOLDER: dist/github-community-sl
    BUILD_SCRIPT: npm install && npm run build -- --prod
    view rawmain.yml hosted with ❤ by GitHub

    Angular provides a CLI tool called gh-pages to deploy the angular application to GitHub Pages. Here i prefer an CI/CD Automation to build and deploy Angular Application to GitHub Pages. Check it Here : https://github.com/JamesIves/github-pages-deploy-action

    Here i selected development branch as Base Branch. Because for the Organization GitHub pages we can not be able to choose which branch to deploy. By Default its on master branch. So here i do the developing process in the development branch. When i made any changes and pushed it will build the application to master branch and then deploys it to GitHub Pages. 

    BASE BRANCH - Branch which contains your Angular Application.
    BRANCH - Where is build and render the applications.
    FOLDER - App compiled directory.



    That's all. 

    Whenever you commit new changes to the development branch the build process will start automatically and deploys it to the GitHub pages. You can check the build process by navigating to the Actions tab. Changes will be live within a few seconds. You can check the below repo url where used Actions to build the Angular Application

    • Comments

    Post a Comment

    Popular posts from this blog

    How to use Ngx-Charts in Angular ?

    Charts helps us to visualize large amount of data in an easy to understand and interactive way. This helps businesses to grow more by taking important decisions from the data. For example, e-commerce can have charts or reports for product sales, with various categories like product type, year, etc. In angular, we have various charting libraries to create charts.  Ngx-charts  is one of them. Check out the list of  best angular chart libraries .  In this article, we will see data visualization with ngx-charts and how to use ngx-charts in angular application ? We will see, How to install ngx-charts in angular ? Create a vertical bar chart Create a pie chart, advanced pie chart and pie chart grid Introduction ngx-charts  is an open-source and declarative charting framework for angular2+. It is maintained by  Swimlane . It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functio...
    Post a Comment
    Read more

    Understand Angular’s forRoot and forChild

      forRoot   /   forChild   is a pattern for singleton services that most of us know from routing. Routing is actually the main use case for it and as it is not commonly used outside of it, I wouldn’t be surprised if most Angular developers haven’t given it a second thought. However, as the official Angular documentation puts it: “Understanding how  forRoot()  works to make sure a service is a singleton will inform your development at a deeper level.” So let’s go. Providers & Injectors Angular comes with a dependency injection (DI) mechanism. When a component depends on a service, you don’t manually create an instance of the service. You  inject  the service and the dependency injection system takes care of providing an instance. import { Component, OnInit } from '@angular/core'; import { TestService } from 'src/app/services/test.service'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.compon...
    Post a Comment
    Read more

    How to solve Puppeteer TimeoutError: Navigation timeout of 30000 ms exceeded

    During the automation of multiple tasks on my job and personal projects, i decided to move on  Puppeteer  instead of the old school PhantomJS. One of the most usual problems with pages that contain a lot of content, because of the ads, images etc. is the load time, an exception is thrown (specifically the TimeoutError) after a page takes more than 30000ms (30 seconds) to load totally. To solve this problem, you will have 2 options, either to increase this timeout in the configuration or remove it at all. Personally, i prefer to remove the limit as i know that the pages that i work with will end up loading someday. In this article, i'll explain you briefly 2 ways to bypass this limitation. A. Globally on the tab The option that i prefer, as i browse multiple pages in the same tab, is to remove the timeout limit on the tab that i use to browse. For example, to remove the limit you should add: await page . setDefaultNavigationTimeout ( 0 ) ;  COPY SNIPPET The setDefaultNav...
    Post a Comment
    Read more