Package Exports

@compositor/x0
@compositor/x0/lib/dev

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@compositor/x0) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

x0

Zero-config React development environment and static site generator

npm install -g @compositor/x0

screen-demo

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
Support for routing with react-router
Support for async data fetching
Support for code splitting with React Loadable

* Custom webpack configuration is required for components that rely on webpack-based features

Isolated development environment

x0 dev src/App.js

Options:

  -o --open   Open dev server in default browser
  -p --port   Set custom port for dev server

x0 dev src/App.js -op 8080

Static Render

Render static HTML and client-side bundle

x0 build src/App.js --out-dir site

Render static HTML without bundle

x0 build src/App.js --out-dir site --static

Options

  -d --out-dir    Directory to save index.html and bundle.js to
  -s --static     Only render static HTML (no client-side JS)

Fetching Data

Use the getInitialProps static method to fetch data for static rendering. This method was inspired by Next.js but only works for static rendering.

const App = props => (
  <h1>Hello {props.data}</h1>
)

App.getInitialProps = async ({
  Component,
  pathname
}) => {
  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, glamor, glamorous, and fela. To enable CSS rendering for static output, use the cssLibrary option

x0 build src/App.js --cssLibrary="styled-components"

Available options:

Head content

Head elements such as <title>, <meta>, and <style> can be rendered at the beginning of a component. Browsers should handle this correctly since the <head> and <body> elements are optional in HTML 5.

const App = props => (
  <React.Fragment>
    <title>Hello x0</title>
    <style dangerouslySetInnerHTML={{
      __html: 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif}'
    }} />
    <h1>Hello x0</h1>
  </React.Fragment>
)

Configuration

Default props can be passed to x0 in a package.json field named x0.

"x0": {
  "title": "Hello",
  "count": 0
}

Routing

To render multiple pages and use routing, add a routes array to the package.json configuration object.

"x0": {
  "routes": [
    "/",
    "/about"
  ]
}

x0 build src/App.js --static --out-dir site

The current route will be passed to the component as props.pathname. This can be used with react-router's StaticRouter and BrowserRouter components.

// Example with react-router
import React from 'react'
import {
  StaticRouter,
  BrowserRouter,
  Route,
  Link
} from 'react-router-dom'
import Home from './Home'
import About from './About'

// universal router component
const Router = typeof document !== 'undefined'
  ? BrowserRouter
  : StaticRouter

const App = props => (
  <Router
    basename={props.basename}
    location={props.pathname}>
    <nav>
      <Link to='/'>Home</Link>
      <Link to='/about'>About</Link>
    </nav>
    <Route
      exact
      path='/'
      render={() => <Home {...props} />}
    />
    <Route
      path='/about'
      render={() => <About {...props} />}
    />
  </Router>
)

Code Splitting

To split client side bundles when rendering a static site, x0 supports React Loadable with no additional setup needed.

// example of using React Loadable
import React from 'react'
import Loadable from 'react-loadable'

const About = Loadable({
  loading: () => <div>loading...</div>,
  loader: () => import('./About')
})

const App = props => (
  <div>
    <h1>Hello</h1>
    <About />
  </div>
)

Proxy

If you want to proxy requests you can configure it using the x0 key in your package.json. This can be useful when you're running a local api server during development.

The following example proxies all /api requests to http://localhost:3000.

"x0": {
  "/api": "http://localhost:3000"
}

webpack

Custom webpack loaders can be used by creating a partial webpack.config.js file and passing it to the --config option.

// webpack.config.js example
module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, loader: 'raw-loader' }
    ]
  }
}

x0 build App.js --config webpack.config.js

See the example.

x0 uses webpack-merge, which means that other webpack features, such as plugins, should also work.

Made by Compositor | MIT License

@compositor/x0