JSPM with SystemJS, ES6, AngularJS, TypeScript and ASP.NET Core – Part 1 [Setup]

Note: in these series I’m using some UNIX commands like touch and mkdir. If you’re using Windows, those commands can be ran if you’re using cmder, the appropriate related command for Windows or creating files and folders using the GUI.

This tutorial is focused on MacOS but can be extrapolated to Linux and Windows. If you use Windows be sure to download cmder if you don’t already have it.

Prerequisites:

  1. Homebrew (for MacOS)
  2. NodeJS (MacOS: brew install node | Linux | Windows)
  3. Text editor (I’ll be using Visual Studio Code)
  4. cmder (only if you use Windows)

Part 1 – Setting up the project

The first thing we need to do is create a folder for our project, in my case I named it redbeard. Now, inside that folder, we run the command npm install jspm@beta.

We’re currently using the version 0.17 which is in beta. You can check your version by running jspm --version

SteinMac:redbeard eestein$ jspm --version
0.17.0-beta.11
Running against local jspm install.

After JSPM has been installed we will initialize it by running the command jspm init.

From this moment on, everything is almost automatic.

  1. “Package.json file does not exist, create it? [Yes]:” – Press enter

  2. “Init Mode (Quick, Standard, Custom) [Quick]:” – Press enter

  3. “Local package name (recommended, optional): app” – Press enter

  4. “package.json directories.lib [src]:” – Press enter

  5. “System.config browser baseURL (optional): /” – Press enter

  6. “System.config local package main [app.js]:” – Press enter

  7. “System.config transpiler (Babel, Traceur, TypeScript, None) [babel]:” – TypeScript (and press enter)

After JSPM has finished downloading everything, run jspm install npm:angular.

This will install AngularJS (currently v1.5.3). After that, run touch index.html.

This will create an index.html file that we’ll edit to look like this:

[code lang=”html”]

<!DOCTYPE html>
<meta charset="utf-8">
<script src="jspm_packages/system.js"></script>
<script src="jspm.browser.js"></script>
<script src="jspm.config.js"></script>

<body>

<div id="container"></div>

<script>
SystemJS.import(‘app.js’);
</script>
</body>

[/code]

After that, run touch app.js.

This will create an app.js file that we’ll edit to look like this:

[code lang=”js”]

let container = document.getElementById(‘container’);
container.innerHTML = ‘Ahoy, matey!’;

[/code]

This is our current structure on Visual Studio Code (VSC from now on):

Now, let’s install Node’s http-server library by running the command npm install http-server.

Once it’s done we can run the command (on the app’s root folder): http-server.

And then access the url on our browser: http://localhost:8080
If you did everything correctly you should see this page:

That’s it for our very first app! In the next articles we’ll make some changes to start using TypeScript as our main codebase and integrate our frontend with a backend built on ASP.NET Core:

RedBeard on GitHub

See you there!




Leave a Reply

Your email address will not be published. Required fields are marked *