Fire up a pre-configured, live reloading Webpack server that supports React, (S)CSS and files for quick demos and tutorials.
Like create-react-app, but without needing to create a new project and
npm install all the things.
I love Webpack, and I love tools like
create-react-app, but they come with some set up cost.
- For Webpack, it takes a reasonable amount of time to configure and set it up. I love this for full projects, but for quick experiments/demos, it's pretty slow.
create-react-appis great but the setup time in generating a new project can be relatively slow, especially on slow networks when you have to install all the dependencies!
The idea behind
demopack is that it's a pre-packaged Webpack. It includes and configures everything you need, so all you have to do is install
demopack once, and then when you run it there's no more setup.
Demopack is not designed for fully featured projects, but for small demos or one off projects where you need no extra configuration. For "proper" projects I recommend either Webpack from scratch or a tool like
Please note that
demopack is very new and I'm sure it might not work right for all people on all machines. Please open an issue if you have any problems or suggestions!
You should install
demopack globally so you can easily run it in a directory.
demopack is taken on npm, so you need to install the scoped version:
npm install --global @jackfranklin/demopack yarn global add @jackfranklin/demopack
You'll need to be running Node 8 or higher.
Given a folder with the following file in it:
// index.js console.log('Hello World!');
demopack in that directory will:
- Fire up a Webpack server on port 8080 (or another free port).
- Generate an
What Demopack supports
Demopack has the following Webpack loaders configured out of the box:
.jsxfiles. It runs using
babel-preset-stage-0. This should mean any fancy JS you want to write should be supported :)
style-loaderto load your CSS and SASS (but regular CSS works just fine). If you pass
--css-modulesCSS Modules will be supported.
Demopack will run a small local server and will refresh automatically when you change files. Any errors are shown in the terminal and in the page.
If there's anything you think should be supported out of the box, feel free to open an issue and we can discuss it.
The primary goal of
demopack is to be used for development, but you can generate a production build if you like with the
This will run all the same plugins, with some extras (CSS is pulled into a separate file, JS & CSS is minified).
The build will output into
./demopack-built and will contain an
index.html file alongside any assets.
The goal of
demopack is to be preconfigured out of the box, but there are some options you can configure. Running
demopack --help will show you these:
- Initial release :)