Deploy React App in Google Cloud
Create react app using npm
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
- Create react project called “my-app”
npx create-react-app my-app
2. Go to my-app directory,
3. Starts the development server using npm command,
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
- 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 .
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.
8. Deploy the app by using below command.
gcloud app deploy
Now successfully we can go to target url.