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
We use the following modules on both client and server:
- React (UI components)
- Director (routing)
- Superagent (HTTP requests)
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
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
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
Preferably install using Homebrew:
$ brew install node
Otherwise, go to the nodejs.org and download the binary to install on your system.
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
$ cd ~/code $ git clone email@example.com:spikebrehm/isomorphic-tutorial.git $ cd isomorphic-tutorial
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!
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
You can view it in your web browser at
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
This branch adds the Moment date formatting library for use on the
Use Marked library to add Markdown to posts
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
Create a page with a form at
/posts/new, which POSTs to the