4

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?

Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

How do I ensure the React application is 'built' (minified into production files) before deploying? What do I need to do in order to achieve this? - that's what I was trying to get at. I've seen this link already, I'm just missing the bit in-between
cloud.google.com/nodejs/getting-started/hello-world Instead of running npm start, run npm run build and have your server file serve the files in the build folder. I posted a example of a server.js that you can use
It's been a full working week since the original question, I've been at work doing other things so I've pretty much forgotten how I got to the stage I did last time. For the sake of someone else trying to find a way to do this, would you mind putting together a step by step guide as to what to do first, for someone with a custom domain too? Maybe I misunderstood the instructions on the google cloud website but my bucket is still empty even after deploying my app using the command line gcloud deploy (as instructed in your comment link above^). Is this correct?
And I think I may have done something incorrectly after deploying because my appspot domain does not want to take me to my application page at all
Have you looked at the logs? Thats really strange how it just stopped working
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.