loading...
Cover image for Deploy a React App to Google Cloud Platform using App Engine

Deploy a React App to Google Cloud Platform using App Engine

marwan01 profile image Marouen Helali Originally published at Medium ・3 min read

Prerequisites:

To get started, use npx to generate a new React app using create-react-app:

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

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

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

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

Alt Text

Alt Text

Alt Text

Alt Text

Alt Text

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.
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):

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

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

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

Alt Text

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

Here is a link 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

Posted on by:

marwan01 profile

Marouen Helali

@marwan01

SRE at Bayer 🤖 • Ex Software Developer 💻 • Cloud Enthusiast ☁️• Freelance Writer 📖 • Git Guru 🧘• DevOps Fanatic ⚙️ • Marathon Runner 🏃• Scuba Diver 🐠

Discussion

pic
Editor guide
 

Hi, I would like to follow your guide to deploy my react app to google cloud. I notice though that the link on github aqueous-choir-259416.appspot.com/ results in a 404. Does the process you described above still work?

Many thanks.