How to deploy React application to Google Cloud (App Engine)?
Published: 2022-08-10 14:52:27

You might have created several react applications in a local machine and accessed them by running `npm start`. Have you ever wondered how to deploy it and host it somewhere? In this article, we will see how to deploy a react app created using [create react app](https://reactjs.org/docs/create-a-new-react-app.html) to [Google Cloud App Engine](https://cloud.google.com/appengine).

## Creating the react app

If you already have an existing app, please skip to the [next section](#creating-the-appyaml-file).

Run the following command to create a new react app:

```
npx create-react-app react-gcp-app-engine
```

## Creating the app.yaml file

Google Cloud requires you to have an `app.yaml` file in the root directory of the project, which tells it how to deploy your application. Create a file named `app.yaml` inside the root directory of your project with the following content:

```yaml
runtime: nodejs16
handlers:
  # Serve all static files with url ending with a file extension
  - url: /(.*\..+)$
    static_files: build/\1
    upload: build/(.*\..+)$
  # Catch all handler to index.html
  - url: /.*
    static_files: build/index.html
    upload: build/index.html
```

The above file tells Google Cloud to upload all the contents inside the build folder and point any incoming request at the root to `build/index.html`.

## Creating new Project in Google Console

If you haven't signed up for Google Cloud, you can do so by navigating to [http://console.cloud.google.com/](http://console.cloud.google.com/).

Once you have signed up for Google Cloud, navigate to the [Cloud Console Dashboard](https://console.cloud.google.com/home/dashboard) and create a new project.

![google cloud create project 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc2rn212t11oefucuny9.png)

Click on **New Project**:

![google cloud create project 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r81ji99dw7j7kew6rovv.png) 

Give a name to your project and click on **Create**:

![google cloud create project 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs7bakagxiahhfosx65k.png) 

It will take some time to create the project. You can view the progress by clicking on the notification icon in the header:

![google cloud create project notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1041lpiu7e49y6ha8ut.png)

Now select the newly created project and open it:

![google cloud select project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjvuejx3kqadw0u43l3y.png) 

## Creating App Engine

Now let's create an App Engine, which will host our application.

Search for 'App Engine' in the search bar and click on App Engine:

![google cloud search app engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epbxhq5e5px4e1slkcuz.png)

Now click on **Create Application**:

![google cloud create app engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn6d9y19eresqq1ygekg.png) 

Choose the region if you want to (choose the one in the country from which the majority of your users come), otherwise leave it as it is. In the Service account dropdown, choose the default one and click on **Next**:

![google cloud create app engine 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaixups5z6vpfw7dvq3f.png)
 

Wait for the application to be created. Once it is completed, a notification will arrive at the header.

## Deploying to Google App Engine

There are 2 ways in which you can deploy to Google Cloud: one using the [Google Cloud SDK](https://cloud.google.com/sdk/docs/quickstart?authuser=1) and another using Google Cloud Shell. We will explore both ways.

### Deploying using Google Cloud SDK

First, install the Google Cloud SDK by running the following Powershell command on Windows:

```shell
(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:Temp\GoogleCloudSDKInstaller.exe")

& $env:Temp\GoogleCloudSDKInstaller.exe

```

If you are using any other operating system, you can find the instructions to install it [here](https://cloud.google.com/sdk/docs/quickstart).

Once the SDK is installed, open the command prompt in Administrator mode, navigate to the project directory, and run the following command:

```bash
gcloud init
```

It would ask you to log in if you are running it for the first time. After logging in, provide the options as shown below:

![gcloud init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgv8nd3qmpj3ebagje6n.png) 

Now build the project using the following command (you can use `yarn build` alternatively):

```bash
npm run build
```

Once the build is completed, run the following deploy command to deploy the build files to Google App Engine:

```bash
gcloud app deploy
```

When asked for confirmation, type `Y`:

![gcloud deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa51t576b7lwpyj2m0wo.png) 

Once the deployment is done, it will print out the URL where it is deployed. You can visit it (https://my-react-app-338316.uc.r.appspot.com) and see if the pages are loading fine.

### Deploying using Google Cloud Shell

An alternative way to deploy without installing Google Cloud SDK locally, is to run the deployment from Google Cloud Shell.

Before proceeding further, make sure that you have pushed your project to a git repository so that we can download it in the Cloud Shell machine.

You can activate Cloud Shell by clicking on the Terminal icon in the header of your Google Console:

![open google cloud shell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2doov66pvrypv0drna2f.png) 

A console will open within the browser. Now clone your repository by running the following command (replace the git URL with yours):

```bash
git clone https://github.com/collegewap/react-gcp-app-engine.git
```

Now navigate to the cloned directory using `cd react-gcp-app-engine/`.

Install all the dependencies by running `npm i`.

Once the dependencies are installed, start building the project using the following command:

```bash
npm run build
```

After the build has finished, run `gcloud app deploy` to deploy your application.

It may ask you to authorize cloud shell, please click on **Authorize**:

![cloud shell authorise](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5zrj1xmutyulehat9vj.png) 

Once the deployment is completed, it will print out the URL where it is deployed and you can access the same.

## Configuring a Custom Domain in Google App Engine

App Engine, by default, will assign a random subdomain like https://my-react-app-338316.uc.r.appspot.com/ to your website. If you want to configure your own domain, you can do so by clicking on **Settings** → **Custom Domain** → **Add a Custom Domain**

![add custom domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7535d2q6hzc6ec500tvf.png) 

You will have to verify your domain and update DNS records in your domain registrar.