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.
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
COPY . .
RUN npm install && npm run buildFROM node:carbon-alpine
RUN npm install -g serve
COPY --from=build /app/build /app/buildEXPOSE 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
/public folder (containing all of the sources).
# ignore everything
* # except
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.
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.