Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Hot reloading with React + RequireJS
define(['require'],function(require){ // 'require' is a reserved dependency keyword in RequireJS
var module = require('someModule'); //if we know for sure that someModule is already loaded, then we can load it here synchrounously
var gulp = require('gulp');
var socketio = require('');
var EE = require('events').EventEmitter;
var react = require('gulp-react');
var io = socketio.listen('3002', function (err, msg) {
if (err) {
io.on('connection', function (socket) {
console.log('a client connected');
socket.on('disconnect', function () {
console.log('a client disconnected');
});'./public/static/app/js/views/**/*.js').on('change', function (file) {
var reconciledPath = reconcilePathForRequireJS(file); //you need to do some work to reconcile RequireJS paths with your front-end app
var ee = transpileJSX();
ee.on('error', function (err) {
io.sockets.emit('.jsx transform error', JSON.stringify(err))
ee.on('end', function () {
io.sockets.emit('hot-reload (.jsx)', reconciledPath);
function transpileJSX() {
var ee = new EE();
.pipe(react({harmony: false})).on('error', function (err) { //we absolutely need error handling, so front-end doesn't croak if we make mistakes writing our JSX
.pipe(gulp.dest('./public/static/app/js/jsx')).on('error', function (err) {
}).on('end', function () {
return ee;
define(function () {
function hotReloadSimple(item, callback) {
require.undef(item); // nullifies module identified by string 'item'
require([item], function (module) { //RequireJS will now look on the filesystem for the module of the same name since it no longer exists in the browser runtime
callback(null, module);
return {
function (io, collections, allCSS, hotReload, cssAdder) {
var socketHotReload = null;
function getConnection() {
if (socketHotReload == null) {
socketHotReload = io.connect('');
//you should implement io.on 'error', on 'connect' and on 'disconnect' etc
socketHotReload.on('.jsx transform error', function (data) {
throw new Error(data)); //you need to implement window.onerror to prevent error from crashing front-end
socketHotReload.on('hot-reload (.jsx)', function (data) {
var filename = reconcilePath(data); //you need to implement reconcilePath
require(['#allViews'],function(allViews){ //I have a module '#allViews' that contains all my front-end views
allViews[filename] = result;
Backbone.history.loadUrl(Backbone.history.fragment); //reload the current page (don't need to worry about any other pages)
return socketHotReload;
return {
getConnection: getConnection,
// RequireJS loads all dependencies outline in the config file before starting the app, this allows us to predefine certain dependences so that we can later use *synchronous* require calls
// the synchronous require calls will allow us to do hot reloading with React and Backbone
enforceDefine: false,
waitSeconds: 6,
baseUrl: '/static', //Node.js Express server makes the public folder basically into the root, so we start at 'static' as in public/static/*
paths: {
'async': 'vendor/async',
'jquery': 'vendor/jquery',
'ejs': 'vendor/ejs',
'flux': 'vendor/Flux',
'text': 'vendor/text', //important RequireJS plugin for text files CSS & HTML templates
'underscore': 'vendor/underscore-min',
'backbone': 'vendor/backbone',
'bootstrap': 'vendor/bootstrap',
'socketio': 'vendor/socketio',
'events': 'vendor/events-amd',
'#patches': 'app/js/patches',
'#allTemplates': 'app/js/meta/allTemplates',
'#allViews': 'app/js/meta/allViews',
'#allModels': 'app/js/meta/allModels',
'#allCollections': 'app/js/meta/allCollections',
'#appState': 'app/js/appState', //the # syntax is my own to identify that it's my own module and a singleton
'#viewState': 'app/js/viewState',
'#allControllers': 'app/js/meta/allControllers',
'#allDispatchers': 'app/js/meta/allDispatchers',
'#BaseCollection': 'app/js/collections/BaseCollection',
'@AppDispatcher': 'app/js/flux/dispatcher/AppDispatcher',
'#allCSS': 'app/js/meta/allCSS',
'#allFluxActions': 'app/js/meta/allFluxActions',
'#allFluxConstants': 'app/js/meta/allFluxConstants',
'#SuperController' : 'app/js/controllers/SuperController'
'shim': {
'underscore': {
'exports': '_'
'backbone': {
'deps': ['jquery', 'underscore'],
'exports': 'Backbone'
'handlebars': {
'exports': 'Handlebars'
ejs: {
exports: "ejs"
require(['app/js/application'], function (Application) {
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.