Deploy React App in Google Cloud

React is JavaScript library created by Facebook. It is a tool for building UI components. In this tutorial, I am going to deploy sample react application in Google Cloud.

Create react app using npm

npm is a package manager for the JavaScript programming language. npm makes it easy for JavaScript developers to share and reuse code, and makes it easy to update the code that you’re sharing, so you can build amazing things.

npx is a npm package runner (x probably stands for eXecute). The typical use is to download and run a package temporarily or for trials

1. Create react project called “my-app”

npx create-react-app my-app

2. Go to my-app directory,

cd my-app

3. Starts the development server using npm command,

npm start

4. create an optimized build of your app in the build folder. Bundles the app into static files for production.

npm run build

Deploy react app in Google Cloud

Create an account in Google cloud

1. storage -> browser -> create bucket

2. Fill all the configurations. In this case I am using my bucket as samplereactapps.

3. After that uploaded build folder.

4. 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.

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

5. Activate cloud shell

If your Cloud Platform project in this session is set to different one, we can use “gcloud config set project [PROJECT_ID]” to change to a different project.

6. Create directory called react-app .

mkdir react-app

7. Now we can launch the app using following command.

gsutil rsync -r gs://samplereactapps ./react-app

gsutil rsync -r [source][destination]

You can make sure that the files are there using below commands.

cd react-app
ls

8. Deploy the app by using below command.

gcloud app deploy

Now successfully we can go to target url.

Resources

1. https://reactjs.org/docs/create-a-new-react-app.html

2.https://medium.com/better-programming/deploy-a-react-app-to-google-cloud-platform-using-google-app-engine-3f74fbd537ec