Writing Code

It’s now time to start writing some code.

Begin by creating an index.html file in the root directory of your project and write a simple HTML document. Within the document you need to include two script tags, once referencing the system.js file located within the /jspm_packages/ directory and the other at the config.js file in the root directory.

Finally you need a small piece of inline JavaScript to import your main module via SystemJS. Main references a JavaScript file in the same directory.

<script>

System.import('main.js')

</script>

Here’s the full index.html example.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible” content=”IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

</head>

<body> <script src="jspm_packages/system.js"></script>

<script src="config.js"></script> <script>

System.import('main.js')

</script> </body>

</html>

Next create a file called main.js, again within the root directory, this is the entry point to your JavaScript which was referenced in the index.html file. Let’s just check the main module is being loaded before going any further.

console.log('is this thing on?')

You can spin the application up in the browser using just a static server like live-server or Python’s built in server (python -m SimpleHTTPServer).

It’s worth noting there’s also a fork of live-server called jspm-server, again from Glen Maddern which, although in its early stages right now, aims to be the development server for jspm.

Once you're happy things are working as expected you can start using ES6 module imports to build your application. Here’s a quick example but there are lots of great resources out there for the new syntax.