https://github.com/lukehansell/isomorphic_demo

a presentation demo of an isomorphic app running server and client
https://github.com/lukehansell/isomorphic_demo

Last synced: about 1 month ago
JSON representation

a presentation demo of an isomorphic app running server and client

• Host: GitHub
• URL: https://github.com/lukehansell/isomorphic_demo
• Owner: lukehansell
• Created: 2015-05-14T12:02:23.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-12-01T16:33:45.000Z (about 8 years ago)
• Last Synced: 2023-02-28T00:26:26.158Z (almost 2 years ago)
• Language: JavaScript
• Size: 356 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#isomorphic demo

**tl;dr;** - clone this repo then run `npm start` and `open http://localhost:5000/slides/0`

## Intro

This repo is an example of an isomorphic javascript application.

It is also the presentation for my demo on isomorphic javascript.

Two birds, one stone.

## Running the demo

`npm start` will set everything off for you

then

`open http://localhost:5000/slides/0`

## How it works

- We use npm as the task runner.

- We use webpack as the bundler.

- We create on bundle from the `app/client.jsx` served on port 8080 from `public/js`.

- We create the css from `app/style/main.less`

- Client requires `app/app.jsx` and provides an easy access client side front to it.

- We use an express server to forward the routing to `app.js` which returns a React object.

- `app.js` uses React Router to do proper routing internally.

- We turn the React object into an html string on the server and inject it into a handlebars template.

- Express then sends this rendered template to the user.

- The template also includes a script tag for the `client.js` file.

- This loads over the top of the server rendered and takes over control of the page.