ok-cli
v2.0.0-28ok-cli
Hyperminimal dev server for React & MDX
- :zero: Zero config
- :headphones: No plugins
- 🧠Smart defaults
- :atom_symbol: Render React or MDX
- :fire: Blazing
npm i -g ok-cli
ok docs/hello.mdx
Using React
ok-cli will render the default exported component of a module.
// example App.js
import React from 'react'
export default props =>
<h1>Hello</h1>
ok docs/App.js
Using MDX
MDX is a superset of markdown, which lets you mix JSX with markdown syntax.
import Button from './Button'
# Markdown Heading
<Button>React Component</Button>
Layouts
MDX also supports layouts with React components. The default export in an MDX file will wrap the contents of the document.
// example Layout.js
import React from 'react'
export default ({ children }) =>
<div
style={{
padding: 32,
maxWidth: 768,
margin: 'auto'
}}>
{children}
</div>
import Layout from './Layout'
export default Layout
# Hello
Components
ok-cli has built-in support for customizing the components used in MDX.
Export a named components
object from the MDX document to customize the MDX markdown components.
// example components.js
import React from 'react'
export default {
h1: props => <h1 {...props} style={{ color: 'tomato' }} />
}
export { default as components } from './components'
# Hello
Options
--port
,-p
Port for the dev server--no-open
Prevent opening in default browser
Node API
const start = require('ok-cli')
const options = {
entry: './src/App.js'
}
start(options)
.then(({ app, middleware, port }) => {
console.log('listening on port:', port)
})
MIT License
npm i [email protected]
Metadata
- MIT
- Whatever
- Brent Jackson
- released 6/13/2018