Deploying Angular Applications | Mosh

[Music] so you have learned the essentials of angular every application needs to be deployed at some point and that's the topic for this section so you're going to learn how to optimize your applications for deployment build deployable packages of your app with angular CLI work with different environments like development testing and production lint your code to keep it clean and consistent and deploy your apps to github pages firebase and Heroku so now let's get started in this section we're going to deploy a very simple application I have built that you can download from this lecture so if you want to code along with me download the zip file extract the project and just like always run npm install and then ng surf so this is our application we have a couple of pages one is the home page and the other is the list of my followers on github so this application includes routing and consuming HTTP services so here we have only a front-end or back-end in this case github api is provided by a third party in your applications you may build the backend yourself so later in this section I will give you some directions about how to deploy both the front-end and the backend now in terms of the deployment here we have a couple of options the simplest option is to copy this entire folder with all its files into a non development machine so I can copy this folder into let's say production machine and there I can run ng serve that's the simplest option but there are a couple of problems with this approach the first problem is that here we have quite a large number of files so if you look at this node modules folder here we have more than 23,000 files and a total size of this folder is more than 230 megabytes sure we can exclude this folder and do an NPM install on the target machine but there is still another problem with this approach the problem is that here we have large bundles so here in the terminal look at the size of the vendor bundle our vendor bundle is 2.5 megabytes and this is a very simple application we are not using a lot of third-party libraries in fact we're only using angular also our main bundle is 20 kilobytes and our Styles bundle is 159 kilobytes we can do much better so let me show you a few optimization techniques we can apply here these techniques have been around for more than decade and they're not specific to angular chances are you're familiar with most of these techniques the first technique is minification and this involves removing all the comments and white spaces so look at this piece of code here we have three lines of comment a class with one method if we run this code through a mini fire we're going to get something like this so our comment is gone and all the white spaces are removed so this is minification we have another technique called adla fication and this involves renaming long descriptive variable and function names into short cryptic names so back to our example we can rename our home component and unclick method to something like this so this is uglification now the good thing is we don't have to do this ourselves there are lots of tools out there that do this for us the third optimization technique is bundling and you have already seen that throughout the course so when we serve our application using angular CLI it automatically creates a few bundles for us each bundle is basically a combination of multiple JavaScript files without these bundles if you want to serve our application exactly the way we have structured our code the client has to send hundreds of requests to download the application and this is very inefficient by combining multiple files into a bundle the client can get a large portion of the applications code using one HTTP request and this means the application loads faster on the client but it also allows the server to serve more clients because instead of serving let's say 500 requests from one client it can serve five requests from that client and at the same time it can serve several other clients so this is bundling the fourth optimization technique is dead code elimination and this involves removing any code that is not part of the application for example you might have created a few classes but perhaps we haven't used them anywhere in the application it doesn't make sense to include these classes in our final bundle so we want to exclude these or similarly if we have referenced a few third-party libraries in our package that JSON but we're not using them we don't want to bring all these third-party libraries in our bundles so this is dead code elimination and the last optimization technique is ahead of time compilation and this involves pre compiling angular components and their templates and this will have a significant improvement in the performance of our application I'm going to talk about this in the next lecture now here's the good news we can apply all these optimization techniques using a single command with angular CLI so when we build our application using angular CLI with the prod flag angular CLI will produce highly optimized bundles and then we can simply deploy these files to a non development machine you're going to see this later in this section so first let's take a look at ahead of time compilation so what is this ahead of time compilation well every angular application involves a compilation step so far you haven't seen this compilation because it happens behind the scene but I'm gonna show that to you in a minute so in angular framework we have a compiler the job of this compiler is a little bit different from other compilers you might be familiar with for example a C++ compiler takes C++ code and converts it to a different language like machine code angular compiler in contrast takes JavaScript code and produces JavaScript code and this might be confusing for you at the beginning but it's actually very easy to understand let me explain it using an example look at the template for our home component here we have an interpolation string for rendering the title field if you load this HTML file in a browser are we going to see the value of the title field of course not we're going to see this as static text exactly as is so this curly brace syntax is only meaningful to angular the same is true for all the property and event binding expressions browsers don't understand that it's only angular that understands what these property and event bindings mean so when our application starts angular compiler is going to kick in it's going to walk down the tree of our components and for each component is going to parse its template so in this case it's going to look at the template for home component it sees that here on the top we have a div inside this div we have an h1 and inside this h1 we have some static text plus some dynamic text and interpolation strings so based on this template is going to produce some JavaScript code to create this structure in the Dom so here's an example this is a very simplified example when angular compiler parses the template for our home component it may produce some JavaScript code like this so here we create a new element using document that create element this is our div then we create an h1 and next we append this h1 as a child element inside this div now after this there's going to be some code to take the value of the title field from our component and displayed in the Dom and also there's going to be more code for detecting the changes in the value of this field and refreshing the Dom if necessary so angular compiler will produce this JavaScript code at runtime and then this code will be executed and as a result we'll see the view this is what we call just-in-time compilation in other words the compilation that happens at runtime now this just-in-time compilation is perfectly fine when you're developing an application on our local machine but it's very inefficient for a production environment because this compilation step is going to happen for every user of our application so every time a user lands on our application angular compiler is going to walk down the tree of our components and compile all these components and their templates now you can imagine as the number of our components increases or as our templates get more complex this compilation step is going to take longer also for this very reason we have to ship angular compiler as part of the vendor bundle and this is why our vendor bundle is 2.5 megabytes even for a simple application because almost half of this bundle is dedicated to angular compiler now what's the solution well we can perform this compilation step ahead of time before deploying our application then this compilation step doesn't have to happen for every user our users will download the final precompiled application and this means our application will start faster so the browser doesn't have to wait for the angular compiler to compile our application also we no longer have to ship angular compiler with our vendor bundle and this will reduce the size of this bundle significantly another benefit of ahead of time compilation is that can catch all the errors in our templates earlier at compile-time before deploying our application in contrast with just-in-time compilation we see these errors at runtime but if you have a complex application with a lot of pages we may not be aware of the errors in our ten place until we navigate the particular page in our application in contrast with ahead of time compilation we can catch all these errors at compile time before deploying our application and finally with ahead of time compilation we get better security because we compiled HTML templates and components into Java Script files long before they are served to the client with no templates to read and no risky client-side HTML or JavaScript evaluation there are less opportunities for injection attacks so these are the benefits of ahead of time compilation next we're going to see this angular compiler in action all right now let's see an angular compiler in action so if you open up package.json under dev dependencies look here we have a dependency to angular slash compiler - CLI this is the angular compiler package that takes a significant part of our vendor bundle now let me show you how to run this compiler so here in the terminal we can run angular compiler from node modules folder so node under line modules dot bin that's where the binary files are located and here we run in GC that's angular compiler now let's see what happens all right angular compiler compiled our components and their templates now back in vs code you can see we have 25 new files here here is an example in the home folder next to our CSS file you can see we have a new file got shim an NGO style at es let's have a look so currently we don't have any CSS for this home component that's why this array is empty but if we didn't have any styles angular compiler would export these Styles using a constant here let's take a look at another example back in the home folder we have this file home that component that ng factory so for every component that we have reference in our application angular compiler generates an NG factory file look at this code here this is the combination of our component and its template so we can see a little bit of our markup here so earlier we had this text-align:center applied to our div in our home component here we have an image you can see the source attribute of this image so this is the code that angular compiler generates and runtime and of course this is typescript so it should be transported to JavaScript and then it will be executed and the result of this is our home component rendered in the Dom now as you can see this code is very cryptic so it's not designed it's not produced for humans to read I just wanted to show you what is happening at runtime when you load an angular application so angular component kicks in and it generates a bunch of energy factory files for each component reference in our application now let me show you something interesting I'm gonna go to home dot HTML and change this title to title too obviously we don't have a field with that name so now let's see what happens when we run angular compiler back in the terminal I run ng see here we get a compilation error property title - does not exist on type home component so this is the benefit of ahead of time compilation we can catch the errors in our templates earlier now in the real word we don't have to run NGC like how I showed you here this was purely for demonstration instead we're going to use angular CLI to build our application for production and angular CLI will internally run angular compiler and that's what I'm going to show you in the next lecture in this lecture I'm going to show you how to use angular CLI to build your applications and get deployable packages for production with this you will get all the optimization techniques that I mentioned at the beginning of this section first of all I want to delete all these 25 files that were generated in the last lecture as part of running angular CLI we don't want any of these files in our project so undo discard all changes now back in terminal in order to build our application for production we run ng build with the prod flag and this will create a deployable package that we can simply copy paste to a different machine or use FTP or any other mechanism to deploy the production server but before running this I want to show you what happens when you run ng build without the prod flag so delete this is going to take a few seconds okay we got those five bundles just like before you can see our vendor bundle is still big it's 2.2 megabytes so we don't have ahead of time compilation here in other words in your compiler is part of this vendor bundle now back in vs code you can see this new folder here dist which is short for distributable let's have a look so we've got the favorite icon for our application we've got the glyph icon files which are part of bootstrap you've got index dot HTML and our bundles now I want to show you a few things here first let's take a look at this index dot HTML this index dot HTML is slightly different from the index dot HTML that we have in our source folder so here in the body element after app root we have a few script references so the first one is a reference to inline the bundle that j/s after that you can see a reference to polyfills and other bundles in our application in contrast the index dot HTML that we have in this source folder doesn't have any script references let's have a look so we go to index that HTML in the source folder look here in the body element we don't have any script references because during development these bundles are injected into the body element at runtime okay now back to the dist folder for every bundle we have two files one is the actual bundle file and the other is a map or a source map file the purpose of this map file is to map a piece of JavaScript code in the bundle to its original source file so when you're debugging our application in chrome this map file allows chrome debugger to show you the actual code in the source file not in the bundle okay now let's take a look at one of these bundles you can see here we don't have any of the optimization techniques I told you at the beginning of this section we have all these kinds of comments we have a lot of white space we have long descriptive names so we don't have minification or activation you also have dead code so if you have created components and services that we have not used in our application they will end up in these bundles let me show you an example so I'm going to create a new component let's call this courses and I'm not going to use this anywhere in our application okay now I'm gonna build the application one more time so ng build all right our bundles all ready now let's take a look at this main that bundled edge is so here if you search for courses you can see 27 references so all the code for our courses component is in the bundle so we have dead code here also here we don't have a head of time compilation because the angular compiler is included in the vendor bundle now let's see what happens when we build the application with the production flag so ng build - there Brod now look at the size of our vendor bundle is 1.2 megabytes so it's almost half the size but by the way this is the initial size before applying any kind of minification and uglification so if you look at the actual file size it's even smaller let me show you so let's have a look I'm going to show you the vendor bundle in the dist folder look at the size of this file it's 325 kilobytes so we reduce this from 2.5 megabytes initially to 300 kilobytes also if you look at the other bundles in your application they're all smaller now back in the dist folder we've got this favorite icon and glyph icons just like before but look at this index dot HTML you can see we don't have any white space here so all our HTML markup is represented as one long string now let's take a look and one of our bundles so this is the in line bundle that you saw earlier you can see we don't have any comments here we don't have any descriptive identifiers so our function names are variables they're all cryptic like e are n and so on also here in the filenames we have this random string that we call hash this hash is generated based on the content of the bundle and it's a technique to prevent caching so every time you modify your code and regenerate these bundles this hash is going to change and this will prevent the clients browser to Keysha file with the exact same name because the name of the file is going to change in each build so to recap we can use angular CLI to build a deployable version of our application and what we get is this dist order you can simply copy paste this folder into a non development machine you can use FTP or in a more advanced scenario you can set up some kind of continuous deployment workflow in a typical web application we have the concept of environment so quite often in most organizations we have three environments you have the development environment which is used by developers you have the testing environment which is used by testers and the production environment which is where with deploy your application earlier in the course we had a quick look at this environments folder this is exactly to implement the concept of environment for our application so now let's take a closer look at what we have here and how we can define additional custom environments in this folder we have two files environment dot prot which is for production and environment which is used for development let's take a look at environment at TS so here we're simply exporting an environment object with one property production here we can have additional properties for example you may want to change the color of the navigation bar depending on the environment this way testers know that they are looking at the actual testing website not the production website so they don't accidentally modify some data in the production or you may want to change the name of the application in the navigation bar you may want to add the word testing or perhaps you want to use a different API endpoint in your testing environment you can add all these properties in this object for example I'm gonna add navbar background color so in my development environment I want to make this blue now we should add the same property in our production environment so let's go to environment but product es and simply paste this property but change the color to let's say white now back in the other file you can read from this comment then when you build your application using angular CLI and supply the environment flag angular CLI will pick one of these environment files and put it in our bundle so we don't have to write any code to work with a specific environment object let me show you what I mean so let's go to our navbar component here I'm gonna define a field called background color and I'm gonna set this to the navbar background color of our environment object so environment auto import look on the top here is a problem our auto import plug-in specifically imported the production environment and this is very dangerous we don't want to use this you want to use environment and then when we build our application angular CLI will either pick this environment or environment that prod depending on the environment we specify during building so make sure to always import from environment okay now we set this background color to environment dot look you've got this properties here so let's set it to navbar background color and then let's go to navbar that HTML here on this nav element I'm gonna apply a style binding style that background color I'm gonna bind this to the background color filled in our component now if you want to see this in action you don't necessarily have to build your application you can still serve your application with ng serve but additionally you need to specify the target environment so when we run ng serve here the target environment by default is development if you want to load your application in the production environment you can add - - prod this is the short-form for adding environment equals prod so now angler CLI is going to build our bundles using the production environment object so back in the browser you can see our navigation bar is white but if you go back here and run ng serve now we're going to be in the development environment and our navigation bar is going to be blue so back in the browser look this is our environment object in action hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course with a big discount using the link in the video description but if not that's perfectly fine continue watching as the next section is coming up

Channel: Programming with Mosh

Views: 101,760

Keywords: angular, angular.js, angularjs, angular 2, angular2, angular 4, angular4, mosh hamedani, javascript, jquery, jit, aot, deploy, angular cli, programming with mosh, code with mosh, deploy angular app, angular 4 deployment, angular tutorial, angular 4 tutorial

Id: vwyvMZStS54

Length: 27min 6sec (1626 seconds)

Published: Wed Sep 06 2017