react-component-server
v1.0.0
Published
A lib that makes serverside rendering of components easier
Downloads
6
Readme
React Component Server
A small lib that wraps express to allow for simple serving of react components.
Usage
Creating Server
To create a new React Component Server call the create method
const ReactComponentServer = require('react-component-server')
const componentServer = ReactComponentServer.create({
// ... options
})Component Server Options
{
// pass an http server instead of creating a new one
server: server,
// relative path to components dir
componentsDir: './components',
// relative path to templates dir
templatesDir: './templates',
// set of defaults to use
defaults: {
// flag to create a browserify bundle of component
bundle: true
// default component
component: './App.js', // ./components/App.js
// default props to pass to component
props: {},
// the template for the component
template: './template.js' // ./templates/template.js
}
}Creating routes
componentServer.get('/', function(res, req, done) {
const query = req.query || {}
// pass options to done same as defaults
done({
component: './Explore.js',
props: {query},
template: './explore-template.js'
})
})
// or you can just pass an Object
componentServer.get('/about', {component: './About.js'})
// or just use defaults
componentServer.get('/foo')Listening on Port
// pretty much a proxy for express's listen method
componentServer.listen(3000)
// or you could just listen with the passed express appBrowserify bundles
To allow your component to be ran both client and server side you can create a bundle for it. There is a bit more configuration but is worth it.
Specify route needs bundle
componentServer.get('/bar', {
bundle: true,
template: './layout-bundle.js',
component: './Bar.js'
})next you will need to inject that bundle and start it in the layout. Here is a example of what a simple layout that includes a bundle would look like.
const React = require('react')
const {safeStringify} = require('react-component-server') // util to strip <scripts>
const template = (ComponentString, {props, meta}) => {
return (
<html>
<body>
<div id='app' dangerouslySetInnerHTML={{
__html: ComponentString
}} />
<script src={meta.bundlePath} />
<script dangerouslySetInnerHTML={{
__html: `
var React = require('react')
var ReactDOM = require('react-dom')
var App = require('${meta.bundleExpose}')
ReactDOM.render(
React.createElement(App, ${safeStringify(props)}),
document.getElementById('app')
);
`
}} />
</body>
</html>
)
}
module.exports = templateWhat this project needs help with
- external cacheing of html, and bundles
- remove dependency on express
- catching more error states
- more test
- feedback!