Deploy Angular 2 Webpack Starter to Azure

This post provides a quick overview of how to deploy a site built with the AngluarClass Angular 2 Webpack Starter to an Azure Web App.

Simple deploy from local repository

This is the easiest option, useful for proof of concept and simple prototypes.

Configure Azure

• In your Azure web app open the deployment options blade and select Local Repository.
• Next, select the deployment credentials blade and enter your FTP username and password. You can get these by downloading the publish profile for the site (See here).

Configure Repo

• Navigate to the root of the Angular2Webpack Starter project
• Create a production build by running the command:
  npm run build:prod

This will create a dist folder and place the index file, the site assets and bundles created by webpack.

• Create another folder outside your project and initialise git init a git repo there.

• Grab the git clone url from the overview blade

• Add a remote pointing to Azure git remote add azure {clone_url}

• Now Copy the contents of the dist folder to it.

• Add all the files git add -A

• Commit them git commit -m "init commit"

• Push the repo to Azure git push remote azure

• All being well, once the deployment has completed your site should be available

next update, i'll add how to automate this more

Potential Errors

My first attempt at this was not successful.
The site deployed successfully, but the Angular Site would not load.
The console contained the following error:
t.match is not a function

Since the files were uglified and minified by the prod bundle process there was not much to go on. To assist debugging, I first changed the UglifyPlugin settings in webpack.prod.js. Enabling the debug settings.

        beautify: true, //debug
        mangle: false, //debug
        dead_code: false, //debug
        unused: false, //debug
        deadCode: false, //debug
        compress: {
          screw_ie8: true,
          keep_fnames: true,
          drop_debugger: false,
          dead_code: false,
          unused: false
        }, // debug
        comments: true, //debug


        // beautify: false, //prod
        // mangle: { screw_ie8 : true, keep_fnames: true }, //prod
        // compress: { screw_ie8: true }, //prod
        // comments: false //prod
      }),

The error was still present but more insightful
Uncaught TypeError: uri.match is not a function.

Some Googling later and this would appear to be caused by having the following declaration in my components:
moduleId : module.id
This was added during some experimenting with SASS and relative paths.
Removing these lines fixed the problem.

How can I set the root folder for an Azure Websites site?

If you want to serve your website from a folder that is not the root (wwwroot).
In the web apps Application Settings add a setting with the key Project.
Set the value to the root folder e.g. ./root

Alternatively you can do this in the .deployment file

[config]
project = root