Deploy React apps to Netlify in a neater reapportion.

My Workflow

Have everything run and built from the get-go on github by github actions whenever you push a commit and enjoy a smooth deployment on Netlify.

With the previous in mind follow these steps:

Create your react project as usual npx create-react-app app_name.

Build using npm run build

Then go ahead and set your workflow, to generate a .yml file.

Create a netlify.toml file and then add the following code:

[build]
command = "npm run build"
publish = "build"

Drag and drop your build folder into your netlify site.

Generate a personal access token on netlify by going in user settings, applications and copy it to github secret.

Copy Api ID from netlify site to github secrets.

Create yaml file & add the tokens from secrets.

Add netlify deploy -–prod to yaml file

Submission Category:

DIY Deployments.

Yaml File or Link to Code

Add the .yml file as follows .github/workflows/name.yml in the project. For more reference see the official docs

name: CI/CD

on:
  push:
    branches: [ your_branch_name ]
  pull_request:
    branches: [ your_branch_name ]


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.GITHUB_TOKEN_NAME }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN_NAME }}
      run: netlify deploy --prod