okdistribute/client.js

## client.js
const choo = require('choo')

const mainView = require('./main')

const app = choo()

app.model({
  namespace: 'message',
  state: {
    server: 'rehydration has kicked in, server data was tossed',
    client: 'hello client!'
  }
})

app.router((route) => [
  route('/', mainView)
])

if (module.parent) {
  module.exports = app
} else {
  app.start('#app-root')
}

## main.js
const assert = require('assert')
const html = require('choo/html')

module.exports = function (state, prev, send) {
  const serverMessage = state.message.server
  const clientMessage = state.message.client

  assert.equal(typeof serverMessage, 'string', 'server should be a string')
  assert.equal(typeof clientMessage, 'string', 'client should be a string')

  return html`
    <div id="whats">
      <svg>
        <use xlink:href="#daticon-create-new-dat" />
      </svg>
      <h1>server message: ${serverMessage}</h1>
      <h1>client message: ${clientMessage}</h1>
      <p>${`
        The first message is passed in by the server on compile time,
        the second message was set by the client.
        The more static the data you pass in, the more cachable your site
        becomes (and thus performant). Try and keep the amount of properties
        you pass in on the server to a minimum for most applications - it'll
        make life a lot easier in the long run, hah.
      `}</p>
    </div>
  `
}

## package.json
{
  "name": "http",
  "private": true,
  "main": "client.js",
  "scripts": {
    "start": "NODE_ENV=development node server.js"
  },
  "dependencies": {
    "bankai": "^2.0.2",
    "bl": "^1.1.2",
    "browserify": "^13.0.1",
    "dat-design": "^1.4.2",
    "hyperstream": "^1.2.2",
    "server-router": "^2.1.0"
  }
}

## page.js
const fs = require('fs')
const svgSprite = fs.readFileSync('./node_modules/dat-design/public/svg/sprite.svg', 'utf-8')

module.exports = function (content) {
  return `<body>
    <section id="app-root">
    ${content}
    ${svgSprite}
    </section>
  </body>
  `
}

## server.js
const serverRouter = require('server-router')
const hyperstream = require('hyperstream')
const browserify = require('browserify')
const bankai = require('bankai')
const http = require('http')

const PORT = 8080
const client = require('./client')
const page = require('./page.js')

// If an incoming request accepts "text/html", render the
// appropriate HTML. Else use the API server
const apiRouter = createRouter()
const server = http.createServer(function (req, res) {
  if (/text\/html/.test(req.headers.accept)) handleHtml(req, res)
  else apiRouter(req, res)
})
server.listen(PORT, () => process.stdout.write(`listening on port ${PORT}\n`))

// create a new router
// null -> fn
function createRouter () {
  const apiRouter = serverRouter('/404')

  apiRouter.on('/404', (req, res) => res.end('404 not found'))
  apiRouter.on('/', (req, res) => res.end('nothing to be found here'))

  const js = bankai.js(browserify, require.resolve('./client.js'))
  apiRouter.on('/bundle.js', (req, res) => js(req, res).pipe(res))

  return apiRouter
}

// render the client to string
// based on the requested url
// (obj, obj) -> null
const createIndex = bankai.html({ favicon: false, css: false })
function handleHtml (req, res) {
  res.setHeader('Content-Type', 'text/html; charset=utf-8')

  const state = { message: { server: 'hello server!' } }
  const inner = client.toString(req.url, state)
  res.end(page(inner))
}
	const choo = require('choo')

	const mainView = require('./main')

	const app = choo()

	app.model({
	namespace: 'message',
	state: {
	server: 'rehydration has kicked in, server data was tossed',
	client: 'hello client!'
	}
	})

	app.router((route) => [
	route('/', mainView)
	])

	if (module.parent) {
	module.exports = app
	} else {
	app.start('#app-root')
	}
	const assert = require('assert')
	const html = require('choo/html')

	module.exports = function (state, prev, send) {
	const serverMessage = state.message.server
	const clientMessage = state.message.client

	assert.equal(typeof serverMessage, 'string', 'server should be a string')
	assert.equal(typeof clientMessage, 'string', 'client should be a string')

	return html`
	<div id="whats">
	<svg>
	<use xlink:href="#daticon-create-new-dat" />
	</svg>
	<h1>server message: ${serverMessage}</h1>
	<h1>client message: ${clientMessage}</h1>
	<p>${`
	The first message is passed in by the server on compile time,
	the second message was set by the client.
	The more static the data you pass in, the more cachable your site
	becomes (and thus performant). Try and keep the amount of properties
	you pass in on the server to a minimum for most applications - it'll
	make life a lot easier in the long run, hah.
	`}</p>
	</div>
	`
	}
	{
	"name": "http",
	"private": true,
	"main": "client.js",
	"scripts": {
	"start": "NODE_ENV=development node server.js"
	},
	"dependencies": {
	"bankai": "^2.0.2",
	"bl": "^1.1.2",
	"browserify": "^13.0.1",
	"dat-design": "^1.4.2",
	"hyperstream": "^1.2.2",
	"server-router": "^2.1.0"
	}
	}
	const fs = require('fs')
	const svgSprite = fs.readFileSync('./node_modules/dat-design/public/svg/sprite.svg', 'utf-8')

	module.exports = function (content) {
	return `<body>
	<section id="app-root">
	${content}
	${svgSprite}
	</section>
	</body>
	`
	}
	const serverRouter = require('server-router')
	const hyperstream = require('hyperstream')
	const browserify = require('browserify')
	const bankai = require('bankai')
	const http = require('http')

	const PORT = 8080
	const client = require('./client')
	const page = require('./page.js')

	// If an incoming request accepts "text/html", render the
	// appropriate HTML. Else use the API server
	const apiRouter = createRouter()
	const server = http.createServer(function (req, res) {
	if (/text\/html/.test(req.headers.accept)) handleHtml(req, res)
	else apiRouter(req, res)
	})
	server.listen(PORT, () => process.stdout.write(`listening on port ${PORT}\n`))

	// create a new router
	// null -> fn
	function createRouter () {
	const apiRouter = serverRouter('/404')

	apiRouter.on('/404', (req, res) => res.end('404 not found'))
	apiRouter.on('/', (req, res) => res.end('nothing to be found here'))

	const js = bankai.js(browserify, require.resolve('./client.js'))
	apiRouter.on('/bundle.js', (req, res) => js(req, res).pipe(res))

	return apiRouter
	}

	// render the client to string
	// based on the requested url
	// (obj, obj) -> null
	const createIndex = bankai.html({ favicon: false, css: false })
	function handleHtml (req, res) {
	res.setHeader('Content-Type', 'text/html; charset=utf-8')

	const state = { message: { server: 'hello server!' } }
	const inner = client.toString(req.url, state)
	res.end(page(inner))
	}