Reboost is a super fast dev server for rapid web development.
Experimental
Reboost is in early development, and some things may change/break before we hit version 1.0
NOTE
Reboost is intended to use only on development, for production you've to
bundle up your files by yourself using bundlers like Webpack, Rollup, etc.
Features
- No bundling. So the server start time is fast.
- Transforms only the required/changed files.
- Uses advanced filesystem cache + memory cache. It will stay fast even after restarting.
- Source maps support for better developer experience.
- Supports CommonJS modules.
- Support for Plugins.
- Import resolving.
- Hot Module Replacement.
- Out of the box support for JSON, CSS Modules, JSX, PostCSS, and TypeScript.
- Preprocessor support.
- Works with Electron.
What are supported
- ES Modules
- CommonJS Modules
- CSS
- JSON
- CSS Modules
- JSX
- JS/TS Decorators
- Babel
- PostCSS
- Preact
- React (with Fast Refresh)
- Sass/SCSS
- Svelte
- TypeScript
- Vue
See the Recipes for template configurations.
Compatibility
Reboost works with both CommonJS and ES modules, so you can try it even
if you are not using ES modules, though using ES modules is recommended.
Docs
Changelog
Configurations
Plugins
HMR API
Recipes
Supporting old browsers while using script type="module"
Quickstart
Using npm init
Run this command in your terminal
npm init @reboost/app
Then it will ask you to choose a template from
available templates.
After that, open the directory where your app is extracted, install dependencies,
then run
node reboost
Manually creating an app
First, install it
# Using npm
npm i -D reboost
# Using yarn
yarn add -D reboost
Assume that file structure is like this
public/
index.html
src/
add.js
subtract.js
index.js
package.json
Scripts content
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
import { add } from './add';
import { subtract } from './subtract';
console.log('1 + 3 =', add(1, 3));
console.log('10 - 5 =', subtract(10, 5));
and HTML content (public/index.html
)
<!doctype html>
<html>
<body>
<script type="module" src="./dist/bundle.js"></script>
</body>
</html>
then create a file named reboost.js
const { start } = require('reboost');
start({
entries: [
['./src/index.js', './public/dist/bundle.js']
],
contentServer: {
root: './public',
open: true
}
})
after that run the script using node
, open your terminal in that directory and use the command
node reboost
You can see your code is working without any problem
What if I want to use any other server?
Reboost's content server is static, it just serves the file. If you want
to use any other server (like browser-sync or your own http server) you can do that,
you've to just serve the generated scripts which are in your output directory.
Reboost will handle the rest.
Motivation
When developing a web app, as your number of modules increases,
your compile-time slows down, it's a big problem, it takes a lot of precious
time which you could have used to develop your app. Since ES2015 (aka ES6) modules
are supported natively by browsers. If you can connect (or you can say serve) them
up correctly, it will work on browsers without the need for bundling. Here, Reboost
does that for you - the serving part. So you can develop your app faster.
Reboost is highly inspired by these awesome projects - Vite,
Snowpack, esbuild.
License
Licensed under the MIT License.