@compositor/x0
Advanced tools
Zero-config React development environment and static site generator
npm install -g @compositor/x0
* Custom webpack configuration is required for components that rely on webpack-based features
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
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
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 }
}
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"
}
Default options can be set in the x0 field in package.json.
"x0": {
"static": true,
"outDir": "site",
"title": "Hello",
}
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"
}
]
}
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}
`
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 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.
FAQs
Document & develop React components without breaking a sweat
The npm package @compositor/x0 receives a total of 287 weekly downloads. As such, @compositor/x0 popularity was classified as not popular.
We found that @compositor/x0 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.