All Projects → alexisvincent → systemjs-tools

alexisvincent / systemjs-tools

Licence: MIT license
(dev)tools for working with SystemJS

Programming Languages

152645 projects - #8 most used programming language
55660 projects

Projects that are alternatives of or similar to systemjs-tools

Systemjs Hmr
Hot Module Replacement for SystemJS
Stars: ✭ 24 (-41.46%)
Mutual labels:  hot-reloading, hmr, hot-reload
Crx Hotreload
Chrome Extension Hot Reloader
Stars: ✭ 545 (+1229.27%)
Mutual labels:  hot-reloading, hot-reload
Hot reload development for Go
Stars: ✭ 72 (+75.61%)
Mutual labels:  hot-reloading, hot-reload
Allow runtime modification of JavaFX CSS
Stars: ✭ 95 (+131.71%)
Mutual labels:  hot-reloading, hot-reload
active reloader rb
Rails gem that reloads browser as soon as any file is changed
Stars: ✭ 11 (-73.17%)
Mutual labels:  hot-reloading, hot-reload
Jet Live
c++ hot code reload for linux and macos
Stars: ✭ 283 (+590.24%)
Mutual labels:  hot-reloading, hot-reload
Example project - "Hot Reloading 4 RequireJS" front-end web applications & some extra code demonstrating hot-reloading for Node.js Express servers
Stars: ✭ 28 (-31.71%)
Mutual labels:  hot-reloading, hot-reload
Node Hot Loader
Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.
Stars: ✭ 111 (+170.73%)
Mutual labels:  hmr, hot-reload
Better playgrounds that work both for Objective-C and Swift
Stars: ✭ 2,586 (+6207.32%)
Mutual labels:  hot-reloading, hot-reload
Minimal Hapi + React + Webpack + HMR (hot module reloading) Sandbox
Stars: ✭ 55 (+34.15%)
Mutual labels:  hmr, hot-reload
B2 makes it easy to build C++ projects, everywhere.
Stars: ✭ 38 (-7.32%)
Mutual labels:  build-tool, build-system
Template Rwb
A full-featured Webpack setup with hot-reload
Stars: ✭ 165 (+302.44%)
Mutual labels:  hmr, hot-reload
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+3924.39%)
Mutual labels:  hmr, build-tool
Webpack Hot Server Middleware
🔥 Hot reload webpack bundles on the server
Stars: ✭ 319 (+678.05%)
Mutual labels:  hot-reloading, hmr
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (+173.17%)
Mutual labels:  hmr, hot-reload
Fegeya Elitebuild, small, powerful build system. Written in Rust.
Stars: ✭ 24 (-41.46%)
Mutual labels:  build-tool, build-system
Next generation frontend tooling. It's fast!
Stars: ✭ 35,110 (+85534.15%)
Mutual labels:  hmr, build-tool
Babel Plugin Functional Hmr
Babel plugin enables HMR for functional components in React Native.
Stars: ✭ 100 (+143.9%)
Mutual labels:  hmr, hot-reload
Systemjs Hot Reloader
reloads your modules as needed so that you can have satisfyingly fast feedback loop when developing your app
Stars: ✭ 215 (+424.39%)
Mutual labels:  hot-reloading, hot-reload
Extra CMake Modules for YARP and friends
Stars: ✭ 42 (+2.44%)
Mutual labels:  build-tool, build-system

SystemJS Tools

npm version

systemjs-tools is a collection of powerful, customizable build tools, to help build compelling development and production stories for projects that rely on SystemJS. Think figwheel or webpack, for SystemJS.

Quick Start

Install the cli

yarn global add systemjs-tools

Navigate to your frontend root and initialise the config


systemjs init

Start the development server

systemjs serve


systemjs-tools provides you with the following

items in bold are unfinished


Current development workflows for SystemJS leave much to be desired. Projects end up clobbering together a slow, haphazard subset of their desired workflow and the frustration this causes contributes to developers leaving the SystemJS ecosystem. That's ridiculous, SystemJS provides EXCELLENT primitives to build seamless development workflows and we should be leveraging that. systemjs-tools is my contribution towards tooling for the SystemJS ecosystem, and I would encourage you, if you have the time, to help contribute towards filling the gaps that exist in our ecosystem.


systemjs-tools exposes a cli tool and a server-side library and has deep integration with systemjs-hot-reloader. Each exposes layered abstractions and hooks for you to describe your unique environment, while still providing a largely automatic experience at all levels.


systemjs-tools uses systemjs-hot-reloader as its frontend client. As such you should follow the instructions listed in the README.

General Usage

systemjs-tools (cli and server) upon initialization, searches upwards for a project root directory (indicated by a systemjs-tools.js file or a systemjs-tools key in your package.json). It then loads the relevant config, describing your environment (eg. baseURL directory and port to serve on).

If you do not already have a config file, navigate to the directory containing your frontend source files and run systemjs init (not ready yet), to create a config describing your project.

Typically one would then run a command such as systemjs serve, to start up a development server.

Setting up trust for the SPDY server

It may be helpful to generate your own localhost certificates for the SPDY server and trust that with your browser. Recently, Chrome and Firefox have begun rejecting certificates that do not specify a Subject Alternative Name. Here is a one-liner to generate your own localhost.crt and localhost.key:

  openssl req -x509 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -days 365 -nodes -subj '/CN=localhost' -reqexts SAN -extensions SAN -config <(cat /etc/ssl/openssl.cnf <(printf "[SAN]\nsubjectAltName=DNS:localhost"))

To use this, specify a configuration within your systemjs-tools.js:

fs = require('fs')

// Specify keys for localhost
module.exports.config.serve.keys = {
  key: fs.readFileSync('localhost.key', 'utf-8'),
  cert: fs.readFileSync('localhost.crt', 'utf-8'),
  ca: fs.readFileSync('localhost.key', 'utf-8'),
} = {
  keys: module.exports.config.serve.keys


For an in-depth look at the API, checkout the links below.

  1. Config
  2. Server
  3. CLI

Roadmap (currently usable for development)

  • basic development bundling with file busting
  • cli - boilerplate generation
  • cli - config generation via systemjs-config-builder
  • cli - serve wrapper
  • promise construct for serialization of builder operations
  • rxjs core api (for plugin communication)
  • cross session generic cache with file busting
  • development mode
  • sourcemap support
  • hot module replacement
  • handlers - [static, bundle]
  • basic documentation
  • handlers - [named bundle mappings]
  • handlers - [compile, http2 server push]
  • logging via debug package
  • preemptive file loading
  • production build story
  • hmr - [preemptive sources]
  • development console with error catching
  • configuration schema and validation (using ajv)
  • cli - use config schema to automatically expose options
  • generic dependency tree mapping for hmr of things that have their own dependency resolvers (eg. sass and pcss)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]