Vincent Audoire
Jul 9, 2018 · 3 min read

In this article I’ll show you to how to create a simple setup to deploy a Dockerized React App on Google App Engine. This setup is currently being used at Popsure, it allow us to iterate quickly on the website while being future-proof.

Prerequisites

We’ll be using the create-react-app cli tool to get a running react app out of the box. We're going to create an app called "example-app":

On the terminal run
$ create-react-app example-app

When this is done, head over to the newly created /example-app directory and check if everything is running smoothly.

$ cd example-app/
$ npm start

You should see the example app showing up on your favorite web browser.

Dockerize the React app

Let’s Dockerize this react app, create a Dockerfile at the root of the /example-app folder using your favorite text editor.

The Dockerfile will look as follows:

FROM node:carbon-alpine AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build
FROM node:carbon-alpine
WORKDIR /app
RUN npm install -g serve
COPY --from=build /app/build /app/build
EXPOSE 8080
ENTRYPOINT serve -l 8080 -s build

We’ll need a .dockerignore file too. We want to ignore everything but the package-lock.json (generated by npm) and the /src and /public folder (containing all of the sources).

# ignore everything 
*
# except
!package-lock.json
!package.json
!src
!public

We can now create and test our docker image. Go ahead and run
$ docker build -t example-app:1 .

When the docker image is created, test it using:
$ docker run --rm -it -p 8080:8080 example-app:1

On your web browser, go on http://localhost:8080 where you should see the running docker app.

You can stop the running container by hitting ctrl+c.

GCP App Engine

Now that we have a running React app that is dockerized we’ll deploy it on Google App Engine. Make sure you have an account on Google cloud platform with billing enabled and that you’ve properly initialized the Cloud SDK. We’ll start by creating a new project.
$ gcloud projects create [PROJECT ID]

The project ID should follow these rules: start with a lowercase letter and can have lowercase ASCII letters, digits or hyphens. Project IDs must be between 6 and 30 characters.

We’ll now configure gcloud cli to use our newly created project
$ gcloud config set project [PROJECT ID]

We can check if the config has been properly updated by runnig
$ gcloud config list --format='text(core.project)'

Creating App Engine

Let’s create the App Engine for our React App. Simply run gcloud app create on the folder of the project. You'll be asked to choose in which data center you would like your App Engine application to be hosted. After a few minutes, you App Engine application should have been created.

We’ll now need to create a configuration file for your app. Go ahead and create a new file named app.yaml. For the purpose of this example we'll keep it very minimal but be aware that the app.yaml file can be used for configuring the resources allocated, advanced network configuration, automatic scaling etc.

env: flex 
runtime: custom

We’ll use the App Engine Flexible Environment with a custom runtime (that will rely on the Dockerfile).

We can now deploy our app using
$ gcloud app deploy

You’ll be promped with the details of the service to be deployed. Review them and continue.

At this stage if you don’t have billing enabled, the deployment will fail. Just head over to the link provided in the error message and enable billing for your app

After a few minutes you deployment should have finished and you’ll be able to see your react app online using
$ gcloud app browse

Updating the project

Now that we’ve set up our environment properly releasing new updates of our react app is as simple as running
$ gcloud app deploy

On a next blog post I’ll show you how to get a very simple CI/CD pipeline using Google Container Registry. That will allow you to test & release new version of your app when you push new commits into your master branch.

I hope you find this setup usefull. This definitely saved me a lot of valuable time when iterating on my company’s app, Popsure.

GetPopsure

We're making insurance simple to understand and easy to buy.

Thanks to Jordan Abderrachid, Rob Schumacher, and Simon Frost

Vincent Audoire

Written by

Founder / CTO @Popsure

GetPopsure

We're making insurance simple to understand and easy to buy.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade