Azure-webpackage-deploy NPM

Azure WebPackage Deploy

This package allows you to easily and simply deploy a frontend web package to azure storage and update a web app setting with a json definitions string and a definition file is uploaded to the same storage location. This way you can completely seperate your front and back end and deploy the javascript with one simple tool.

Quick start

Install the azure cli:

npm install -g azure-cli

azure login

NOTE: This will require you to visit a link and enter a code for verification. In a future release this will be improved.

Install the package:

npm install azure-webpackage-deploy

Get help:

azure-webpackage-deploy -h

The following are the options:

Options:

-h, --help                                           output usage information
-i, --indexDocumentPath <indexDocumentPath>          Relative path to the index file that references the scripts to be deployed
-a, --storageAccountName <storageAccountName>        The storage account to use
-k, --storageAccountKey <storageAccountKey>          The storage account access key to use
-c, --storageContainerName <storageContainerName>    The storage container name. This is where files will be published
--site <site>                                        Azure website add package definition url appsetting to
--slot <slot>                                        Azure website slot to add package definition url appsetting to
--definitionAppSettingKey <definitionAppSettingKey>  Optional: Azure appsetting key string to use. Defaults to "AzureWebPackageDeploy:Definition:Main"
--bundleDefinitionName <bundleDefinitionName>        Optional name that will be the json file uploaded with the scripts

What does it do?

This package will let you supply a root directory and and index html document on your system to deploy to Azure Storage along with a json file that defines how that JavaScript app works It is assumed that you don't use the index.html in your live system but load the scrips as an 'app' on a server application.

This package deploys in the following steps:

Parses the index html file for script tags containing the type="text/javascript" attribute. Making note of the order in which they appear in the document.
Uploads these files to a specified Blob Storage Container
Creates a Package Definition file named {bundleDefinitionName-{GeneratedHash}}.json and uploads that to the same blob container (example below)
Updates the supplied Azure WebApp appsettings (--definitionAppSettingKey) to equal the the json contents of the definition file

This will allow you to then parse that file and render the files that are defined in the json file.

Example Definition String JSON content

{  
   "name":"main",
   "definitionFileUrl":"https://angular2starter.blob.core.windows.net:443/assets/main-5ad60a781e48eaab429b5edb494cd4d5.json",
   "scripts":[  
      {  
         "fileName":"polyfills.bundle.js",
         "priority":0,
         "url":"https://angular2starter.blob.core.windows.net:443/assets/polyfills.bundle.js"
      },
      {  
         "fileName":"vendor.bundle.js",
         "priority":1,
         "url":"https://angular2starter.blob.core.windows.net:443/assets/vendor.bundle.js"
      },
      {  
         "fileName":"main.bundle.js",
         "priority":2,
         "url":"https://angular2starter.blob.core.windows.net:443/assets/main.bundle.js"
      }
   ]
}

Motivations

This package has been created after using many starter kits such as react-redux-starter-kit and angular2-webpack-starter and wanting to deploy them in a clean and easy way.

This is a work in progress and I am also going to create a Nuget package that will simplify the rendering of any package definition scripts on in a .NET application.