Github Actions: How to deploy a React Application to Netlify

A simple Github Action to use in your repository Github to deploy an application to Netlify

Hi Devs, I’m Daniele Carta and I’m a Frontend Developer with a strong passion for Github.

In this article I want to show you how to use a Github Actions. In the specific, in this article we want to deploy a React Application to Netlify.

First step — Create a Github Actions

Going into a your Github Repository of your application, click the tabs Actions, then click on “Skip this and set up a workflow yoursel”

How to create your first action

Now you can copy/paste this yaml:

Replace the line 29 with your commands but, by default in a CRA the commands is npm run build to create a build folder.

Bonus Point
If you want to trigger manually this Github Action, replace the line 3 with this: on: workflow_dispatch

Second step — Create the secrets

Before to run our new Github Action, we need to create a new secrets into the Github account. So, enter again in your repository and click in the tabs “Settings”.

In the left menu click “Secrets” and now add two new secrets:

• NETLIFY_AUTH_TOKEN — with a new token generated from Netlify
• NETLIFY_SITE_ID — the app id of your application on Netlify

Last step — Try your Github Actions

So, now you can try your Github Action.

Go to:
- Repository
- Tab Actions
- Select the workflow
- Click run workflow (if you have setted on workflow_dispatch)

How to launch manually the workflow

Thanks for reading the article, I hope it was useful for you!

Please visit (add a star 🔥) the repository where you find the yml: https://github.com/crtdaniele/react-personal-site

Follow me on LinkedIn: https://www.linkedin.com/in/daniele-carta-milano