DEV Community

Cover image for Deploy a React app to netlify using GitHub Actions
Cates NSENGIYUMVA
Cates NSENGIYUMVA

Posted on

Deploy a React app to netlify using GitHub Actions

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

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

Netlify API ID

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

Github secrets

- name: Netlify Deploy

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

Enter fullscreen mode Exit fullscreen mode

Submission Category:

This is my submission to GitHub Actions Hackathon under DIY Deployments.

Yaml File or Link to Code

Github link repo

# 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

Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

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

Discussion (2)

Collapse
andrewbaisden profile image
Andrew Baisden

Good guide easy to follow.

Collapse
ktscates profile image
Cates NSENGIYUMVA Author

Thanks, I hope it helped.