Posted on Dec 3, 2021

Deploy a React app to netlify using GitHub Actions

#actionshackathon21 #javascript #githubactions #netlify

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