Framework of React app with easy configuration. Support HMR and custom server. As simple as next.js.
Mostly ES6/React feature has be built in Reeasy.js. If you need more, just custom babel loader config.
Install it
npm i reeasy --save
and add a script to your package.json like this:
{
"scripts": {
"dev": "reeasy dev",
"build": "reeasy build",
"start": "reeasy start"
}
}create several necessary files:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to reeasy.js!</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>app.js
import React from 'react'
export default () => (
<div>Welcome to reeasy.js!</div>
)reeasy.config.js - (reeasy config file)
module.exports = {
rootPath: './app.js', //Entry file path of your app
selector: '#root' //Selector of element for rendering
}finally run npm run dev and go to http://localhost:3000. To use another port, you can run npm run dev -- -p <your port here>.
Build it first
npm run build
Start server
npm start
Start server using pm2
pm2 start npm -- start
Custom configuration is specified in reeasy.config.js in root directory of your project
module.exports = {
//Entry file path of your app, this field is required
// rootPath: <your entry file path>,
//Selector of element for rendering, default `div`
//starting with `.` for class name (such as `.content`);
//starting with `#` for id (such as `#root`);
//otherwise for tag name (like `div`),
selector: 'div',
//Output directory for build, default `.dist`
outDir: '.dist',
//Output bundle name, default `bundle.js`
bundleName: 'bundle.js',
//Public path for http server, default `/`
publicPath: '/',
//Path of index html file, default `./index.html`
indexHTML: 'index.html',
//Custom webpack configuration
webpack: (config, dev) => {
//config: webpack configuration object
//dev: boolean, is in development mode
//your config here
//return new config (important!)
return config
},
//Custom babel-loader configuration
babelLoaderConfig: (config, dev) => {
//config: babel-loader configuration
//dev: boolean, is in development mode
//your config here
//return new config (important!)
return config
},
////Custom webpack-dev-middleware configuration
devMiddlewareConfig: (config) => {
//config: webpack-dev-middleware configuration
//your config here
//return new config (important!)
return config
}
}Reeasy cli usage
reeasy devRun reeasy in development mode, with hot module replacementreeasy buildBuild app in production modereeasy startStart in production mode, need runreeasy buildfirst
options
-c, --configCustom reeasy configuration file-p, --portPort to listen for http server-w, --cwdCustom working directory
First, add a server.js file in your project directory like this:
- If you use
httpmodule directly
const http = require('http')
const reeasy = require('reeasy')
const app = reeasy({
dev: process.env.NODE_ENV !== 'production'
})
app.prepare().then(middleware => {
const server = http.createServer((req, res) => {
middleware(req, res)
})
server.listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})- If you use express
const express = require('express')
const reeasy = require('reeasy')
const app = reeasy({
dev: process.env.NODE_ENV !== 'production'
})
app.prepare().then(middleware => {
const server = express()
//define other middleware here
server.use(middleware)
server.listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})- If you use koa
const Koa = require('koa')
const reeasy = require('reeasy')
const app = reeasy({
dev: process.env.NODE_ENV !== 'production'
})
app.prepare().then(middleware => {
const server = new Koa()
//define other middleware here
server.use(middleware.koa())
server.listen(3000, err => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})Then add a script to your package.json like this:
{
"scripts": {
"dev": "NODE_ENV=development node server.js",
"build": "reeasy build",
"start": "NODE_ENV=production node server.js"
}
}Finally start your project by npm scripts.
The reeasy API is:
reeasy(opts: object)Create reeasy instance
Supported options:
cwd(string) Current work directory, useprocess.cwd()as defaultdev(bool) Whether to launch reeasy in dev mode, defaultfalseconf(string) Custom reeasy configuration file path, if not set this option, use default configuration file path (reeasy.config.jsin root directory)
MIT