ribcage-preview

Preview a UI component. Runs an atomify preview server with live reloading, server-side rendering (for react components), and react-router support.

Install

npm install -g ribcage-preview

Usage

ribcage-preview <dir>

<dir> should be the directory of the component you want to preview.

open http://localhost:4001/default

This URL will livereload on every file change, and load in the compiled entry.js and entry.css.

Expected directory structure

Create an example folder in your <dir> with an entry.js and an entry.css and optionally an entry.html and data.js files.

- index.{js,jsx}
- index.css
- example/
    - entry.{js,jsx}
    - entry.css
    - [data.{js,json}]
    - [entry.html]

React Support

.jsx files are also recognized. If the index file is .jsx, client-side JS will be off by default unless you pass a s or --client-jsx flag. The index.jsx file is always rendered by the server and the results appended to <div id=app>. Your example/entry.jsx is the client-side entry for browserify. It should render into the same div.

If you specify React.documentHead = {title: 'my title'}, the <title> tag will be set on the server. You might like a pattern like this:

import React from 'react'
import setHead from 'react-document-head'
 
class A extends React.Component {
  render () {
    setHead({title: 'my sparky page'})
    return <div />
  }
}

Flags

--no-debug

You can disable sourcemaps with --no-debug

--client-jsx or --s

If the entry file is .jsx, client-side js will not be served unless this flag is passed. react needs to be installed in node_modules in the cwd.

--react-router or -r

If passed, the index file should pass a routes object for react-router instead of a component. This turns on spaMode so that both the server and the client render the same routes. react-router needs to be installed node_modules in cwd.

--autoprefix=false

true by default. Allows you to turn of autoprefixing for CSS.

Providing data to server-side jsx

If you have an example/entry.jsx file, it's rendered on the client for you. If you want to provide data to this client on the server, put in a example/data.json or example/data.js. This object will get passed as props to the react component by the server. You're responsible for passing this object to your component on the client.