Angular 9 Tutorial For Beginners #76- Build Angular Applications

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we will learn how to build angular apps so far if you see we have been learning we have been developing we have been testing our angular application but we never got a chance to deploy or build it today is that episode where we will learn how to build how to compile our angular applications welcome back my name is sridhar i have over 10 years of experience as a full stack developer i'm here to share my knowledge with you all on the modern web technologies i'm also here to learn from you all so during the course of this tutorial series if you have any doubts any queries just ask me in the comment section below i'll be happy to help you i'm putting in a lot of hard work and bringing these tutorials for you friends so i'll i'll really appreciate if you can support me by subscribing to my channel and liking my videos thank you in advance now there are around 75 tutorials that i've posted on angular 9 in the full playlist so the playlist link is in the description box below if you really want to learn and master angular 9 this is the series for you do check it out like i said the link is in the description box below so we are learning on the mini series on build and deployment in the previous episodes we have learned the basics about what is build what is deployment how angular looks at it what is ahead of time compilation how does it play a role in build itself so today we will learn how to build and deploy a single app a very interesting topic a lot of you have been asking and waiting for it so i hope you find it useful let's get started so angular like in the previous tutorial we learned that angular will use ahead of time compilation by default in angular 9 onwards which is what will be used to compile the angular metadata the templates the the typescript code into a language or code which browser understands which is our javascript now whenever we want to build our or compile our application we must be in the same working directory the one that we want to generate and then once we are there we have to run a command using angular cli the command is ng build okay it's not ng build command it's just ng build so when you do that it will build that application now we can pass some customize and pass various options to this we'll see now how to do that but just to understand uh we can pass different things like base href aot uh output path prod true index deploy url etc so these are some of the commonly once used but there are other also which can be uh definitely used so remember that mostly this would be in your pipelines right so whenever we talk about a real time project you never actually build it in locally and then deploy it it never happens if it's happening that means it's not a real project this is one of the common questions that is often asked how what was your build process right right so all of this like build deploy all of this should be in your pipelines uh when i say pipelines it should be in the your build and deploy pipelines usually built on bitbucket or github or stash so yeah let's see how to build an app so first okay so this is the notes from the previous okay let me open it here if we want to make some notes right so i have a project here that we are working on it's called one conversion so let's navigate into it we are already inside it okay very good and the command we will run to build or compile our application is ng build okay so now you see here dist folder i'm going to delete it i'm going to delete it so that you see it again right so now i'm just running the command ng build so what this will do now is it will compile the application it will convert it into javascript and give the output into the dist folder here by default let's see that now it's taking a while but in the meantime please do take a time to hit the like button on this video to appreciate and support me thank you all righty so now it says generating es5 bundles you see that this is nothing but it's converting the code into javascript now right so now remember that whenever we build right we use the command ng build okay that's the command we used to build now right so we use the command ng build and now you see it says converting code and giving output in es5 right and if you see here it is all js files that it has generated you will see main.js you will see styles.js es5 you will see vendor you will see scripts torches so you see there are so many files that it generates and remember that always the default folder where it will generate the code is dist right if the folder does not exist it will create one and copy the files inside it if the folder exists it will override the existing files or it will replace will replace and overwrite the existing files okay so now let's see so you see here there is a dist folder now it has created assets invoices runtime js it has created all the so it has created modules for the modules that we created it created all the different things that we want right so you see so this is how you have built the application now whenever we say deploy right whenever we say deploy the app right so deployment is nothing but copying this this folder into the hosting website folder right a good example is if you have a local host or aws or s3 bucket or x your folder or gcp wherever you want to host it you will have a hosting folder right domain name right let's say if you have a domain name which says httpmyproject.com right so let's say you have this domain name so usually we will go into the cpanel and you will go to file manager and go to root and you will copy and paste this list copy and paste this dist folder okay so that is what it means by deployment this is manual deployment the one that we are talking about right copy pasting pasting is manual deployment okay remember no one does it no one does it and it's not really encouraged right it's not really encouraged it doesn't make sense that you use a modern framework you use a build tooling and then you do a manual deployment it doesn't work that way automatic deployment automated automated deployment okay so automated deployment that's what um it will have it will be defined by the commands and will be part of the build on deployment pipelines usually in bit bucket stash or github right so this is what um this is how we build this is how we deploy so you see this folder now it doesn't have to be this way right you can also specify the output directory and output directory equal to you can say i want it by the name conversion right so okay unknown option output directory okay sorry it's output path output path alrighty let it again it will build it again so every time we do it will compile to check if there was any new changes if there are any errors so it will create the separate files for each of the modules for each of the script main styles vendors etc and give us the output again it will give us so now you see there is a folder called conversion right so we can we can specify the output directory name as a as a option in command line right using hyphen knife and output path now this is done now i had covered when i covered the routing part i had covered a tutorial on base href if you don't recollect i suggest please check out please check out that tutorial it's in the playlist a very important concept important concept and 90 percent deployments fail due to due to wrong settings in base href right so if you are working on unless you are deploying onto root if there are any slash folders subfolders sub domains it's extremely important that you give the correct base ref if you don't give that it will screw up your deployment so it's important again you can pass it using the option and say base href so let me show you first what the base href is of the generated output so if i go to index.html you see that base href is slash right now if i can say ng build and i'll say base base href equal to i'll say http localhost colon 7017 right so now what i'm doing is initially it was only slash right but now the entire angular application will be built all the internal links will be rebuilt with the new url which is localhost 7070. so when now i will see it in the dist folder since i have not given the output path i will see that is no see it has generated now if you see go to base href you see href is equal to localhost 7070 right so yet another important very very important concept uh often people ignore it thinking that it's not of important but whenever you are giving a url it's extremely important to take make sure you pass correct base hrf right make sure you don't make that mistake similarly deployment url uh another another catchy area so make sure just like base href you can deploy you can mention the deploy url and as a param and you can give the new url where you want it to be deployed right so those are the things that i think these are the patterns that you have to pass or rather these i would say for debug purpose so whenever you build an application and you're ready to deploy if something is not working these are the common things that you should look where you would have done it wrong right uh before i leave one last thing i'll explain which is the index right so we know that any and every server and every server thinks that by default um the default uh landing page should be index which is which is correct which is correct in most cases but in in some cases like you don't want the user to be on index but you want him to be directly on login page right something like that if you have a use case you can always mention uh you can say that the index files that is a starting file should be your so you can pass an option like ng build hyphen hyphen index equal to login right so that way you are telling it that start with login uh page itself not with index so this is yet another important thing if you want to some certain page to be the default on your server and not the index page all right so that being said i think that's how we build a single application in the next episode i'll show you how to build if you have multiple projects in your repo how do you build a specific project and that would be the last of the at least this particular series before we start the crud operations and learn about details in terms of practical live projects see you in the next episode thank you so much for joining and thank you so much for appreciating me thank you again

Channel: ARC Tutorials

Views: 4,465

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, how to build and deploy angular apps, build and deploy angular apps, angular apps build and deploy

Id: G7Vwf2_vUfw

Length: 15min 9sec (909 seconds)

Published: Wed Jul 22 2020