Step 10 - Build Configuration

Ok our application is working and we now want to package it and run it on IIS and possibly deploy it. In order to do this we need to build it first.

So far I was using the webpack-devserver which runs on port 3000 and serves as a development server. The REST requests were served from IIS. Now we want to build the application so it all runs from IIS.

Building

Bring up a command window in the project's web folder and run:

webpack -p

This builds your application into a production build that is compressed and packaged and creates 3 bundle files:

polyfills.bundle.js
Dependencies that provide missing browser features to older and newer browsers.
vendor.bundle.js
Third party libraries that are referenced as modules. This includes Angular depedencies like RxJs and Zones, as well as any modules you add (like jQuery and toastr) for example.
main.bundle.js
This is the actual application bundle that holds your code. The bundle contains your components and services - all your compiled typescript code, as well as all HTML templates and CSS compiled down into JavaScript code.

These bundles are then loaded by Index.html, which has very little in it:

<!DOCTYPE html>
<html>
  <head>
      <base href="./" />
      <title>ToDo List</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      ...
      <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
      <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" />
      <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
      <link href="css/application.css" rel="stylesheet" />
  </head>
  <body>

    <app>
      Loading...
    </app>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>

    <!-- THESE ARE THE GENERATED PACKED BUNDLES -->
    <script src="./polyfills.bundle.js"></script>
    <script src="./vendor.bundle.js"></script>
    <script src="./main.bundle.js"></script>
    <!-- THESE ARE THE GENERATED PACKED BUNDLES -->

    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
        $(".slide-menu-toggle-open,.slide-menu-toggle-close, .slide-menu a, #SamplesLink").click(function () {
            $(".slide-menu").toggleClass("active");
        });        
    </script>

  </body>
</html>

Now that the package has been built you can run the application in IIS by opening:

http://localhost/todo/

Deploying to a live site works the same.

Make sure you adjust the baseUrl in the TodoService to reflect the final online location of the service - you don't want to go against localhost ðŸ˜ƒ.

Changes in IIS require a recompile!

It's important to understand now that you're running in IIS, if you make a change, it requires a full recompile with webpack in order to see that change in IIS.