Using the Google Cloud Platform for deploying React applications

Question

I have a basic React application generated using: create-react-app.

My source code is hosted on GitHub.

I wish to use the Google Cloud Platform to host my React application.

(I also have a custom domain).

Every time a push/ merge/ code change is made on the master branch, I wanted the hosted application on GCP to update my website contents from master.

Previously I have been unsuccessful in following the instructions provided by Google in setting up a continuous integration process for updating & deploying my application.

I used the Google Cloud Build GitHub app in attempt to update & build my application but with no success.

My cloudbuild.yaml file consisting of:

steps:
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']
  - name: 'gcr.io/cloud-builders/npm'
    args: ['build']

I also had a bucket set up with a working appspot.com URL (having cloned & deployed the application using the built in console on the GCP website) - which was mapped to my custom domain.

My attempts at updating this deployed version failed miserably.

In frustration of trying to achieve my desired workflow, I switched to Netlify which allowed me to achieve what I wanted, and deleted my project from GCP.

I am now attempting to start another project from scratch (on GCP) and needed some assistance in making sure I set up this new project correctly, a step by step guide if you will. I'm a complete novice when it comes to production level deployment of applications, having only practised with and developed 'dev' level applications on my own machine and I haven't found anywhere else that will help me achieve what I would like to do.

The workflow I am trying to achieve is as follows:

• I make changes to my code on the master branch
• Changes get pushed to GitHub/ the master branch
• Changes get pulled from GitHub into GCP and the website gets updated
• I can see the changes when I visit my custom domain

How can I achieve this properly? Or is GCP not the ideal solution for this?

Answer 1

https://cloud.google.com/source-repositories/docs/quickstart-triggering-builds-with-source-repositories

Found what you are looking for!

This will make it so every time you commit, google app engine automatically redeploys.

Edit

server.js

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(8080);

In your package.json, add "build:gcp": "react-scripts build && node server.js", to it.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build:gcp": "react-scripts build && node server.js"
  },
  "devDependencies": {
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0"
  }
}

Now when you deploy your app, run the npm run build:gcp command and you will know for sure your app is running in production mode.