Git Product home page Git Product logo

angular-deploy-gh-pages-actions's Introduction

๐Ÿš€ Angular Deploy gh-pages Actions

build-test View Action Version

This GitHub action will handle the deploy process of your angular application to GitHub Pages. You can configure what folder will be deployed once the build is created. Also, you can specify which branch to deploy to.

image

Getting Started ๐Ÿ’ช

You can include the action in your workflow to trigger on any event that GitHub actions supports. If the remote branch that you wish to deploy to doesn't already exist the action will create it for you. Your workflow will also need to include the actions/checkout step before this workflow runs in order for the deployment to work.

You can view an example of this below.

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: All things angular
      uses: AhsanAyaz/angular-deploy-gh-pages-actions@[version] ## replace by latest version without it you will see Expected format {org}/{repo}[/path]@ref. Actual 'AhsanAyaz/angular-deploy-gh-pages-actions',Input string was not in a correct format.
      with:
        github_access_token: ${{ secrets.ACCESS_TOKEN }} # see the Configuration section for how you can create secrets
        build_configuration: staging # The build environment for the app. please look configurations in your angular.json
        base_href: /my-project/   # make sure this corresponds to https://<your_username>.github.io/<base_href>/
        deploy_branch: gh-pages # The branch the action should deploy to.
        angular_dist_build_folder: dist/my-project # The folder where your project is supposed to be after running ng build by the action.

If you'd like to make it so the workflow only triggers on push events to specific branches then you can modify the on section.

Configuration โš™๏ธ

You have to configure the with portion of your workflow file so that the action works fine. See the usage of with in the example above. Fir the Github secret (ACCESS_TOKEN) or anything added later, secrets must be referenced using the bracket syntax and stored in the GitHub repositories Settings/Secrets menu. You can learn more about setting environment variables with GitHub actions here.

Key Value Information Type Required Default
angular_project_dir The directory of the angular project, in which all the commands will run. This is super handy when you have several projects within a workspace. Or have a demo angular project within a library. Defaults to current workspace directory with Yes "./"
build_configuration You can provide the configuration using which the action should create the build. If nothing is provided, it will run ng build --prod by default. See your angular.json file for configurations. with Yes "production"
base_href Since gh-pages will deploy the app for https://yourgithubusername.github.io/repositoryname/, you need to provide this base-href in order to have your project working correctly, since the base-href won't be '/' in this case. Note to use with @angular/cli@^10.0.0 (Angular version 10), you need the specify the base-href in the angular.json file and then use an empty string as parameter base_href: '' # empty string to support optional base-href to make the parameter optional. with No "/"
deploy_branch The branch to which we'll deploy the build folder. with No "gh-pages"
angular_dist_build_folder The folder in which ng build provides its output for your project. The folder where your index.html resides in. Also, this is the folder which will be deployed to the deploy_branch. with No "dist"
run_lint Runs the ng lint command behind the scenes to make sure the files are linted properly. with No "false"
github_access_token Depending on the repository permissions you may need to provide the action with a GitHub personal access token instead of the provided GitHub token in order to deploy. You can learn more about how to generate one here. This should be stored as a secret. secrets / with Yes

Contributing :person:

Install the dependencies

$ npm install

Build the typescript and package it for distribution

$ npm run build && npm run pack

Run the tests โœ”๏ธ

$ npm test
  PASS  __tests__/main.test.ts
    โœ“ test does not run lint if run_lint is falsy (3ms)
    โœ“ test runs lint if run_lint is not falsy (1ms)
    โœ“ test throws error for deployment if accessToken is not provided (17ms)
    โœ“ test runs fine for deployment if all inputs are correct (1ms)
    โœ“ test runs createBuild with provided values  (1ms)
    โœ“ test runs createBuild with default values if they are not explicitly provided

...

See the versioning documentation

LICENSE ๐Ÿ“‹

Licensed under the MIT License (the "License");

angular-deploy-gh-pages-actions's People

Contributors

ahsanayaz avatar dearrudam avatar dependabot[bot] avatar sabman avatar samuelnygaard avatar yacafx avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.