├── .gitignore ├── index.js ├── gulpfile.js ├── assets ├── scripts │ └── bootstrap.js └── styles │ └── index.less ├── index.ls ├── views └── layout.jade ├── components ├── list-item.ls ├── index.ls ├── app0.ls └── app1.ls ├── routes └── index.ls ├── app.ls ├── lib └── react-view-engine.ls ├── package.json ├── gulpfile.ls └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | /public 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('LiveScript'); 2 | require('./index.ls'); 3 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('LiveScript'); 2 | require('./gulpfile.ls'); 3 | -------------------------------------------------------------------------------- /assets/scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | require('./components/index.ls').start(); 2 | -------------------------------------------------------------------------------- /index.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | ./app 3 | ]> 4 | 5 | global import require 'prelude-ls' unless fold? 6 | 7 | # when running under iisnode, process.env.PORT is a named pipe ... 8 | server = app.listen (process.env.PORT or 3000), -> 9 | console.log "Express server listening at #{JSON.stringify server.address!}" 10 | -------------------------------------------------------------------------------- /views/layout.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html( 3 | data-props=JSON.stringify(props) 4 | ) 5 | head 6 | meta(charset='utf-8') 7 | title=title 8 | link(href='/styles/index.css' rel='stylesheet' type='text/css' media='all') 9 | body 10 | #content(class=component)!=content 11 | script(src='/scripts/index.js') 12 | script(src='/scripts/bootstrap.js') 13 | -------------------------------------------------------------------------------- /assets/styles/index.less: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | li { 6 | margin: 10px; 7 | a { 8 | color: white; 9 | text-decoration: none; 10 | } 11 | } 12 | } 13 | .red { 14 | background-color: red; 15 | } 16 | 17 | .blue { 18 | background-color: blue; 19 | } 20 | 21 | .green { 22 | background-color: green; 23 | } 24 | -------------------------------------------------------------------------------- /components/list-item.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | react 3 | ]> 4 | 5 | {li, a} = react.DOM 6 | 7 | module.exports = react.create-class do 8 | display-name: 'List-Item' 9 | render: -> 10 | @transfer-props-to li do 11 | class-name: <[red blue]>[@props.app] 12 | a do 13 | href: "/app#{@props.app}/#{@props.page}" 14 | "#{@props.page} in App#{@props.app}" 15 | -------------------------------------------------------------------------------- /routes/index.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | express 3 | react 4 | ]> 5 | 6 | module.exports = routes = express.Router! 7 | 8 | base-props = (req, res, next) -> 9 | res.locals.{}props.base = true; 10 | next! 11 | 12 | routes.get '/:app/:page' base-props, (req, res) -> 13 | res.locals.title = "App #{req.params.app}" 14 | 15 | res.render req.params.app, 16 | props: 17 | page: req.params.page 18 | -------------------------------------------------------------------------------- /components/index.ls: -------------------------------------------------------------------------------- 1 | require! 'react' 2 | 3 | get = document.document-element~get-attribute 4 | props-json = get 'data-props' 5 | props = JSON.parse props-json if props-json 6 | 7 | components = 8 | # needed for browserify's static analysis 9 | 'app0': -> require './app0.ls' 10 | 'app1': -> require './app1.ls' 11 | 12 | exports.start = -> 13 | mount-point = document.get-element-by-id \content 14 | if mount-point? 15 | component = components[mount-point.className]! 16 | instance = component props 17 | react.render-component instance, mount-point 18 | -------------------------------------------------------------------------------- /components/app0.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | ./list-item.ls 3 | page 4 | react 5 | ]> 6 | 7 | {div, h1, ul} = react.DOM 8 | 9 | module.exports = react.create-class do 10 | display-name: 'App0' 11 | get-initial-state: -> 12 | page: @props.page 13 | component-did-mount: -> 14 | page '/app0/:page' ~> @set-state page: it.params.page 15 | page.start! 16 | render: -> 17 | div null, 18 | h1 null, "app0 #{@state.page}" 19 | ul null, 20 | list-item app: 0, page: 'page1' 21 | list-item app: 0, page: 'page2' 22 | list-item app: 1, page: 'page1' 23 | list-item app: 1, page: 'page2' 24 | -------------------------------------------------------------------------------- /components/app1.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | ./list-item.ls 3 | page 4 | react 5 | ]> 6 | 7 | {div, h1, ul} = react.DOM 8 | 9 | module.exports = react.create-class do 10 | display-name: 'App1' 11 | get-initial-state: -> 12 | page: @props.page 13 | component-did-mount: -> 14 | page '/app1/:page' ~> @set-state page: it.params.page 15 | page.start! 16 | render: -> 17 | div null, 18 | h1 null, "app1 #{@state.page}" 19 | ul null, 20 | list-item app: 0, page: 'page1' 21 | list-item app: 0, page: 'page2' 22 | list-item app: 1, page: 'page1' 23 | list-item app: 1, page: 'page2' 24 | -------------------------------------------------------------------------------- /app.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | ./lib/react-view-engine 3 | ./routes 4 | body-parser 5 | express 6 | jade 7 | fs 8 | path 9 | ]> 10 | 11 | app = express! 12 | 13 | app.use express.static path.join __dirname, 'public' 14 | app.use body-parser.json! 15 | app.locals.title = 'xx' 16 | 17 | is-dev = (app.get 'env') is 'development' 18 | 19 | app.set 'views', path.join __dirname, 'components' 20 | app.set 'view engine', 'ls' 21 | app.engine 'ls' react-view-engine do 22 | layout: jade.compile do 23 | fs.read-file-sync do 24 | path.join __dirname, 'views/layout.jade' 25 | 'utf8' 26 | 27 | app.use routes 28 | 29 | module.exports = app 30 | -------------------------------------------------------------------------------- /lib/react-view-engine.ls: -------------------------------------------------------------------------------- 1 | require! <[ 2 | react 3 | path 4 | ]> 5 | 6 | module.exports = (options) -> 7 | options = options or {} 8 | 9 | (view, locals, callback) -> 10 | view-file-name = path.relative locals.settings.views, view 11 | locals.component = view-file-name - ".#{locals.settings['view engine']}" 12 | locals.props = locals._locals.{}props import locals.props 13 | delete locals._locals 14 | delete locals.cache 15 | delete locals.settings 16 | 17 | try 18 | Component = require view 19 | locals.content = 20 | react.render-component-to-string new Component locals.props 21 | 22 | callback null, options.layout locals 23 | catch e 24 | console.error e.stack 25 | callback new Error 'Could not require component: ' + view 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-isomorphic", 3 | "version": "0.1.0", 4 | "description": "example isomorphic app using react.js", 5 | "dependencies": { 6 | "LiveScript": "^1.2.0", 7 | "bluebird": "^2.1.3", 8 | "body-parser": "^1.4.3", 9 | "express": "^4.4.4", 10 | "jade": "^1.3.1", 11 | "page": "git+https://github.com/redbadger/page.js", 12 | "prelude-ls": "^1.1.1", 13 | "react": "^0.10.0", 14 | "superagent": "^0.18.0" 15 | }, 16 | "devDependencies": { 17 | "browserify": "4.2.3", 18 | "envify": "~1.2", 19 | "gulp": "", 20 | "gulp-less": "", 21 | "gulp-util": "", 22 | "liveify": "", 23 | "supervisor": "", 24 | "uglifyify": "", 25 | "vinyl-source-stream": "", 26 | "watchify": "0.10.2" 27 | }, 28 | "scripts": { 29 | "debug": "NODE_ENV=development supervisor --debug -i node_modules -e ls,json lsc index", 30 | "prod": "NODE_ENV=production lsc index", 31 | "start": "NODE_ENV=development supervisor -i node_modules -e ls,json lsc index", 32 | "test": "echo \"Error: no test specified\" && exit 1" 33 | }, 34 | "main": "index.js", 35 | "repository": { 36 | "type": "git", 37 | "url": "https://github.com/redbadger/react-isomorphic.git" 38 | }, 39 | "keywords": [ 40 | "react", 41 | "isomorphic", 42 | "express" 43 | ], 44 | "author": "stuart.harris@red-badger.com", 45 | "license": "WTFPL", 46 | "bugs": { 47 | "url": "https://github.com/redbadger/react-isomorphic/issues" 48 | }, 49 | "homepage": "https://github.com/redbadger/react-isomorphic" 50 | } 51 | -------------------------------------------------------------------------------- /gulpfile.ls: -------------------------------------------------------------------------------- 1 | #LiveScript gulp file 2 | require! <[ 3 | browserify 4 | envify 5 | gulp 6 | gulp-less 7 | gulp-util 8 | liveify 9 | uglifyify 10 | vinyl-source-stream 11 | watchify 12 | path 13 | ]> 14 | 15 | is-dev = process.env.NODE_ENV isnt "production" 16 | 17 | gulp.task 'styles' -> 18 | gulp.src 'assets/styles/index.less' 19 | .pipe gulp-less! 20 | .on 'error' gulp-util.log 21 | .pipe gulp.dest 'public/styles/' 22 | 23 | gulp.task 'copy-scripts' -> 24 | gulp.src 'assets/scripts/**/*.js' 25 | .pipe gulp.dest 'public/scripts' 26 | 27 | get-bundler = (instance) -> 28 | bundler = instance do 29 | cache: {} 30 | debug: is-dev 31 | full-paths: yes 32 | package-cache: {} 33 | bundler.transform liveify 34 | unless is-dev 35 | bundler.transform envify 36 | bundler.transform global: true, uglifyify 37 | bundler.add do 38 | path.resolve 'components/index.ls' 39 | entry: yes 40 | 41 | build-config = 42 | debug: is-dev 43 | 44 | update = (bundler) -> 45 | gulp-util.log 'Bundling' 46 | bundler.bundle! 47 | .on 'error' gulp-util.log 48 | .on 'end' -> gulp-util.log 'Bundle complete' 49 | .pipe vinyl-source-stream 'index.js' 50 | .pipe gulp.dest 'public/scripts/' 51 | 52 | gulp.task 'browserify' -> browserify |> get-bundler |> update 53 | 54 | gulp.task 'watch' -> 55 | gulp.watch 'assets/styles/index.less' ['styles'] 56 | watch = browserify |> get-bundler |> watchify 57 | watch.on 'update' -> update watch 58 | update watch 59 | 60 | gulp.task 'default' ['copy-scripts' 'styles' 'browserify'] 61 | gulp.task 'dev' ['copy-scripts' 'styles' 'watch'] 62 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | React Isomorphic 2 | --- 3 | This is an experimental playground to try and find unobtrusive patterns that might help while building isomorphic web applications using [Facebook React](http://facebook.github.io/react/). 4 | 5 | It supports server-side and client-side rendering of react components. Render a page server-side and carry on client-side. Refresh a client-side route and have the server render the page. Deep link into your application at any point and have the server render the first page. Create your site from many 'single-page-applications', all seamlessly running side-by-side. Great for SEO, non-javascript environments and fast page loading with no app startup delay. 6 | 7 | Please feel free to use anything you find here, and to contribute ideas by forking the repository and submitting pull requests. 8 | 9 | Example 10 | --- 11 | 12 | ###Server-side 13 | Included is an embryonic view engine for express [lib/react-view-engine.ls](lib/react-view-engine.ls) which allows us to `res.render` a react component into a single jade view [views/layout.jade](views/layout.jade): 14 | 15 | (from [routes/index.ls](routes/index.ls)) 16 | 17 | ``` livescript 18 | routes.get '/' (req, res) -> 19 | res.locals.title = "Title" 20 | 21 | # render a react component (components/my-react-component.ls) 22 | props = is-experimental: true 23 | res.render 'my-react-component' props: props 24 | ``` 25 | 26 | Plug the view engine into express, specifying a template function for the layout: 27 | 28 | (from [app.ls](app.ls)) 29 | 30 | ``` livescript 31 | app.set 'views', path.join __dirname, 'components' 32 | app.set 'view engine', 'ls' 33 | app.engine 'ls' react-view-engine do 34 | layout: jade.compile do 35 | fs.read-file-sync do 36 | path.join __dirname, 'views/layout.jade' 37 | 'utf8' 38 | ``` 39 | 40 | ###Client-side 41 | The relevant page's components are rendered again client-side with access to the same props, which have been serialized into a `data-props` attribute on the document element. React determines from the checksum that it doesn't need to update the DOM. If you have client-side routes declared you can carry on client-side. If you have server-side routes that match, you can refresh a client page and have the server render it for you. 42 | 43 | (from [components/index.ls](components/index.ls)) 44 | 45 | ``` livescript 46 | require! 'react' 47 | 48 | get = document.document-element~get-attribute 49 | props-json = get 'data-props' 50 | props = JSON.parse props-json if props-json 51 | 52 | components = 53 | # needed for browserify's static analysis 54 | 'app0': -> require './app0.ls' 55 | 'app1': -> require './app1.ls' 56 | 57 | exports.start = -> 58 | mount-point = document.get-element-by-id \content 59 | if mount-point? 60 | component = components[mount-point.className]! 61 | instance = component props 62 | react.render-component instance, mount-point 63 | ``` 64 | 65 | A word about LiveScript 66 | -- 67 | Most people use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) with React in an attempt to make the markup more HTML-like and therefore designer-friendly. In our experience, designers are clever people who don't like being patronised :-) [LiveScript](http://livescript.net/) is easy to learn and makes for beautiful react components: 68 | 69 | ``` livescript 70 | tabs = react.create-class do 71 | display-name: 'Tabs' 72 | render: -> 73 | ul class-name: 'tabs', 74 | li do 75 | class-name: class-set do 76 | left: true 77 | active: @props.color is 'red' 78 | a href: @format-url 'red', 'Red' 79 | li do 80 | class-name: class-set do 81 | right: true 82 | active: @props.color is 'blue' 83 | a href: @format-url 'blue', 'Blue' 84 | ``` 85 | We make no apology for using LiveScript throughout this project. Its functional qualities are inherited from Haskell, which alone is a great reason to use it! But if you have a strong opinion either way then please raise an issue. 86 | 87 | Building and running 88 | -- 89 | First install LiveScript and Gulp: 90 | 91 | ```sh 92 | npm install -g LiveScript gulp 93 | ``` 94 | Install using `npm` or `git clone` 95 | 96 | ```sh 97 | npm install react-isomorphic . 98 | cd node_modules/react-isomorphic 99 | ``` 100 | 101 | or 102 | 103 | ```sh 104 | git clone git@github.com:redbadger/react-isomorphic.git 105 | cd react-isomorphic 106 | npm install 107 | ``` 108 | 109 | Then build client-side assets (uses [browserify](http://browserify.org/) to bundle the compiled JavaScript) and run. 110 | 111 | ```sh 112 | gulp 113 | lsc . 114 | ``` 115 | 116 | You can rebuild automatically when files change by using `gulp dev`. 117 | 118 | If you use `npm start` instead of `lsc .` it will run under [supervisor](https://github.com/isaacs/node-supervisor), restarting the app when files are changed. 119 | 120 | Navigate to [http://localhost:3000/app0/page1](http://localhost:3000/app0/page1) 121 | 122 | License 123 | -- 124 | React Isomorphic is licensed under the permissive [WTFPL](http://www.wtfpl.net/) license. 125 | 126 | Contributing 127 | -- 128 | Please contribute code, comments, issues, suggestions and ideas. Even better, fork the repo and submit pull requests. 129 | --------------------------------------------------------------------------------