Skip to content
Notes using React + Exoskeleton
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit 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'
You can’t perform that action at this time.