JSPM pulls components directly from their source, either GitHub or NPM, rather than having to package components with a separate registration file.
JSPM integrates with Babel to automatically compile ES6 source. The compilation of the source can happen in the browser (so that a build step is not required) or as part of generating a web application to be deployed in a production environment.
JSPM (through the SystemJS universal module loader) supports different module formats, such as ES6, AMD, or CommonJS, so your code works well with existing code. SystemJS also supports a plugin system that can do things like loading CSS style sheets dynamically.
The application to be deployed is here. It is a simple
AngularJS application. Since it is written in ES6, the way the application comes to life is a little bit
different from the more common AngularJS pattern of using the
This is a portion of the main HTML page:
You see the controller,
mainCtrl, but there is no
Since the application’s modules are loaded dynamically, the bootstrap process needs to wait
until these source files are loaded. JSPM incorporates the
SystemJS universal module loader to load
modules dynamically, including the Angular code and the main controller (which, in turn, loads
other dependencies, like the application’s Angular module). A call to the
function initializes and runs the application.
The main controller simply sets a couple of properties that are bound in the view. We still have
to use the same module syntax for AngularJS (at least until Angular 2 is available), but we can
use the ES6
import syntax to load dependencies.
These instructions provide steps to deploying a Node application to Azure. Azure provides a Git repository that you can push to from your local repository or other Git repository.
Normally, a NodeJS application’s dependencies, the modules organized under the
are not a part of the files stored in source control. Part of deploying the application is to pull down these
node modules using the
npm install command.
jspm, we would use the same workflow by using the
jspm install command. To do this we’ll need
to customize the script used by Azure when deploying the application.
The command we are interested in is:
This command creates two files,
deploy.sh. The first file is a deployment
configuration file that points to the second file, a bash script that executes deployment steps.
(In this case we are using a bash script, but this command can also generate a Windows
batch script type.)
In the script we can see where the Node package dependencies are installed:
We need to do a similar thing with JSPM packages by adding the JSPM install command (after the node packages are installed):
One more thing we will need to do is to tell Azure what version of Node we are interested
in using. We can update our
package.json file to add the following:
Now we can push our changes (via Git) up to Azure, the deployment script will install our dependencies, and the application will be live on Azure.
There are different ways that JSPM can be used to create a production deployment. We’ll use the self-executing bundle as our example.
This combines the AngularJS code and our application code into a single, pre-compiled file.
Then, instead of using
System.import, we include the script directly and then call the
Angular bootstrap function.
(Note, I created a separate index page,
index-with-bundle.html, so that you can see
the difference in the HTML when using this bundle.)