Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
  1. Download zip.
  2. npm install.
  3. npm start.
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './test';
ReactDOM.render(React.createElement(Test), document.getElementById('app'));
<!DOCTYPE html>
<meta charset="UTF-8">
<title>JSPM + React + hotreload</title>
<div id="app"></div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
System.trace = true;
System.import('capaj/systemjs-hot-reloader').then(function (HotReloader) {
new HotReloader.default('http://localhost:5776');
}).then(function () {
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"chokidar-socket-emitter": "^0.4.2",
"http-server": "^0.8.5",
"jspm": "^0.16.26",
"npm-run-all": "^1.5.1"
"jspm": {
"dependencies": {
"capaj/systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.5",
"react": "npm:react@^0.14.7",
"react-dom": "npm:react-dom@^0.14.7"
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
"scripts": {
"postinstall": "jspm i -y",
"server": "http-server -c-1 -o",
"hotreload": "chokidar-socket-emitter",
"start": "npm-run-all --parallel server hotreload"
import React from 'react';
class Test extends React.Component {
constructor() {
this.state = {
text: 'World'
render() {
return <p>Hello, {this.state.text}!</p>;
export default Test;

This comment has been minimized.

Copy link

kwesterfeld commented Feb 15, 2016

I have been using this and adapting for my app. I found that if you add -c-1 to http-server you don't have to muck with the browser cache. I think you should add that to http-server.

I also use http-server --proxy to send REST requests to my back end. It's almost working perfectly now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.