Steps to deploy React app on Netlify and push later changes

Last updated on 22 Mar. 2024

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

Given below are the steps to deploy a React app on Netlify:

1. In VSCode terminal run:
   1. git init
   2. git add .
   3. git commit -m “first commit”
2. Create public repository on github and then use commands listed on github under “…or push an existing repository from the command line” and execute them in VSCode terminal.
3. In app.netlify.com,
   1. Choose 'Add new site' -> 'Import an existing project'
   2. Then choose Deploy with Github. This should lead to an 'Authorized' message window which disappears on its own later. But sometimes the 'Authorized' window does not appear, at which time one has to retry.
   3. A list of github projects is shown. Choose the github repo created earlier.
   4. In deploy window that is shown, optionally specify sitename and then optionally specify environment variables. Do not quote the value of environment variables.
   5. Click the Deploy button. This will show a deploy in progress window. Sometimes deployment is quick (few minutes) and sometimes it is slow (tens of minutes).
   6. Once deploy is done, the link for the deployed app. is shown.

Notes

1. Setting env. variable example: Use https://crazy-sheath-dress-crab.cyclic.app/api/posts as the value and not 'https://crazy-sheath-dress-crab.cyclic.app/api/posts' as the value of REACT_APP_API_URL env. variable.
2. To change env. variable value: (For the specific site) Site configuration (in left pane) -> Environment variables (in right pane) will list the environment variables. Clicking on a particular env. var shows its values for various deploy contexts. The Options drop-down at far-right has an Edit option to change the value(s).
3. To restart the app to use changed env. vars, click on Deploys in left pane (of main Site page/window). On the far right, towards middle of the page, the 'Trigger deploy' dropdown is shown. Choose Deploy Site from this drop-down to redeploy the app.
4. Deploy sometimes does not provide a proper update in the deploy in progress window. So one has to either refresh the window or try out some other deployment related links.
5. Deployment log details can be seen by clicking buttons in lower part of page having the deploy in progress message.
6. About time taken for deploy: [Support Guide] How long should Netlify builds take?, https://answers.netlify.com/t/support-guide-how-long-should-netlify-builds-take/151
7.  Site Overview shows the link of deployed app.

Given below are the steps to push changes to a React app on Github which is automatically picked up by Netlify and updated app is deployed by Netlify:

1. In VSCode terminal run:
   1. git add .   [It adds only the changed files to staging area.]
   2. git commit -m "[suitable message]"
   3. git push
2. The changes will get pushed to Github repo.
3. Within minutes of Github repo update, Netlify will pick up the changes and start redeploy of the app.

Addl. Info: I followed steps in "deploy a React app on Netlify" section on 12 Mar. 2024 to deploy my blog tutorial React app (src. folder backup on PC: cawv-1405-blog-UI-Refctr) on Netlify (deployed app url and associated Github project). [Note that the authorization of the backend API the deployed app. connects to, has to be temporarily switched off for the React app. to access the API. Otherwise the React app. reports get data error. In a later version, I plan to add login feature to the React app. where I will send user specified login & password to the backend API and so this authorization being temporarily switched off in backend API will not be needed.]

Later, on 13 Mar. 2024, I followed the steps in "push changes to a React app on Github". Within a few minutes (less than 5 minutes for one set of changes/commit), Github updated the repo, Netlify picked up the changes, rebuilt the app. and (re)deployed it. Quite awesome given that I am a free plan user! 

...

How do i suspend the hosting of the website?, https://answers.netlify.com/t/how-do-i-suspend-the-hosting-of-the-website/16135 redirects to: [Support Guide] What’s the easiest way to create a temporary “maintenance page” for my site?, https://answers.netlify.com/t/support-guide-what-s-the-easiest-way-to-create-a-temporary-maintenance-page-for-my-site/338

Limiting bandwidth/traffic to netlify on starter tier plan, https://answers.netlify.com/t/limiting-bandwidth-traffic-to-netlify-on-starter-tier-plan/18163/7