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: nodejs12handlers:# Serve all static files with url ending with a file extension- url: /(.*\..+)$static_files: build/\1upload: build/(.*\..+)$# Catch all handler to index.html- url: /.*static_files: build/index.htmlupload: 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

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[Leetcode] Group Anagrams

鬼滅之刃劇場版 無限列車篇線上看(2020)完整版

Running react native android at ease

Caching API results client-side with React Hooks

What is tscconfig.json file in TypeScript ?

The reasons and cases for migrating to the latest Angular 10 framework

Comparing Flow with TypeScript

Set Up TSLint and Prettier in VS Code for React App with Typescript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pramod Shehan

Pramod Shehan

More from Medium

React with Typescript series(Charity Web App)— Creating a React app with Typescript

A Guide To Firebase Authentication In React (Initial Setup)

Configure Email-Password Authentication using MongoDB Atlas App Services

Handling Access Tokens for Google APIs with React & Node.js Tutorial