Using ReactJS and the Google Cloud Platform, we are developing a Cloud To-Do app. You can increase your productivity and remember goals by using this to-do app. Since Firestore stores the to-do list, you may access it online from any device. We authenticate users to access your To-Do list using OAuth 2.0 for security and convenience.

Steps - 

  1. Create a new project in Google Cloud.
  2. Open Terminal and run -
    git clone
  3. Open Cloud Shell Editor and Expand Cloud To Do
  4. Replace cliendId in /index.js which you can get from OAuth Cloud Console API
  5. Replace firebaseConfig in src/firebase.js with your config which you can get from creating a new project (When typing Project Name, your existing Google Cloud Project will auto appear. Use that to manage things in one place) in Firebase Console
  6. Open Cloud Shell Terminal and run -
    cd cloud-todo/
    yarn install
    yarn start
    (Optional - To Make and Test Local Changes inside GCP)
  7. Deploy -
    gcloud builds submit --tag${PROJECT_ID}/cloud-todo
    gcloud run deploy --image${PROJECT_ID}/cloud-todo --allow-unauthenticated --region=${REGION} --platform=managed

  8. Copy the URL, Click on Edit Icon in Credentials Page under OAuth 2.0 Client IDs and paste the URL in Authorized JavaScript origins and Authorized redirect URI 
  9. Test - (
(If you just want to host React JS on Google Cloud then refer to 5:57 [Clone this repo - and copy the Docker file] and 22:20 for steps.)

For In-Depth Steps with Images - Read on Google Cloud Medium

Join for Such Live Coding Session on Google Cloud -

Join Code Saadhna Season 4 (Generative AI) -

*This is an edited recording for Code Saadhna Season 4 held on 28 October 2023 at 8:00PM IST. 

Post a Comment

أحدث أقدم