Trigger Netlify Deployments Using Github Workflow  (CI/CD)
Tags: actionshackathon21, netlify, opensource, github
Published: 2021-12-03 18:04:48

**Submission category**
This is my submission to [GitHub Actions Hackathon](https://dev.to/devteam/join-us-for-the-2021-github-actions-hackathon-on-dev-4hn4) **under DIY Deployments.**


**[My github Repository](https://github.com/Thiernope/gihub-workflows-netlify)**

Have you wondered how you can deploy your react app on netlify as quickly as possible? [Github Actions](https://github.com/features/actions) makes it easy and facilitates quick deployments using github workflow. In this post, I am going to show you how to trigger automatic deployments to netlify using github workflow.


- Create a simple react app using `npx create-react-app`
- Run `npm run build` in your terminal. This will create your build folder in the root directory. Netlify allows to drag and drop a build folder in the drop area as you can see it on the image below. Fill free to use this option.
Go login in to netlify **netlify > sites** you will see where to drop this build folder. Once dropped, the site will go live in a few seconds. 


![Dropping](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uhcbqfvlelavhkkg6qz.png)


Netlify can also give access to deploy using netlify-cli via your terminal. You can 
 [Refer to this resource](https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/).


- Connect your local repository to a github repostitory(remote), and [refer to this guide](https://docs.cloudera.com/machine-learning/1.2/projects/topics/ml-linking-an-existing-project-to-a-git-remote.html). Then you will have a remote repository and then be able to add actions. 

- Then, it's time to set github workflow on your repository. To do it, go to **github > actions** and add a github workflow. There are many templates they provide. But in this article, I am going to use Node.js.




![Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac4ltkud3hb7mr6gr7s0.PNG)

Once you have chosen NodeJs, you will be given the template below.


![Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msyu5i10n12rh14umst8.PNG)

Fill free to edit the template with the following edits.

```
name: CI/CD

on:
  push:
    branches: [ develop ]
  pull_request:
    branches: [ develop ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test 

    - name: Build
      run: npm run build
```
Then, click to start a commit and commit the new file. Your gitworkflow will run successfully.


- Now it's time to deploy to netlify:

To deploy to netlify, we need 2 thigs:

- Our Netlify site_ID 
- Netlify personal-Access token

To find the site_ID, go to your already deployed app > **Site overview > site settings > General** then, copy that site_ID





![Site_ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw3kpb6fkfwkfmz8dnw1.png)

To find Netlify pesonal access token, click your profile picture, go to **user setting > application **. Generate a token and copy as you will need it later. 



![Personal access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1n06un8d0m3fj4e6y3v.PNG)

After you have copied both Site_ID, and netlify personal access token, It's time to go on github and put in the repository secrets. Go to **github > settings > secrets** and click **add new secret.** Then add netlfy site ID and Personal access token. 


![secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1k7nv1cxe6u34r9eks7a.PNG)

- After adding the secrets on github, Lets then add this step of deploying our site to netlify in our **Node.js.yml** file

```
- name: Deploy Site
      env:
        NETLIFY_SITE_ID: ${{ secrets.NETLFY_APP_ID }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_ACCESS_TOKEN }}
      run: netlify deploy --prod
```
Make sure you replace `${{secrests.The name of the secret you put on your github}}`


The final github workflow will look like:

**Final YML file**

```
name: CI/CD

on:
  push:
    branches: [ develop ]
  pull_request:
    branches: [ develop ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test 

    - name: Build
      run: npm run build
    - name: Deploy Site
      env:
        NETLIFY_SITE_ID: ${{ secrets.NETLFY_APP_ID }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_ACCESS_TOKEN }}
      run: netlify deploy --prod
```


- After all your github workflow is set well, go in your root folder of your react app and add `netlify.toml` file and add this code.

```
[build]
command = "npm run build"
publish = "build"
```
You may also put additional staffs like redirects rules in `netlify.toml` especially when your react is built with react-router dom. Or Go to publish folder and create a new file `_redirects` and write the code below: 

`/* /indext.html 200`


After setting the above workflow, and make sure you have the above `netlify.toml` file, your application will automatically be deployed to netlify in such less amount of time as that time your workflow will take you to be complete. 





Happy Coding **^_^**