Deploy a fullstack app in the cloud using GCP - part 5

Step 5 : Move your front end to the cloud

Prerequisites

• Have gcloud installed : https://cloud.google.com/sdk/install
• Have a google account, with billing enabled (see step 3 for details)
• Have the backend up and running on the cloud (step 3)
• Have the front end up and running locally (see step 4)
• Have node.js, npm and ng installed (see step 2)

Switch to a new GCP project

For the first time (you never deployed the app, and never created the configuration)

• Create a new gcloud configuration for the front 

gcloud config configurations create front

• If you are behind a corporate proxy 

gcloud config set proxy/address [address_of_your_proxy]

gcloud config set proxy/port [port_of_youor_proxy]

gcloud config set proxy/type http

• Then 

gcloud init

• Choose 1 - Re-initialize configuration
• Then choose your google account (or login with a new account)
• Create a new project (first time) or Select an existing project (you should see the project for the backend, do not use this project !)
• The project name will be part of the URL, select an appropriate name

Or, if the configuration "front" already exists

gcloud config configurations activate front

Build an deploy at hand

Do the following steps at leat once, to understand what's happening. After that, I provide an automatic npm script.

• Build the app : ng build --prod
• Copy the content of dist/gcpfullstack-front to the folder dep/dist. With gitbash or cmder :

cp -r dist\gcpfullstack-front dep/dist

•  Deploy the app

cd dep 

gcloud app deploy

• If you are creating a new project, select the region
• Review the informations (including the URL) and confirm by Y
• Browse the appspot URL and let the magic happen

Build and deploy with the NPM script

• If you look in the package.json, you will find a script called dep
• Run the dep script

npm run dep

• And that's it. Your app is in the cloud. Yeeepee !