CI CD Build with GIthub Actions, Host on Netlify - Solutions-Needed/solutions-needed GitHub Wiki

A workflow is known as several instructions that get executed by themselves once the programmer run a specific command, meaning the programmer can run all test and configurations to save correctly a code, only by typing one terminal command.

Github actions is a tool offered by default to all repositories located in Github, and allows you to create workflows within the repositories for them to be executed automatically once you push data into the repo. This tools helps you creating a CI/CD environment.

In this particular case, we will set up a worklow in Github actions that will run every time we push some code into the dev branch, more specifically, it will update the information in the host of our project, Netlify.

The first thing we have to do is create copy folders of the branches of our project (your react folders) in Netlify, using the drag and drop tools at the bottom list of Netlify, we create it this way so it maintains (at least for now) disconnected from git. After that, we should create a NETLIFY_AUTH_TOKEN (go to User settings > applications > New acces token), and after that save that token in your Github repo, in the Secrets section, and NETLIFY_SITE_ID (Settings > Site Information > APP ID), be sure to save them with the same name. After that its time to create your .yml workflow document in the Github repo for the dev branch, something like this:

name: Development workflow

on:
  push:
    branches:
      - dev

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
      - uses: actions/checkout@v1
      
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npm install
      - run: npm run build --if-present

      - name: Deploy to netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.DEV_NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=build --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]' 

We can also set the workflow so it run test again before pushing the code to the host, as an additional quality measure. And that's pretty much it! We have succesfully created a basic workflow with Github Actions and Netlify.


Rerences and further info:
https://medium.com/@MarekPukaj/build-with-github-actions-host-on-netlify-ebf5fa505616
https://docs.github.com/en/free-pro-team@latest/actions/learn-github-actions
https://dev.to/curtiscodes/ci-cd-pipeline-with-netlify-and-github-actions-bcm
https://github.com/netlify/actions/tree/master/cli