DEV Community

Cover image for Deploy a React App to Google Cloud Platform using App Engine
Marouen Helali
Marouen Helali

Posted on • Originally published at Medium

Deploy a React App to Google Cloud Platform using App Engine

Prerequisites:

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

npx create-react-app <app-name>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Make sure to save the file, and now we are finally ready to use the CLI:

gcloud init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
sdeagh profile image
Huw Burton

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.