Deploy Your React App On Google Cloud Platform’s App Engine

In this post , i will show you the steps to deploy your simple react application to GCP app engine service .

Before going for actual deployment you should consider below pre-requisites –

GCP account – You need to create at least Free tier GCP account by providing your credit card details which will be valid for 3 months. You can create it using https://cloud.google.com/

Github project – Simple hello world  react project on github (https://github.com/AnupBhagwat7/gcp-examples)

Below are the steps to deploy application to App Engine –

1. Create your app in the GCP

Go to Google cloud console(https://console.cloud.google.com/) and click on App Engine –

You need to create a new project to before you start using cloud as below –

Create new project

Once its created , you will see App Engine screen as below –

App engine dashboard

Now click on create application and select region from below screen –

region

Select Laguange as Nodejs and environment as standard-

2. Clone our app from our GitHub repository

Now you can clone the application from github using Cloud shell present at right top corner –

Open cloud shell
git clone https://github.com/AnupBhagwat7/gcp-examples.git

3. Build our app for deployment

Now navigate to your project –

cd

cd gcp-examples/gcp-demo-react-app/

Now you need to install the dependencies required and then build the project –

npm install
npm run build

These commands will create the build artifacts in build folder .

4. Add an app.yaml to the root directory and deploy!

Delete all the files and folders except application.yaml and build folder. By the end of this step, the only things left should be the “build” folder and “app.yaml”. That’s all the App Engine will need to run our app.

rm fileName - delete single file

rm -r foldername - Delete all files recursivey

app.yaml contains below content –

runtime: nodejs12
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

This file provides information required application deployment.

To deploy application , you need to execute below command on cloud shell –

gcloud app deploy

Just answer ‘y’ for any prompt comes up . After successful deployment you will see the application link on App Engine dashboard as below –

Once the application is deployed you will see URL in cloud shell console as below –

You can also see the application link on App engine dashboard –

Access application in browser –

Browser

Leave a Comment

Close Bitnami banner
Bitnami