ribcage-preview
v3.12.0
Published
Run a preview server for a ribcage component
Downloads
13
Readme
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.