Giter VIP home page Giter VIP logo

github-actions-custom-actions's Introduction

github-actions-custom-actions

visual

Tools Used:

  • Composite Actions For simple combinations of different jobs, with inputs and outputs for dynamic responses
  • Javascript Actions For custom actions that run scripts in combination with a .js file
  • Docker Actions For cutom actions that need scripts run in a non-javascript language and for more control over enviornment
  • AWS-S3 For static website hosting
Screenshot 2023-11-03 at 12 51 46 PM

Custom Composite Action:

The first action I assigned is a composite action. This composite action checks whether caching needs to be performed, then uses a Github custom action to download, install, and then cache dependencies with "actions/cache@v3". The install step is only run if we fail our cache-hit or we specify with an input to specifically not use cache:

if: steps.cache.outputs.cache-hit != 'true' || inputs.caching != 'true'

echo "cache='${{ inputs.caching }}'" >> $GITHUB_OUTPUT

This line adds an ouput that is used lated in our "deploy.yml":

- name: Load & cache dependencies
      id: cache-deps
      uses: ./.github/actions/cached-deps
      with:
        caching: "false" #disables cache for this step
    - name: Output information
      run: echo "Cache used? ${{steps.cache-deps.outputs.used-cache}}"
Screenshot 2023-11-04 at 4 45 36 PM

Caching will only be attempted if it was attempted previously OR a step has specified with a input "caching=false"

By default, if not specified, we attempt to use cached dependencies if they are available. We check an output from the "Install dependencies" step by referencing the "install" id, and print whether cache was used as a log for the step. The output is assigned from the cache step in line

This is where this custom action is used in the main workflow:

Screenshot 2023-11-04 at 4 44 18 PM

Next we run a test step. It gathers the required files and then uses a built in npm testing library to run a test.jsx file that tests for the presence of a button as well as the popup component of the button.

Screenshot 2023-11-04 at 5 26 59 PM

Custom Javascript Action:

For our website deployment, I use a javascript custom action. I define input parameters, with "bucket" and "dist-folder" being required, and "bucket-region" defaulting to 'us-east-1', which are passed in from the "deploy.yml" if they are set as "required: true". These will be used during the execution of the "main.js" file.

Screenshot 2023-11-04 at 5 33 19 PM

"main.js" Uses built-in Github commands through the "require()" function passing in Github custom actions "@actions/core" and "@actions/exec". We can use that "core" object to connect to AWS and pass in our inputs, and upload our static webpage to AWS.

Screenshot 2023-11-04 at 5 35 42 PM

We add an "output" to action.yml

outputs:
  website-url:
    description: 'The URL of the deployed website.'

and then set that output in "main.js"

 const websiteUrl = `http://${bucket}.s3-website-${bucketRegion}.amazonaws.com`
  core.setOutput('website-url',websiteUrl) // ::set

and that results in our URL being added to our actions logs:

Screenshot 2023-11-06 at 11 13 25 AM

Custom Javascript Action:

Key difference is that we are going to use a docker image based on a Dockerfile. This is so we can execute in a language of our choice. I chose Python.

Screenshot 2023-11-06 at 12 15 43 PM

All our docker file does is copy the requirements.txt and deployment.py, install the dependencies, then call the python function, which performs the exact same as main.js but in Python.

Screenshot 2023-11-06 at 12 16 44 PM

And here's the python file:

Screenshot 2023-11-06 at 12 18 20 PM

We change the deploy step to use our new docker action:

Screenshot 2023-11-06 at 12 15 00 PM

Finally, we can see the results of our change, we can see our job is now running on a Docker image.

Screenshot 2023-11-06 at 12 20 21 PM

And we get the same result as before:

Screenshot 2023-11-06 at 12 10 36 PM

github-actions-custom-actions's People

Contributors

mfkimbell avatar

Stargazers

 avatar

Watchers

 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.