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

Step 4 - The front end

Now we are going to build the front end application with Angular 7. Once again, this is not a Angular tutorial. You can download the code, customize it a little (follow the steps of the tutorial), run it locally and at the end push it to GCP.

This tuto is inspired by https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example. I recommand you to have a look if you want to better understand Angular.

Prerequisites

• As always, you need a GIT client to get the source code. Under Windows, use gitbash : https://gitforwindows.org/ You will get a GIT client and a BASH environment for the same price !
• Install node.js : https://nodejs.org/en/download/
• NPM commands do not seem to work well with gitbash. You can either use the good old cmd.exe, or a smarter terminal like cmder : https://cmder.net/

Download the source

• Just use GIT and do the following in git bash :

git clone https://github.com/benoittouron/gcpfullstack-front.git

• Edit the file src/app/data.service.ts

Adjust the URL in the getUsers fonction :

getUsers() { 

  return this.http.get('https://your_project_name.appspot.com/people') 

}

Adjust the project name with the URL of your backend (you should have got it in step 3). You can find the app name in your GCP console.

•  Connect to your GCP console : https://console.cloud.google.com/ 

1. Select your project clicking in the top blue nav bar
2. Click the icon on the top left, and select AppEngine
3. Select Services
4. Right click on the service name to get the URL (copy link)

Download the dependencies

• Download the dependencies with npm. From cmd.exe or cmder (but not gitbash) :

$ cd gcpfullstack-front
$ npm install

•  Dependencies download can take a while. While it downloads, you can check the following URL : http://www.commitstrip.com/en/2017/12/07/npm-philosophy

Feed the database

• Use Postman. Create 2 POST requests (creation)

• Endpoint = https://your_project_name.appspot.com/people
• Headers = Content-Type : application/json 

• Body of the first request :

 {
"firstName" : "Steve",
"lastName" : "Jobs",
"avatar" : "https://avataaars.io/?avatarStyle=Circle&topType=LongHairCurvy&accessoriesType=Kurt&hairColor=Platinum&facialHairType=BeardMagestic&facialHairColor=Platinum&clotheType=ShirtVNeck&clotheColor=Pink&eyeType=EyeRoll&eyebrowType=UpDown&mouthType=Default&skinColor=DarkBrown"
}

• Body of the second request :

 {
"firstName" : "Bill",
"lastName" : "Gates",
"avatar" : "https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Blank&hairColor=Red&facialHairType=MoustacheFancy&facialHairColor=Platinum&clotheType=ShirtScoopNeck&clotheColor=Blue03&eyeType=EyeRoll&eyebrowType=UnibrowNatural&mouthType=Smile&skinColor=DarkBrown"

}

Start the server locally

• At the root of the source, simply do :

npm start

• The application is up and running on the 4200 port. Visit http://localhost:4200

• Appreciate the webpack magic : edit a HTML or TS component. The changes are automatically shown in the browser. No need to reload the page ! 

• Example (optionnal) : edit the file src/app/home/home.component.html. Change <h1>Users</h1> by <h1>The great users</h1> , save the file. The browser is automatically refreshed. 

• Great. You front app is now running locally. Next step, move it to the cloud !