❤
npm
Sign UpSign In

react-component-server

1.0.0 • Public • Published

React Component Server

Build Status

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 app

Browserify 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 = template

What this project needs help with

  • external cacheing of html, and bundles
  • remove dependency on express
  • catching more error states
  • more test
  • feedback!

Readme

Keywords

Package Sidebar

Install

npm i react-component-server

Repository

github.com/jcblw/react-component-server

Homepage

github.com/jcblw/react-component-server#readme

Weekly Downloads

0

Version

1.0.0

License

ISC

Last publish

Collaborators

  • ~jcblw
Try on RunKit
Report malware