Reeasy.js
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.
How to use
Setup
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>.
Run in production mode
Build it first
npm run build
Start server
npm start
Start server using pm2
pm2 start npm -- start
Custom configuration
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
}
}Cli
Reeasy cli usage
-
reeasy devRun reeasy in development mode, with hot module replacement -
reeasy buildBuild app in production mode -
reeasy startStart in production mode, need runreeasy buildfirst
options
-
-c, --configCustom reeasy configuration file -
-p, --portPort to listen for http server -
-w, --cwdCustom working directory
Custom server
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 default -
dev(bool) Whether to launch reeasy in dev mode, defaultfalse -
conf(string) Custom reeasy configuration file path, if not set this option, use default configuration file path (reeasy.config.jsin root directory)
License
MIT
