Skip to content
<awesome-gh-repos>
vic

spikebrehm/isomorphic-tutorial

Tutorial app to demonstrate isomorphic JavaScript concepts.
Source code at GitHub null
spikebrehm/isomorphic-tutorial.json
{
  "createdAt": "2013-10-28T03:56:36Z",
  "defaultBranch": "master",
  "description": "Tutorial app to demonstrate isomorphic JavaScript concepts.",
  "fullName": "spikebrehm/isomorphic-tutorial",
  "homepage": null,
  "language": "JavaScript",
  "name": "isomorphic-tutorial",
  "pushedAt": "2016-03-29T16:58:52Z",
  "stargazersCount": 1336,
  "topics": [],
  "updatedAt": "2025-10-30T05:41:09Z",
  "url": "https://github.com/spikebrehm/isomorphic-tutorial"
}

Isomorphic JavaScript Tutorial

Section titled “Isomorphic JavaScript Tutorial”

This is a small sample app built to demonstrate isomorphic JavaScript concepts.

Overview

Section titled “Overview”

Here we’ve built the minimum-viable example of an isomorphic JavaScript app: an app that can run on both client and server. Check out my blog post on isomorphic JavaScript for some background.

This is a simple Express “blog” app that lists blog posts. Each page is fully rendered on the server, however upon subsequent navigation, we use the HTML5 History API, aka pushState, to fetch the data for that page from the API and render the HTML client-side using React.

Under the hood

Section titled “Under the hood”

We combine a few modules together to build an isomorphic JavaScript app. Each of these modules was built to support both the client and the server, and by creating some small shims around them, we can abstract out the differences to create the same API for both client and server.

We use the following modules on both client and server:

On top of a basic Express app.

We use Browserify and Grunt to package our server-side CommonJS modules in a way that allows us to use them in the client-side.

Getting it running

Section titled “Getting it running”

Install Node.js >= 0.10.x

Section titled “Install Node.js >= 0.10.x”

If Node.js version >= 0.10.x is not already installed on your system, install it so you can run this app.

Check if it’s installed

Section titled “Check if it’s installed”

The command which node will return a path to your installed version of Node.js, if it exists on your system.

$ which node
/usr/local/bin/node

If it is installed, make sure it’s >= 0.10.x.

$ node --version
v0.10.33

To install

Section titled “To install”
Mac
Section titled “Mac”

Preferably install using Homebrew:

$ brew install node
Else
Section titled “Else”

Otherwise, go to the nodejs.org and download the binary to install on your system.

Install grunt-cli

Section titled “Install grunt-cli”

This app uses Grunt to build its assets. To run Grunt, we need to install the grunt-cli package globally on your system using NPM.

$ npm install -g grunt-cli

Clone this repo onto your machine

Section titled “Clone this repo onto your machine”
$ cd ~/code
$ git clone git@github.com:spikebrehm/isomorphic-tutorial.git
$ cd isomorphic-tutorial

Run npm install to install dependenices

Section titled “Run npm install to install dependenices”
$ npm install
npm http GET https://registry.npmjs.org/superagent
npm http GET https://registry.npmjs.org/handlebars
npm http GET https://registry.npmjs.org/director
...

Run the app!

Section titled “Run the app!”

We’ll start up our local Node.js web server using Grunt, so it can automatically do useful things for us when we change files like recompile our assets and restart the server.

$ grunt server

This will start our local web server on port 3030.

You can view it in your web browser at http://localhost:3030/

Adding features

Section titled “Adding features”

Now that you’ve got it running, you can start adding some features to get to know the problem space better.

We’ve got some branches you can check out that show how to add certain features.

Adding the Moment library for date formatting

Section titled “Adding the Moment library for date formatting”

compare to master

This branch adds the Moment date formatting library for use on the /posts/:id page.

Use Marked library to add Markdown to posts

Section titled “Use Marked library to add Markdown to posts”

compare to master

This branch adds the Marked library to allow formatting of blog post bodies in Markdown, in just a few lines of code.

Create a route for adding posts

Section titled “Create a route for adding posts”

compare to master

Create a page with a form at /posts/new, which POSTs to the /api/posts.json endpoint.

License

Section titled “License”

MIT