1 00:00:00,180 --> 00:00:02,939 Let's use the ng serve command to run our app. 2 00:00:08,806 --> 00:00:12,168 In Visual Studio Code, let's collapse some of these folders. 3 00:00:14,277 --> 00:00:20,031 And notice that the ng serve command doesn't make any changes to our project, 4 00:00:20,031 --> 00:00:22,831 no new folders or files were created. 5 00:00:22,831 --> 00:00:27,657 This is due to the ng serve command not saving build applet to the file system, 6 00:00:27,657 --> 00:00:30,043 the build is done entirely in memory. 7 00:00:30,043 --> 00:00:34,228 In order to keep things as perform it as possible when recompiling and 8 00:00:34,228 --> 00:00:36,330 reloading the app in the browser. 9 00:00:36,330 --> 00:00:39,601 This approach works great while we're developing our app. 10 00:00:39,601 --> 00:00:44,159 But how do we get a build of our app that we can deploy to a server or 11 00:00:44,159 --> 00:00:45,541 hosting service? 12 00:00:45,541 --> 00:00:49,195 To do that we can use the ng build command. 13 00:00:54,199 --> 00:00:58,826 The cli loads it's configuration from the angular cli Json file, 14 00:00:58,826 --> 00:01:02,212 runs web pack to build and bundle all of our apps, 15 00:01:02,212 --> 00:01:07,190 JavaScript and CSS code, and rights the result to the disk directory. 16 00:01:07,190 --> 00:01:10,257 The output path can be set via configuration or 17 00:01:10,257 --> 00:01:15,849 by using the output path option, for more information, see the teacher's notes. 18 00:01:19,301 --> 00:01:21,671 If we expand the disk directory, 19 00:01:21,671 --> 00:01:25,489 we can see that the cli copied over two static assets. 20 00:01:25,489 --> 00:01:31,339 Our favicon.ico file and our index.html file, 21 00:01:31,339 --> 00:01:36,074 it also generated five bundles inline, 22 00:01:36,074 --> 00:01:41,095 main, polyfills, styles, and vendor. 23 00:01:41,095 --> 00:01:45,016 The cli also generated source maps for each of those bundles. 24 00:01:50,006 --> 00:01:53,403 Running the ng build command without any options, 25 00:01:53,403 --> 00:01:56,408 will create a development build by default. 26 00:01:56,408 --> 00:02:00,811 To create a build that's optimized for deployment to a production server, 27 00:02:00,811 --> 00:02:04,886 we can add the target option and set its value to a value of production. 28 00:02:08,772 --> 00:02:14,340 Or we can use the --prod alias. 29 00:02:14,340 --> 00:02:18,887 When creating a production build, the cli will skip creating source maps. 30 00:02:18,887 --> 00:02:22,677 It also enables both the build optimizer and 31 00:02:22,677 --> 00:02:26,986 AOT or ahead-of-time compilation by default. 32 00:02:26,986 --> 00:02:30,620 Enabling the build optimizer results in smaller bundles, 33 00:02:30,620 --> 00:02:33,680 by removing code that your app doesn't need run. 34 00:02:33,680 --> 00:02:36,206 This is also known as tree shaking, 35 00:02:36,206 --> 00:02:41,185 enabling AOT compilation results in faster rendering in the client. 36 00:02:41,185 --> 00:02:45,816 Viewer requests and a smaller overall download payload, 37 00:02:45,816 --> 00:02:50,741 by reducing the size of the angular framework by almost half. 38 00:02:50,741 --> 00:02:54,093 Production Builds also make use of Uglifying, 39 00:02:54,093 --> 00:02:58,631 Uglifying is a process of optimizing your code for the browser. 40 00:02:58,631 --> 00:03:03,472 The final result is code that you wouldn't want to read and maintain, 41 00:03:03,472 --> 00:03:05,370 hence the name Uglifying. 42 00:03:05,370 --> 00:03:10,830 For a complete list of the differences between development and Production Builds 43 00:03:10,830 --> 00:03:16,540 or for more information about the build optimizer or AOT, see the teacher's notes. 44 00:03:16,540 --> 00:03:19,187 Now let's run the command to create a production build. 45 00:03:25,815 --> 00:03:31,402 Once the command has finished, let's switch to Visual Studio Code. 46 00:03:31,402 --> 00:03:34,918 There are fewer artifacts when creating a production build, 47 00:03:34,918 --> 00:03:37,294 our static assets are still copied over. 48 00:03:37,294 --> 00:03:40,477 And the cli has helpfully generated a third party 49 00:03:40,477 --> 00:03:45,379 licenses text file containing the licenses for our app's dependencies. 50 00:03:45,379 --> 00:03:51,783 There are now four bundles, inline, main, polyfills, and styles. 51 00:03:51,783 --> 00:03:54,041 To make our app available to our users, 52 00:03:54,041 --> 00:03:56,852 we just need to deploy these files to our server. 53 00:03:56,852 --> 00:04:00,957 To demonstrate this, we can use GitHub's pages service, 54 00:04:00,957 --> 00:04:06,716 which allows you to easily host websites directly from a GitHub repo for no charge. 55 00:04:06,716 --> 00:04:10,823 To get started with this process, we'll create a production build. 56 00:04:10,823 --> 00:04:18,287 So, ng build --prod, will configure GitHub pages to surf from a directory name docs. 57 00:04:18,287 --> 00:04:22,178 So let's use the output path option to change the output directory. 58 00:04:27,041 --> 00:04:29,932 Our app will be served from a sub-directory, so 59 00:04:29,932 --> 00:04:33,739 we need to specify the base href to be the name of that directory, 60 00:04:33,739 --> 00:04:36,722 which will be the name of our app, myawesomeapp. 61 00:04:36,722 --> 00:04:40,504 We can do that by using the base href option. 62 00:04:48,670 --> 00:04:51,108 This option is necessary to set, so 63 00:04:51,108 --> 00:04:55,433 our app can successfully load our JavaScript and CSS bundles. 64 00:04:55,433 --> 00:04:58,805 And that's it, go ahead and press enter to run the command. 65 00:05:05,854 --> 00:05:10,169 Now let's commit these changes, 66 00:05:10,169 --> 00:05:14,184 git add dot && git commit -m, 67 00:05:14,184 --> 00:05:19,553 with a message of Added production build. 68 00:05:19,553 --> 00:05:23,144 And let's push our changes to the remote repo on GitHub. 69 00:05:27,956 --> 00:05:29,595 Here's our GitHub repo, 70 00:05:29,595 --> 00:05:33,328 to enable GitHub pages we need to go into our repo settings. 71 00:05:36,472 --> 00:05:39,000 Scroll down to the GitHub pages section. 72 00:05:42,550 --> 00:05:48,634 For our source select the master branch /docs folder option, 73 00:05:48,634 --> 00:05:51,400 then click the save button. 74 00:05:51,400 --> 00:05:56,265 If we scroll back down to the GitHub pages section, 75 00:05:56,265 --> 00:05:59,103 we can see the URL for our app. 76 00:05:59,103 --> 00:06:03,664 I've got a custom domain configured for my GitHub organization, so 77 00:06:03,664 --> 00:06:07,131 your URL will look a little different than this one. 78 00:06:07,131 --> 00:06:12,141 By default, URLs for GitHub pages websites will be your 79 00:06:12,141 --> 00:06:18,017 .github.io/ then the name of your repository. 80 00:06:18,017 --> 00:06:24,200 I'll just click on the link, and here's our app running on GitHub pages.