Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Setup

Let's get our development area set up and ready for the course!

2 lessons, 07:22

Free Lesson

Free Lesson

2.SystemJS and Jspm Basics
3 lessons, 23:58

Getting Started With SystemJS

Loading Other Types of Assets

Using Third-Party Libraries

3.Universal Modules and Production Builds
1 lesson, 07:56

Using Multiple Module Formats

1 lesson, 00:58


1.2 Setup

Hi folks, let's get our system set up, ready to use SystemJS. I'm going to assume that you have NodeJS installed already. But if not, you'll need to head on over to nodejs.org, and follow the installation instructions for your platform. There's a repo for the course up on GitHub, at github.com/danwellman/systemjs-project. So you can clone that to your machine to get the starting set of files. And we should then focus the command line on the new directory, systemjs-projects. So this repository contains the starting files that you'll need to complete the coding examples, as we progress through the course. There's also a branch in the repository called completed-project, which contains the files as they will be by the end of the course. If you want to follow along with the examples, and I recommend that you do, you can start out with the initial files in the master branch. But if something isn't working correctly for you, you can go and check out the completed files, and maybe this will help with debugging. So the example project this time is based around ES2015 modules, as SystemJS has support for these. So let's just open the project up in a code editor, and take a quick look at what we get. At the root of the project, there's a folder called app. And this contains a single file, called stringUtils. And this is just a regular ES2015 module, that exports a single class called stringutils, and that has a bunch of static methods on it. There is also an scss directory, and this also contains a single SCSS file. And if we open up that and take a look, it's a very, very basic style sheet that just defines a single variable. And then uses that variable to set the background of the body. And there's also an index.html page which will be used to run SystemJS, and load up our modules. So at this point, nothing for SystemJS or JSPM has been installed yet. We're going to set all of that up from scratch. So first of all then, we should install JSPM globally. We are using the current beta version of JSPM here, as there is an issue with the current production version, but which is fixed in the latest beta. So hopefully, at some point in the not too distant future, the beta version will turn to the official release. And you'll just be able to install that without the @beta on the end. Now that we've installed JSPM globally, it's also recommend to install JSPM into the actual project. So we're just gonna install the same beta version locally to our projects. And we're going to install that as a DEV dependency. So once JSPM has been installed locally to the project, we can initialize JSPM. And we can do that with the jspm init command. Running this will fire up the configuration utility for JSPM, which will step us through a series of prompts. It first asks if we want to create the config file, so we'll select Yes here. Next it asks us which initialization mode we'd like to use. The default is Quick, and we can go with that. We can pretty much choose all of the defaults. So once the prompt is done, we'll see a bunch of activity in the console as JSPM installs SystemJS, and the dependencies that it needs. Once this is complete, we should see a new jspm_packages folder. This is where any package that we install via JSPM will go. And you can think of it as similar to the node_modules folder. It's just somewhere that dependencies for the project get installed. We should also find that there is a jspm.config.js file in the root of the project, that JSPM has created. Let's just open that up, and take a quick look. This file contains all of the configuration for SystemJS. And we can see that JSPM has added a number of different items for us. It has set some paths for us, it's added a browser config, and it's added a map for the plugin Babel, which SystemJS will use to transpile our ES2015. And it's also added some package information, and some configuration paths. Generally, JSPM will take care of this file for us, and we shouldn't need to add it manually too often. But in the next couple of lessons, we are going to see some configuration that we will need to add manually. But generally, you won't need to open up this file too often. And the configuration in here will grow considerably, as we install additional JSPM modules. So that's about all we need to get started with. Let's move on to see how we can start using SystemJS in the next lesson. Thanks for watching.

Back to the top