| docs | ||
| examples | ||
| lib | ||
| test | ||
| .gitignore | ||
| .npmignore | ||
| .npmrc | ||
| .travis.yml | ||
| cli.js | ||
| index.js | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
x0
Zero-config React development environment and static site generator
npm install -g @compositor/x0
Features
- Zero-config
- Hot-loading development environment
- Works with virtually any React component*
- No confusing APIs
- Renders static HTML
- Renders JS bundles
- Works with CSS-in-JS libraries like styled-components and glamorous
- Automatic file system based routing
- Support for async data fetching
* Custom webpack configuration is required for components that rely on webpack-based features
Isolated development environment
x0 components
Options:
-o --open Open dev server in default browser
-p --port Custom port for dev server
-t --template Path to custom HTML template
--webpack Path to custom webpack configuration
x0 components -op 8080
Static Render
Render static HTML and client-side bundle
x0 build components
Render static HTML without bundle
x0 build components --static
Options
-d --out-dir Output directory (default dist)
-s --static Output static HTML without JS bundle
-t --template Path to custom HTML template
--webpack Path to custom webpack configuration
Fetching Data
Use the async getInitialProps static method to fetch data for static rendering.
This method was inspired by Next.js.
const App = props => (
<h1>Hello {props.data}</h1>
)
App.getInitialProps = async () => {
const fetch = require('isomorphic-fetch')
const res = await fetch('http://example.com/data')
const data = await res.json()
return { data }
}
CSS-in-JS
x0 supports server-side rendering for styled-components with zero configuration.
To enable CSS rendering for static output, ensure that styled-components is installed as a dependency in your package.json
"dependencies": {
"styled-components": "^3.2.6"
}
Configuration
Default options can be set in the x0 field in package.json.
"x0": {
"static": true,
"outDir": "site",
"title": "Hello",
}
Head content
Head elements such as <title>, <meta>, and <style> can be configured with the x0 field in package.json.
"x0": {
"title": "My Site",
"meta": [
{ "name": "twitter:card", "content": "summary" }
{ "name": "twitter:image", "content": "kitten.png" }
],
"links": [
{
"rel": "stylesheet",
"href": "https://fonts.googleapis.com/css?family=Roboto"
}
]
}
Custom HTML Template
A custom HTML template can be passed as the template option.
"x0": {
"template": "./html.js"
}
// example template
module.exports = ({
html,
css,
scripts,
title,
meta = [],
links = [],
static: isStatic
}) => `<!DOCTYPE html>
<head>
<title>{title}</title>
${css}
</head>
<div id=root>${html}</div>
${scripts}
`
Routing
x0 creates routes based on the file system, using react-router.
To set the base URL for static builds, use the basename option.
"x0": {
"basename": "/my-site"
}
webpack
Webpack configuration files named webpack.config.js will automatically be merged with the built-in configuration, using webpack-merge.
To use a custom filename, pass the file path to the --webpack flag.
// webpack.config.js example
module.exports = {
module: {
rules: [
{ test: /\.txt$/, loader: 'raw-loader' }
]
}
}
See the example.