DEV Community

Cover image for Deploying my React app to Netlify
Ellaine Tolentino
Ellaine Tolentino

Posted on

Deploying my React app to Netlify

I stumbled upon a quick way to deploy a React app to Netlify! This might not be new but someone that's a code newbie like me might find this helpful!

I originally have this project as an HTML/CSS practice app of mine that is currently hosted/deployed on Firebase. I was trying to experiment if I can deploy this to Netlify while also building a react version on the same repo. I probably could've googled the answer to that but I thought, heck, if it doesn't work out, at least I tried and probably will google then.

So from my current directory, I created a react app and followed these steps:

Follow steps line by line
* npm install -g create-react-app
* create-react-app [app name]
* cd [app name]
* npm run build. <-- * the generated build file will automatically be on .gitignore (so if you link your github for auto-deploy, it won't link it properly).*
* I suggest commit your work and push to the branch you want to deploy
* npm install netlify-cli -g <-- can be skipped if you want to process deployment via the link below
* netlify deploy <-- click here for the next steps if you chose to go with the CLI route.

OR

Utilize this guided way by Netlify. Click here(This is a free resource from Netlify Support but I do prefer using the CLI to see what is going on behind the scenes.)

NETLIFY DEPLOY THRU CLI

So at this step, you should be prompted with options in tailoring your deployment. It was just literally two lines of commands and I did mines like this;

CLI Prompt( And yes I named my mock react app as please-deploy haha - so much trial and error that I just had to.)

Updating your work on manual deployment?

If you did the steps above with me and didn't link your GitHub on the deployment, that means we're currently on manual deployment for our React app. To double-check, you can look at your 'Deploys' tab on Netlify and click the app we just deployed, and you will see that we don't have a Github repo linked;

Netlify page

While on continuous deployment, you will see what Github link you connected;
Continuous Deploy

If you prefer manual deploys(GitHub disconnected from Netlify) over continuous deployment(means every git push will launch deploy automatically), you would have to run

  • npm run build <-- updating your build file
  • netlify deploy <-- to push up updated build to be deployed

You would have to run these commands each time you want to update your deployment. Since your build file is on .gitignore, linking your repo on Netlify would not deploy it properly unless you remove/comment-out "/build" on .gitignore and push it to your main/master branch.

TADA! And that's all there is to it! Check out my deployed react app if you like! It's bare right now but I added a few things to check if it's working.

WILL-IT-DEPLOY-APP

Let me know if I missed anything or if you've tried these steps too! Until the next one!

References:
--> A shorter version of the deployment instruction is here written by Brian Douglas & David Wells
--> Looking for more towards continuous deploy? Gene Campbell III wrote a blog about it!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Imagine monitoring actually built for developers

Billboard image

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring