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

Coding with React JS

Setting up node express project

The Ultimate Guide to Making More Money as a Developer

Tutorial: Animate the Opening Star Wars Crawl in a React App with GreenSock

Traversing the DOM with JavaScript

The fastest way to get started with Tailwind CSS with React.js

Integrate bootstrap to your React js application

Why does my mobile browser seems wrong pixels? What is viewport? And how can I use of meta tag?

sample of wrong sizes in pixels

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

Link AWS Cognito With React Web Application

Database Design

Deploy React JS application on AWS Cloud Front (CDN )

Building an API in Airkit