Deploy a React App to Google Cloud Platform using App Engine
Tags: react, webdev, devops, tutorial
Published: 2020-02-14 17:38:56

Prerequisites:

- [Node] (https://nodejs.org/en/ "node")
- An activated [Google Cloud Platform account] (https://console.cloud.google.com/ "googleCloudConsole")
- [gcloud CLI] (https://cloud.google.com/sdk/docs/quickstarts "googleCloud")

To get started, use npx to generate a new React app using [create-react-app] (https://reactjs.org/docs/create-a-new-react-app.html "reactjs"):
```
npx create-react-app <app-name>
```
Once npx has generated all the necessary files for your React app, let’s make sure it runs fine by doing:
```
cd <app-name>
npm start
```
In your favorite browser, navigate to http://localhost:3000
You should see a screen similar to this one:

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

Now that your app is up and running, let’s create a production build out of it. To do so, simply run:
```
npm run build
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4c1ekkclgyqhw0ujvwix.png)

At this point, there is nothing left to do from a React perspective. The next step is to configure a new project in the App Engine. Then, all that is left to do is to use the Google Cloud SDK to deploy our freshly built React app to GCP.

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

Here is a series of screenshots that will walk you through how to do the first part: configure a new project in the GCP App Engine.

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

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

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

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

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

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

If you followed the steps successfully, you should be able to see your Google App Engine dashboard like the last picture above. That was the last thing we had to do with the App Engine web console. Now, our focus will be on using the gcloud CLI. Verify that you have it by executing:

```
gcloud -v
```

If you are having trouble installing it, here is your [official guide] (https://cloud.google.com/sdk/docs/quickstarts "googleCloud").
Now navigate to your React app folder. We need to create a new app.yaml file in the root of our project folder that the gcloud CLI will use to deploy our app to the App Engine. After you create the file, add this content to it [(official source)] (https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml "nodejs"):

```
runtime: nodejs
env: flex
# This sample incurs costs to run on the App Engine flexible environment.
  # The settings below are to reduce costs during testing and are not appropriate
# for production use. For more information, see:
# https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml
manual_scaling:
  instances: 1
resources:
  cpu: 1
memory_gb: 0.5
disk_size_gb: 10
```
Make sure to save the file, and now we are finally ready to use the CLI:
```
gcloud init
```

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

Follow the steps to add your account, region, and make sure to pick the project you just created.

Once that has been initialized successfully, we can run the final and ultimate deploy command:

```
gcloud app deploy
```

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

After a few minutes, you should see a link in “Deployed service [default] to”:

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

Visit it in your browser to find your deployed React App. Here is mine.
Congrats Champ! You did it! 🎉🎉🎉

Here is a [link] (https://github.com/Marwan01/react-appengine "gitRepo") to the git repo that contains the React app and the YAML file that was used for this article. Thank you for reading! 💟📖

Original Source: https://medium.com/better-programming/deploy-a-react-app-to-google-cloud-platform-using-google-app-engine-3f74fbd537ec