circuit

Quickly Deploy Your React App On Google's App Engine

This is a quick guide to make your app go from local to world-wide in five high level steps!




A photo of your React app being hosted on the Google Cloud

Note: This guide assumes you already know how to create your own React app, have its source code on a GitHub repo already, have set up your GCP account, and know the command line enough to traverse folders and delete files.

Assuming you've already created your React app, have its source code saved in a GitHub repository, and have your GCP account set up, these are the five steps we'll need to take to successfully deploy and host our hard work on the internet:

  1. Create our app in the GCP

  2. Clone our app from our GitHub repository

  3. Build our app for deployment

  4. Delete everything else

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

1. Create our app on the App Engine

Go to Google's App Engine Console and create a new project:

Click on the top dropdown and a window will pop up. Click on the top dropdown and a window will pop up.

Click on NEW PROJECT at the top right Click on NEW PROJECT at the top right

Give it a name and click CREATE Give it a name and click CREATE

Click on Create Click on Create

Select any region you'd like Select any region you'd like

Select Node.js on the Language dropdown, and leave the Environment as Standard Select Node.js on the Language dropdown, and leave the Environment as Standard

2. Clone our app's source code from GitHub

Open up the Cloud Shell by clicking on the icon near the top right

Click on this symbol to Activate the Cloud Shell Click on this symbol to Activate the Cloud Shell

Once your shell is open, it's time to bring our app's source code into the cloud.

git clone <https://github.com/github-username/repo-name.git>

3. Build our app for deployment

To do this, simply go into your app's root folder (where your “src” folder is),

cd <your github project folder>
cd <your app's root directory>

And type the following command:

npm i
npm run build

This creates a folder named “build” in our root directory.

4. Delete every thing else besides the build folder

Get rid of everything else, **except **for the build folder.

rm <file-to-remove>
rm -r <remove-recursively-like-directories-inside-directories>

5. Add an app.yaml and deploy!

In the same folder where we have our “build” folder, create a new file named app.yaml. 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.

touch app.yaml
vim app.yaml

And add the following to its 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

In case you've never used vim or simply forgot:

i (to insert text)
(ctr+v to paste above code)
(esc key to exit insert mode)
:wq! (to save and exit file)

Now deploy!

gcloud app deploy

When a prompt comes up, just type “y” so it continues the deployment process. Once deployed, you should be able to visit the App Engine Dashboard where you can see your app's analysis. In the dashboard, at the top right, you'll see a link to your app. Yay!

That's it for this topic. Thank you for reading.

Further Reading

Deploying a Composable React App to Netlify

5 Tips To Scale Up Your React Apps




Continue Learning