Deploy React apps to Netlify in a neater reapportion.

Rachel — Fri, 03 Dec 2021 18:39:03 +0000

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

Additional Resources / Info

Github repository

Under MIT License

Happy coding ^ ^

DEV Community: Rachel

Deploy React apps to Netlify in a neater reapportion.

My Workflow

Submission Category:

Yaml File or Link to Code

Additional Resources / Info