Notes using React + Exoskeleton
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Notes - React + Exoskeleton

Build Status

A version of Notes written using React and CommonJS, built with Webpack. Test out the LocalStorage version at:


Notes is now client-side and server-side rendered thanks to the magic of React. The app uses:

  • React for view logic.
  • Exoskeleton for models, collections and routers.
  • Markdown JS for markdown conversion.
  • Bootstrap for CSS (not JS).
  • HTML5Shiv, ES5 shim + sham for polyfills.
  • Standalone $.ajax replacement.

Notably, the app does not include:

  • Bootstrap JS
  • jQuery
  • Underscore/Lodash

Instead relying on React to mostly take care of DOM work with a little bit of VanillaJS.

Development (REST)

This section is for the convention (REST) server, with a real backend.

Dev Mode

Install, setup.

$ npm install
$ node scripts/init-db.js

Run the watchers, dev and source maps servers

$ gulp dev

URLS to test things out:

  • Server-side bootstrap, JS takes over.
  • Pure JS.
  • Pure server-side. Note that while some links may work (e.g. clicking on a note title in list), many things do not since there are absolutely no JS libraries. This is intended to just be a small demo of SEO / "crawlable" content.


Install, setup.

$ npm install --production
$ npm run-script build
$ node scripts/init-db.js

Run the server.

$ NODE_ENV=production node server/index.js

Development (LocalStorage)

For public, static GitHub pages branch (gh-pages), we post a different version of the app with the extra environment variable setting: BUILD_LOCALSTORAGE=true. This includes the additional Backbone.LocalStorage library in bundle.js, which we drive from a static, in-repo page, app.html.

To develop against the local storage version,

$ npm install
$ gulp ls

URLS to test things out:

  • Static web page served from our static sources server (same as is used for source maps).

The live URL pushed to gh-pages is available at:

React Notes


Production REST App: To test out how optimized the build is, here are some useful curl commands:

$ gulp prod

# Minified size
$ curl -so /dev/null -w '%{size_download}\n'

# Minified gzipped size
$ curl -so /dev/null -w '%{size_download}\n' --compressed

Demo LocalStorage Version: And minified, unzipped in LocalStorage version

$ npm run-script build-ls
$ gulp server:sources

# Minified size
$ curl -so /dev/null -w '%{size_download}\n'

Development REST App: And unminified, unzipped in dev (for a comparison):

$ gulp dev

# Unminified size
$ curl -so /dev/null -w '%{size_download}\n'