Angular 9 Tutorial For Beginners #77- Build and Deploy Multiple Apps

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn about build multiple angular apps which are in a single repo that's an interesting trend that has picked up in last couple of years where companies large enterprises are using a single framework across the board so that they can build apps which can be reused club together used as micro apps or as one big large application it's something that you all should be aware of and in this episode we will learn all about it welcome back friends my name is sridhar i bring over 10 years of experience as a full stack developer and i'm here to share my knowledge with you on modern technology web stacks like angular node express.js mongodb and much much more i'm here to share my knowledge with you i'm also here to learn from you which means during the course of this tutorial series if you have any doubts on the code examples or code samples or any explanation just feel free to ask me in the comments section below i will be happy to help you i am putting in a lot of hard work in bringing these tutorials for you so i really appreciate if you can support me by subscribing my channel and liking my videos thank you in advance this is part of angular 9 full tutorial playlist where we have now around 75 plus tutorials with detailed code um examples and explanations if you really want to learn angular framework please do check out this playlist the link is in the description box below i'm sure it will help you so we are now focusing on deploying and building our angular applications and we have seen few concepts in the previous episodes where we learned about build and deployment process ahead of time compilation how to deploy how to build and deploy a single application today we will learn about how to build deploy multiple angular apps i will also teach you how to do it in a local server with live example let's get this party started all right so the first things few things that are common from last episode right so we have seen that angular supports uh build of multiple angular applications as well as single application now every time we talk about build angular what it does is it will compile and give an output into a directory the the default directory is called dist we can always customize that by saying output path the dist folder is always rewritten every time we do a build so for example if you generated some build yesterday and if you generate one today it will overwrite the one that was there yesterday so it will be replaced completely now we can deploy our code to any server which is on uh apache server or iis or it can be a cloud hosting provider right like exo or aws or gcp so it can be any cloud-based hosting provider as well the first thing that we have to do when we talk about build is to run and compile the code and in angular we have seen it in previous episode that we do it using ng build command ng build will build the main app right and the entire projects which are inside it but if we want to run specific project which are like which is like a small sub module or sub application inside it then we can run the command ng build hyphen hyphen project equal to project m right so when we run this it will run a specific project the name whatever name we provide there right let's see that in action now but before i do that let's see some of the options that we can pass with that ngbuild command these we have explored in the previous episode also it applies same here also we can pass base href we can pass output path we can pass product equal to true or not uh deploy url so these are some of the important things that will help you and will help you in debugging your deployment process a lot of times when you see something is not working once you have deployed it's mainly because of these reasons that it's not working i'll show you that also the failure use cases so that way you learn practical first hand all right now let's talk finally about uh where do we want to deploy it right so once we build an application we have output where do we want to deploy it we can deploy it in any local server right it can be xampp it can be wamp it can be mamp or it can be iis right so nelson had asked that in the comment section yesterday how do we deploy to is so nelson this is your answer you can deploy to any local server right i am i'm going to show it in xampp and you can try the same in iis server similarly we can deploy to any cloud providers like amazon s3 gcp digital ocean ali cloud etc you can also use any of this web hosting panels like web hosting companies like bluehost siteground etc to deploy these uh your code all right let's get started and learn how to deploy that so first i'll let me show you the project structure so we have three main apps right in this case we have three main apps right if you see listing one conversion tasks right now importantly i am working let's say we are working on this app one conversion right if you expand projects i have just created two new projects right how to create and all that we will see the next series may be mini series on multiple apps for now understand that there are multiple apps which are inside this particular project which is one conversion so under one conversion this is the main app under this i have created projects and the name of the projects are app one and app two right if you want to try it out yourself uh this is what you should be running the command you should run is ng new right and then the project name so here you will write app one right so it will generate a new app for you uh similarly say ng new app to it will generate the app for you okay so that's for your notes if you want to try it out the same way that i have so i have an app and and two sub projects okay now i'm going to show you how to build individual projects first app one and adapt app to so we'll say ng build right and we will say hyphen hyphen project equal to app one so right so this is a command will run it will we are specifying here that which project to build which app to build so i'm saying i have to build app one right so this when i run it will create a new dist folder which is the default folder folder used as output right is dist now inside this it will create a same project name folder right so let's generate that all right it may take 30 seconds to one minute to compile in the meanwhile if you're enjoying the tutorial give a thumbs up to this video like this video if you have any questions drop them in the comment section below all right so while that is compiling okay so what we are going to do next we will take this output output and deploy it in our local server right and yeah so let's just give it a minute it's almost done all righty so it's done now you see there's a dist folder and there's an app1 folder right now i'm going to do the same for app2 now you will see there will be one more folder inside this by the name app2 okay so what i am going to show you first is failure use case okay i am going to show you how things fail right how things fail common mistakes right and then how to fix them that's important knowing where it fails is very very important so i'm going to show you that first and then fix it also all right so let's okay this is also done so now we have two folders inside this app one app two okay so now i am using a local server called xampp right now i am using xampp you can use any other uh like iis you can use you can use vamp if you are on mac you can use mamp if you are deploying it to xur aws cloud gcp uh any any any any and every um web domain hosting provider wherever whatever you want to use you can use it so we have a server right let me start it here right so now i have started my local apache server which is running on port number 50 which means now when i go to if i create a folder so if you see this is my apache folder inside htdocs which is the root folder let's go and create my project folder okay i've created a new folder called my my project so ideally when i go to the url which says since it's a local host right since i'm running a local and i'm running on port number 50 i'll say my project i want to deploy my apps on this particular folder right that's what i mean so for to do that i have created the folder i have my local host which is running here on port number 15 right now this is very very important configuration remember friends a lot of times 99 percent times this is where deployments fail right right 99 percent times your deployments will fail here i'll show you why because this is the base ref base href and the deploy url but we did not mention it in the build when we were running it see so now if you take this code that was generated here it will not work so what we need to do we will have to set base href equal to don't put codes you just have to give the correct path localhost or let me show you that it will not first work okay that way you will be much convinced better right about the failure all right so what i'm going to do i'm going to go to the disk folder going to take app one control a control c into the my project paste it here all right so what i've done i have copied all the app one right app1 folder output into my root folder of the local host which means now when i go to let's say when i go to my my project i should be seeing the application but i don't see anything so to inspect that what i'll do i'll right click inspect element and i go to console i see errors if you look at this path it says localhost 50 slash runtime that path is incorrect because we want the path to be with my project right you see there's a mistake so it's not finding the correct route of this particular files and that is the reason i told you that 99 times it will fail here and that's why we have to set base href equal to http localhost 50 slash my project similarly we'll have to say deploy url equal to typically localhost 50 slash my project right now we are giving the same url as the one that we want to deploy upon right now enter now this will work when we deploy right so by deploy what do we mean we just mean by we are copy pasting it right so let's give it one i think 30 seconds more in the meanwhile again i'll request you if you're liking the tutorial do like this video to encourage me all righty almost there okay in the meanwhile let's delete whatever is here i'm deleting from the my server folder i'm making it empty so you see it generated the output now let's go to again let's go to app one control a control c copy it here all right so now it has copied now when i go to my actual localhost that folder and i refresh i should see the app it says localhost my okay so that's another mistake i have done friends which is it should always have slash okay it should end with slash because it won't know the root it will think it that's the main path so it's a folder so it should be with a slash so now it will we will place everything inside that folder that's why it's important to give the backslash alternatively there is a way we can fix this in the code but you should never do that which is if you go into the dist and go to index.html we can just mention here also in the base href but that's not the correct way to do it friends don't do it don't you should know it but don't never do it right because it should be in the pipelines it should be via the build not directly into the code all right here we are okay so it generated the app one let's go now and app one ctrl c ctrl v again paste it in the root folder of the your server done now you refresh you should see the app okay so you see view one works app1 build and deployed right now similarly we can do for app2 so if you see here i want you to see an important thing it says app1 build and deployed here it says view one works right so the view is in the app one project here if you see here in the app they have a component called view one that's from app app1 okay keep this in mind so what you are seeing here we can deploy micro apps using this strategy right we can deploy micro apps that app one is a small app in itself it's an independent app in itself which can be deployed similarly app to now what i'm doing i'm going to go ahead go to this go to app to copy this content and again i'll replace in the my project folder right so now when i refresh i will see app2 in the same so when you don't see this change what you need to do go to console clear cache and reload okay so now you see it says app 2 deployed and build view 2 works now it's in the same folder right so it's it it what it means is app 1 and app 2 are now independent apps right now these apps can be deployed into any folder any domain any subfolder right in any cloud app any cloud provider any hosting any server right any server so so the idea is you can do they they are independent that's an important statement i want you to understand they are independent apps that there is no link there is no link between app one and app two they're totally independent i am deploying it in the same folder like my project you can deploy it in different different projects anything is mine okay so understand that these are independent reusable apps now as a big company as a large company what i want to do is i want to build both of them together right i'm building a big project which will include three apps now see i am not mentioning any project so it will now build complete one conversion project including these two apps right when we don't when we don't mention the project name it will build all the apps inside it right how do you know which are the apps you can check angular dot json file you can check angular.json file under projects you would see that there are three projects you can shrink them and see one conversion app one app two there are three projects inside this and it will build all three the output will have all the three okay and that is the beauty of it so the output will contain all three apps now and i have integrated them already so you should see all three working together i will go to dist now you see one more folder called one conversion take it inside here ctrl c go to my project again replace right so friends now what we are going to see these were micro apps small apps now we will see the entire project when you don't see i told you you will see that and just do a empty cache under hard reload okay so now you see one conversion project and if you see these two links it says view one works i click on this it says view two works that means now in this main project i have two different apps which i have integrated right and deployed into a folder into a local server right so it's a very very important and critical um critical step when you are deploying uh i would request you go again through this video follow the steps that i have done understand the deploy process try deploying your app no matter how which state it is try deploying it into your local server let me know if you have any doubts i'll be more than happy to help you i hope you enjoyed this video if you did give a thumbs up to this video and in next episode we are going to configure environments usually when you're working on a real-time project you'll have dev test stage right pre uit and prod so you will have different urls you will have different username passwords etc for each environment we will learn how to configure that in the next episode i hope you're liking the series if you do please drop in your comments they are so encouraging so motivating thank you thank you so much for encouraging me i'll see you in the next episode

Channel: ARC Tutorials

Views: 5,531

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, build and deploy angular apps, deploy angular apps, build angular apps, build deploy angular apps

Id: 6DkOkXQv-rI

Length: 21min 3sec (1263 seconds)

Published: Fri Jul 24 2020