Deploy a React app to netlify using GitHub Actions
Tags: actionshackathon21, javascript, githubactions, netlify
Published: 2021-12-03 13:53:35


This guide takes you through how to deploy a react app using the GitHub actions.


### My Workflow

1. Create a react app project with the following command:
`npx create-react-app my-app`.

2. Run `npm run build` to generate a build folder which will be use in netlify.

3. Create the app repository in GitHub.

4. Create a `netlify.toml` file locally in the project directory and paste the following:
`[build]
command = "npm run build"
publish = "build"`.

5. Push the local changes to your repository.

6. In your project repository, go to actions and setup the Node.js workflow, which will generate a yaml file. You have to copy/paste the workflow which you can be found in the screenshot provided below in this article in the yaml file.

7. Login to your netlify account and create a new site, you will have to drag/drop the build folder generated before in step 2.

8. Generate a personal access token in the user settings.

![Personal token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntji0v8sxu4osbf4kmpo.png)

9. Copy the personal token & API ID, found in site settings in netlify, in secrets in the project settings.

![Netlify API ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icg3geyhyes9bwwcakm0.png)

10. Replace the tokens in the yaml file with your tokens from the secrets.

![Github secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxqx5zjgzqy1hh6co5cn.png)
```
- name: Netlify Deploy

      env:
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      run: netlify deploy --prod

```


### 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**. 


### Yaml File or Link to Code

[Github link repo](https://github.com/ktscates/test-pipeline)

```
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Netlify workflow

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
        
    - run: npm i
    
    - run: npm run build --if-present
    
    - name: Run the tests and generate coverage report
      run: npm test -- --coverage
      
    - name: Codecov
      uses: codecov/codecov-action@v2.1.0
      
    - name: Netlify Deploy
      # uses: jsmrcaga/action-netlify-deploy@v1.7.1

      env:
        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      run: netlify deploy --prod

```


### Additional Resources / Info

https://github.com/marketplace/actions/netlify-actions