Deploying React tutorial Grocery List app on Netlify

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 .

The tutorial deploys one of its earlier lesson projects which uses local storage and not JSON server (as JSON server usage would not be suitable for deployment). In the video, “11tut” is the name in the project’s package.json file but I could not find the associated project source files in the tutorial source download links. The closest project source files I found were react_json_server-main directory files which seem to be the starter files before modification to use JSON. Its package.json file has the name “09tut”. In my test deployment, I am using this react_json_server-main directory/project files but without the data directory (which has db.json file).

I used the steps in the “Procedure to build tutorial project from its source files” section given in this post earlier, and was able to successfully run the application (Grocery List) from VSCode (terminal) (using npm start).

The project has @testing-library… and web-vitals as installed packages (listed in package.json) but which are not used. Before deployment they have to be uninstalled using npm uninstall name1 name2 …

Did the above and ran app again. It worked correctly.

The tutorial uses command line git and not VSCode to create a local repository upload it to github repository.

https://www.atlassian.com/git/tutorials/setting-up-a-repository

https://www.atlassian.com/git/tutorials/saving-changes

https://www.atlassian.com/git/tutorials/saving-changes/git-commit

The tutorial uses the following commands:

git init // creates a repository within current directory

git add .

git commit -m “first commit” // these two commands (add and commit) do an initial commit

// of the current directory with “first commit” as the commit message.

Next step is to create a repository on github: react_deploy_netlify as public repository.

Then use commands listed on github under “…or push an existing repository from the command line” and execute them in VSCode terminal.

Did the above two steps. It worked as expected.

Next step is to go to app.netlify.com and login using Github login.

When I tried the above, I got this error: “Authentication Error

Authenticating failed due to the following error: Your account has been blocked. Please contact our Support team at https://www.netlify.com/support/?topic=Login/Signup for assistance.”

Sent the support team a message at above link. They asked for a screenshot via email. Did that. Then got a message, “Hello, I was able to verify your account and have activated it accordingly.”

When I tried using Netlify again with Github, this time I got “Authentication Error

Authenticating failed due to the following error: We already have a registered user with this email address. Log in to connect your GitHub account.” Checked on the net with one resolution saying that password reset should be done. Next I used Netlify login screen where I typed in my email id and then the forgot password button. Got a reset password mail with a link using which I reset (or rather set) my password. After that I could login to Netlify using my email id and new password. All this got done within around one and a half hours.

Next, in Netlify, in the tutorial, New site from git is chosen and GitHub is chosen as the Git provider. When I logged in to Netlify, I did not see the “New site from git” button and saw “Import from git” instead. I chose that and then chose Deploy with Github. That led to an authorize window from Github. Okaying that led to a new Netlify window with same contents as earlier! Tried “Import from git” again and then chose Deploy with Github. That led a window with an Authorized message. First time around I closed it thinking I had made the wrong choice. Next time around, I happened to keep the window open for some seconds after which it got replaced with an install prompt window from Netlify. Okayed it. That led to Github authentication. Did that. And then I was shown the list of github projects to choose from (for deploying). Chose react_deploy_netlify from the list.

Now I was shown a settings for deployment window. It was almost the same as shown in tutorial but I was additionally shown Site name field with a message that “The site name determines the default URL for your site. If none is provided, a random site name will be generated for you.” I decided to leave Site name blank and pressed Deploy button. It showed a new window with a deploy in progress message. After few minutes it said success and gave some view deploy button option which I chose. This led to new window with some deploy info and a “Open production deploy” button which I clicked. That opened up the app with url: https://main–stately-sundae-df618f.netlify.app/ [Earlier link seems to be broken now. Instead use: https://stately-sundae-df618f.netlify.app/ ]. An empty grocery list was displayed! Note that it is an https (secure) link.

I was able to open the link and app and use it on Chrome and Edge on PC and on Samsung mobile Chrome. Each has a different grocery list (as it would be coming from the browser local storage) but each browser remembers the grocery list between page close and open (or refresh). Awesome!

This article seems to have most of the steps I followed above, though there is some variation (e.g. it specifies ‘npm run build’ which I did not do): How to Deploy React App on Netlify Using Github?, https://www.geeksforgeeks.org/how-to-deploy-react-app-on-netlify-using-github/ . It does not cover creating a git repo and then pushing it to github. That seems to be covered here (though I did not understand the commands I copy-pasted from github and so don’t know if they are the same that are mentioned here): How to git push an existing project to GitHub, https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/How-to-push-an-existing-project-to-GitHub .