Deploy an Angular App on the GCP Using the Google App Engine for Free in Minutes

[Music] hello guys welcome to today's tutorial and in this video i'll be showing us a step-by-step guide on how to deploy an angular application on the google cloud platform if you are new to the channel please make sure to like as well as subscribe to the channel so i can keep on creating more awesome content and also for the youtube algorithm to keep recommending my videos as you can see on the browser we have a series of steps we are going to follow in creating this process so before we begin i'll show us a quick overview of what the google cloud platform is about it's a product offered by google to host suits of computing services it is used internally by google for some of its products such as the gmail google drive youtube and so much more it's been around for 13 years now that's april 7th 2008 and it was written in java c plus plus python go and ruby as you can see the google cloud platform have an arrays of brands in which it offers to the end users some of which includes the app engine the compute engine the kubernetes engine cloud functions cloud run and so much more for the sake of this video we'll be working with the app engine to get started with this product what i'm going to do is to clone the last phrase i did on this on this youtube channel which is the headless cms with angular where we created a blog so i straight to my github account head straight to my profile and in my repositories i scroll down to search for the project yeah it is once the project is opened i can just copy this url then we can create the projects now so i'm going to open up my terminal and type in git clone and then the url we copied from we need to succeed into the right directory that's ng wordpress so i'll just type in cd wordpress and the next thing we need to do is to run npm install to install all the necessary packages for this project to run while that is installing we can check the next step we need to do which is to create an app.tml file so i already have a yaml file created in my github gist so i once again click on this drop down click on the options that says where my gist projects are and then you see file called app.yaml you click on that and then we have access to the rpml file if you are wondering i'll be putting a link to this github juice in the description below so what i'm going to do next is to copy everything inside of this file and then we'll have to place it in the roots of our angular application now let's check if our app has fully installed the npm packages okay it us so we can just open these projects in visual studio code perfect so before i create my app.yaml file one thing i need to do is to check if our app is running properly and to do that i'm going to type in npm not npm ng server actually this is an angular project so let's type in ng server and then wait for it to compile now that our app has compiled successfully i can add over to the browser open a new tab type in local os 4200 and there you go our project is displayed successfully so let me click on one of the single posts so we have everything working fine so i can stop this server and then let's go ahead and create the app.yaml file so in the root of the application i'm going to create a new file dots yeah ml i'm gonna get rid of this tab and this tab as well so i'm gonna paste the app.yaml code we copied in github over here now as you can see from the static files key over here we have a path that says this slash project project's name slash index.html and also under the upload you have this slash project name so we're going to replace every one of the parts that has the project name with the name of our project so to do that and to be sure of the right name what i'm going to do again is to run the ng build command that is going to help us generate the production build of the application a minified version that's lighter and faster so what i'm going to type now is ng butter dash dash prot actually i'm going to get rid of the dash dash broad flag because i think it's now deprecated in angular so ng but alone is enough so let's type let's press enter so as you can see our app has successfully been built so we can head back to the project and you'd see that this folder has been created for us this is what we'll be hosting on the google cloud platform so when i open this folder up you can see we have another folder called ng wordpress so that is the name of our project so what i'm going to do now is to clear everything called project's name here and then replace them with ng dash wordpress so with this we've successfully created our app.yaml file so i'm going to save that and then i'll check for the next step of what we need to do so the next step is to create a new gcp project so quickly i head straight to the browser i type in google cloud and then try to login into my account so as you can see i'm successfully logged in what we need to do next is to click on this drop down here then click on new projects and then we can call this project ng dash wordpress and then click on create now a new project has been successfully created for us so what we can do is to add the app engine to this project so right in this search bar over here i'm gonna search for app engine click on the app engine results and then we get directed to the app engine dashboard what we also need to do here is also to create a new application but before i proceed i need to confirm we're in the right project so i'm going to click on this drop down once more and then click on ng wordpress because it's actually on this project called my first project but we want it to be installed on the ng wordpress project we just created so i'm going to click on that and then it shows on the navbar above so with that i'm going to click on create application and then we get asked to select a location i'm going to select europe central to and click on nest once that is successfully done we get navigated to a new page and it says we select a language the language we used is javascript but we don't have the option here so we click on other and then we leave the environments that's flexible then we can click on i'll do this later so the app engine is successfully installed in our application so let's check out the next step the next step we need to do is to download install and login into the google cloud sdk so what i'm going to do is to search for google cloud sdk download so the very first results here we have an option to download the sdk as you can see here download the cloud sdk installer so we have for windows we have for mac and ubuntu but this is a windows machine so i already have it downloaded but if you don't you can follow through with the process so once you fully downloaded it you can now open your terminal and then type in gcloud alt login so you press enter and it brings up an option of which account you want to log into so i select one of my email accounts and give it the permission to make some configuration and then we get a page that says we are now authenticated with the cloud sdk so i go back to the terminal and it's also confirmed that i'm currently logged in so let's check out the next step and then we can see what we need to do is to deploy the projects by running a command gcloud app deploy dash dash product projects equals to project id so i copy this paste it in the terminal and then we need to create our project id to do that we head straight to the dashboard of the google cloud platform click on the drop down check the id so under ng wordpress this is our id so i'm going to copy this and then paste it in our terminal and then i press enter with this app should be successfully deployed so we get the prompt the axles if you want to continue press yes and then the deployment process begins so as you can see we have our app successfully deployed then also we have a url generated for us so i'm going to copy this head over to the browser and see if the link works properly so i paste it in press enter press 2 we have our app working live on we have our app working on a live url and when we click on a single post it's also displays successfully so this is a simple step on how to successfully deploy an angular application on the google cloud platform using the app engine so if this is an app you want to host or probably you don't like the url you can buy a domain name and then set up the dns record also on the google cloud platform i think they offer about um a one-year free hosting bonus so you can definitely check that out and one more thing i wanted to do in this video is to set up the cloud build that is we are able to check how our app is being deployed the deployment process if there are any errors or not but i think that will be for a future video for now i just wanted to show us a simple video of how we can deploy an angular application on the google cloud platform using the app engine so thank you very much for watching if you like the video make sure to subscribe to the channel as well as turn on the notification bell so thank you very much for watching this one and i'll see you again next time

Channel: The Code Angle

Views: 10,799

Keywords: app engine, google cloud, google cloud platform, Deploy an Angular App on the GCP Using the Google App Engine for Free, google app, google app engine, gcp tutorial for beginners, gcp, platform as a service, cloud, angular deployment, javascript, angular, hosting, serverless, gcp tutorial, cloud computing tutorial, free web deployment, deploy angular app on the cloud, cloud computing, web development

Id: 54OOVTNJVmI

Length: 12min 27sec (747 seconds)

Published: Mon Oct 11 2021