Deploy a React app to netlify using GitHub Actions

Cates NSENGIYUMVA — Fri, 03 Dec 2021 13:53:35 +0000

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

My Workflow

Create a react app project with the following command:
npx create-react-app my-app.
Run npm run build to generate a build folder which will be use in netlify.
Create the app repository in GitHub.
Create a netlify.toml file locally in the project directory and paste the following:
[build] command = "npm run build" publish = "build".
Push the local changes to your repository.
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.
Login to your netlify account and create a new site, you will have to drag/drop the build folder generated before in step 2.
Generate a personal access token in the user settings.

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

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

- 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 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

Additional Resources / Info

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

Forem: Cates NSENGIYUMVA

Deploy a React app to netlify using GitHub Actions

My Workflow

Submission Category:

Yaml File or Link to Code

Additional Resources / Info