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;
( 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;
While on continuous deployment, you will see what Github link you connected;
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!
Top comments (0)