Deploying a React-based application on Google Cloud Platform
Tags: google, gcp, appengine, react
Published: 2020-02-10 13:44:34

---
title: Deploying a React-based application on Google Cloud Platform
published: true
description: How to deploy a front end application on Google Cloud Platform using serverless solutions like Google App Engine
tags: google, gcp, appengine, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/n9lqf6113dref5l2w8mt.jpg
series: Journey to the Cloud
---

# Prerequisites

- Google Cloud Platform account
- [Billing account](https://cloud.google.com/billing/docs/how-to/manage-billing-account)
- Basic knowledge of `Git`

# Introduction

GCP offers a wide range of tools (like App Engine, Cloud Functions, Datastore, etc) that make it easier deploying serverless applications.

In this article, I'll talk about setting up a React application to be deployed on Google Cloud platform using App Engine and about storing my code on Google Cloud Source Repositories.

# Create the React project

First, I create a new React project

```
npx create-react-app looney-tunes
cd looney-tunes
npm start
```

# Create the new project on GCP

Now I setup the project on Google Cloud Platform

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4gt0s43x0393pydw4zne.png)

# Install `gcloud`

I have to install `gcloud CLI` to interact with the project from my machine.

For Mac OS, download the `.tar.gz` file at https://cloud.google.com/sdk/docs/quickstart-macos and extract it. Then run `./google-cloud-sdk/install.sh`.

Once reloaded the terminal, I run `gcloud -v` to check the installation

```
Google Cloud SDK 279.0.0
bq 2.0.53
core 2020.01.31
gsutil 4.47
```

# Init `gcloud`

In the root folder of the React project I run `gcloud init` to initialize the project for GCP. Following the interactive CLI, I can setup the project

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1hzoe5c4z04oadd24b9t.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l1ubtfbpw1f895s42vwb.png)

# Setup the new remote for the repository and push

It's time to create my repository for this initial code. I search `cloud repositories` via the search bar

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agjfhba3bvlbwwak09g6.png)

and then I click `GO TO CLOUD SOURCE REPOSITORIES`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgsq35lmuowbhv6v0kip.png)

Click `Add repository` on the right-top corner. Then select `Create new repository`. Now I choose a name for my repository )project's name) and I select the GCP project

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nx33fp1bbkl3kjeabydt.png)

At this point, make sure `Push code from a local Git repository` is selected. I use the `SSH authentication` to push my code. From the root folder of the React project, I run

```
git remote add google ssh://rossanodan@gmail.com@source.developers.google.com:2022/p/looney-tunes-267812/r/looney-tunes
git push --all google
```

Error. Probably due to the missing API Key. I create a new API Key and I add it to my Cloud Source Repositories https://source.cloud.google.com/user/ssh_keys.

Once done, I run `git push --all google` once again to push my code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z8agiobe73tsmjgvdoeq.png)

# Create the `app.yaml` file

To make Google Cloud Platform able to deploy the project, I add a new file in the root folder of the project: `app.yaml`

```
# Copyright 2017, Google, Inc.
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#    http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
# [START app_yaml]
env: flex
runtime: nodejs
# [END app_yaml]
```

I save and push

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8io24sydzh1serutswhc.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59qwti4xajvhu0oe3qli.png)

# Deploy

Everything is ready! In the root folder of the project, I run `gcloud app deploy`. I select the [region of the project](https://cloud.google.com/compute/docs/regions-zones) (in my case, `europe-west2`)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ktr4qqh0firm1mbuj795.png)

The console prompts the following message

```
Services to deploy:

descriptor:      [/Users/rossanodan/Desktop/Development/looney-tunes/app.yaml]
source:          [/Users/rossanodan/Desktop/Development/looney-tunes]
target project:  [looney-tunes-267812]
target service:  [default]
target version:  [20200210t131032]
target url:      [https://looney-tunes-267812.appspot.com]
```

This is a preview of what is going to be deployed and published. I enter `Y`.

# Conclusion

Once the project is deployed, I run `gcloud app browse` that opens https://looney-tunes-267812.appspot.com/.