Angular 9 Tutorial For Beginners #74- Build and Deploying Angular Apps

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and today we are focusing on learning about build and deployment process in angular it's an extremely important step to get your application up and running and go life welcome back my name is shredder I am your host I bring over 10 years of experience as a full-stack developer I'm here to share my knowledge with you all on modern web technologies and frameworks I see that a lot of you have been commenting me and telling me that the apps you're building is amazing I can't wait to see them at the same time if you have any code queries any doubts any if you need any help in your any explanation feel free to ask me I'll be happy to help you I'm putting in a lot of hard work in bringing these tutorials for you so please support me by subscribing to my channel and liking the videos thank you in advance this is part of the angular 9 full tutorial series where we have now around 73 plus tutorials and the playlist link is in the description box below if you really want to learn and master angular 9 this is the series you should follow alright so starting today we are starting a new mini-series on build and deployment so today we will learn about the process of build and deployment and understand why what how offered in the coming episodes we will learn what is ahead of time compilation how to build and deploy a single app how to build and deploy multiple apps will also learn to configure various environment variables for each of it to actually deploy our application let's get started alright so to learn build and deployment obviously the name says build and deployment these are the two important process that are involved we'll learn one by one first let's talk about build right so angular offers great mechanism for building which is used as web pack is used for building the application now if you are attending an interview or if you want some clarification the first thing that comes to mind is what what do we mean by build right so by build we mean that we are trying to compile our angular application right and when we compile it it will it will since if we write the code in typescript and then we have to compile and it gets converted into JavaScript and then it is given as an output into our output directory right so it's a three step process let me make some notes for you so that way you can understand so angular build and deployment today it's an introduction only just to understand what it is how it is and how angular supports it so angular build means compilation compiling our compiling our angular application right compiling our angular application and checking for checking for any syntax errors dependency injection metadata wrong etcetera etcetera so this is nothing but if you make some code mistake it will give you that you have made an mistake it will give you once it is compiled the type the typescript code is converted is converted into JavaScript code and given the new J's files are given as output into a directory right this process is also called as transpiling right so when you do a build you are actually transpiling which means you're converting your typescript code into native JavaScript code that is es6 code right which is which is then supported by your browsers right so let's talk a little bit little bit so modern browsers browsers do not support typescript right they don't understand they don't understand typescript they don't understand typescript browsers only understand JavaScript right hence it's important for us to convert our typescript typescript into JavaScript right so that's the most important piece guys and once it is done then the output is given into the the J's files the new J's files which is nothing but your main dot J's polyfills etc all these files will be given out into the output directory called the default the default name of the directory is dist right so if you don't mention anything it will give you dissed it will create a new folder called dist with the same project name right so remember whenever you build it will do these three steps right so it will first compile it will then transpile and then it will give you output into and a folder which is what we call it as dist folder now let's go back right so that is this particular one line now remember that this command the build must be executed right from your workspace directory that means you have to be inside the workspace directly to run this command right the application builder uses the web pack build tool right so what is the default tool it is web pack but there is also another tool basil that's coming out right so the default the default tooling for build process in angular is webpack but you can always upgrade it to yarn or anything that you want but the default that angular provides is webpack right and when we say build process it will require some parameters or configurations that are required right like the directory name how should the output be what's the configuration what's the base ref h3 RL what's the deployment URL etc all of that we can configure okay so the build process has or I would say the the default build process takes in the predefined conflict options right again we can change update configure them based on our requirements right for example I would say that no I don't want the output file name to be distills I don't want the base URL or I don't want the deployment URL to be something else so we can configure all of that we'll see how but just understand what all we can do first so what we can do we can configure all the default options that the build takes right so that is all you should know about the build right now we can also build single app we can build multiple apps can build single or multiple apps multiple angular apps in same project in same project that's important right so we'll see this also in the coming tutorials but understand the high-level concept first alright so once you have done this the next step that we have to do is to actually deploy it right so the next peas deployment right what is deployment so once we get the output here right you see here the step number 1.3 so once we get the output files these files needs to be deployed to the server now deployment here is nothing but automatic deployment or manual deployment to server and in more simple terms in layman's language deployment is nothing but transferring files from the build output to the server folder server root folder you can say server folder wherever you want to host it right wherever we want to host them that's what it means in layman's term now in most enterprise apps or ny eco environment the deployments are 99% automated right when I say automated it means we will have the will have the build and deployment pipelines right now pipelines are nothing but will have something like bitbucket or stash or your code version wherever you are you're using so these are commonly used once like which are used or github right so these are some of the tools which can be used to configure your bit bucket process pipelines now mostly when we talk about deployments this is the where we write the commands right so we will write commands in the pipelines the pipelines to deploy it - cloud Otto - server right in again in most enterprises in most enterprises we will have deployments done to cloud environments to a to a cloud cloud platform right some of the leading cloud platforms are AWS X your GCP right early cloud and you have digitalocean etcetera etcetera right so there are so many vendors out there that you can use any of the deployment so when we said deployment we will write this code which it will automatically transfer the files from our build output to the server output right now remember these are all automated scripts if you want to do manually right if we want to do manually we can still you can still do it but not preferred right but not referred how do we do that we learn it once we start it in the next episode so this is what deployment means right so you build the application you generate the output and then we have to deploy it so right so these are the two steps one is the angular build and the other is the angular deployment so once you build you have to deploy it and we learn how to do that don't worry about how the question of how we'll see that in the next coming episodes understand the entire overall process right so angular Google supports natively some of the deployment platforms like X your firebase Amazon AWS and github etc right alright so that being said in the next episode I will talk about ahead of time compilation and just-in-time compilation to help you understand the concept and then we'll start building and deploying our apps thank you so much for supporting so far your comments are very encouraging and please continue to do so also please to ask me if you have any questions or doubts I'll be happy to help you see you in the next episode where we'll cover about ahead of time and just in time compilations

Channel: ARC Tutorials

Views: 9,310

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, angular build and deploy, build angular application, Angular Build and Deployment tutorials

Id: zHrHg4_GNNE

Length: 13min 33sec (813 seconds)

Published: Sun Jul 19 2020