Step-by-Step Guide: How to Deploy a React App on Google Cloud Platform

Deploying a React application on Google Cloud Platform (GCP) is a powerful way to host your web app. In this guide, we will walk you through the steps required to get your React app up and running on GCP. By the end of this tutorial, you will have a live React application hosted on Google Cloud.

Prerequisites

Before we begin, make sure you have the following installed on your local machine:

• Node.js and npm
• Git
• Google Cloud SDK

Step 1: Create a React App

If you don't already have a React app, you can create one using the following command:

npx create-react-app my-react-app
cd my-react-app

This will create a new React application in a directory called my-react-app.

Step 2: Initialize a Git Repository

Navigate to your React app directory and initialize a Git repository:

git init
git add .
git commit -m "Initial commit"

Step 3: Set Up Google Cloud Project

Log in to your Google Cloud account and create a new project. Note the project ID, as you will need it later. Enable the "App Engine" API for your project.

Step 4: Install Google Cloud SDK

If you haven't already, install the Google Cloud SDK on your local machine. Follow the instructions on the Google Cloud SDK installation page.

Step 5: Authenticate with Google Cloud

Authenticate your Google Cloud SDK with your Google account:

gcloud auth login

Set the project ID for your Google Cloud project:

gcloud config set project YOUR_PROJECT_ID

Replace YOUR_PROJECT_ID with your actual project ID.

Step 6: Create app.yaml File

Create an app.yaml file in the root of your project directory. This file tells Google Cloud how to run your application. Add the following content to the app.yaml file:

runtime: nodejs14
handlers:
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
  - url: /(.*)
    static_files: build/\1
    upload: build/(.*)

Step 7: Build Your React App

Build your React app for production:

npm run build

This will create a build directory with the production build of your app.

Step 8: Deploy to Google Cloud

Deploy your React app to Google Cloud using the following command:

gcloud app deploy

Follow the prompts to complete the deployment. Once the deployment is complete, you will see a message indicating that your app is live.

Step 9: Open Your App

You can open your deployed React app in your browser using the following command:

gcloud app browse

This will open your app's URL in your default web browser.

Conclusion

Congratulations! You have successfully deployed your React app on Google Cloud Platform. In this guide, we covered the steps to create a React app, initialize a Git repository, set up a Google Cloud project, install the Google Cloud SDK, authenticate with Google Cloud, create an app.yaml file, build your React app, and deploy your app to Google Cloud. Now you can share your live React application with the world.

If you encounter any issues or have any questions, feel free to refer to the Google Cloud documentation or the React documentation. Happy coding!