guryanovev / backpack

A minimalistic build system for any Node.js project.

Backpack is minimalistic build system for Node.js. Inspired by Facebook's create-react-app, Zeit's Next.js, and Remy's Nodemon, Backpack let's you create modern Node.js apps and services with zero configuration. Backpack handles all the file-watching, live-reloading, transpiling, and bundling, so you don't have to. It comes with a few conventions defaults (like support for the latest JavaScript awesomeness (i.e. async/await, object rest spread, and class properties)), but everything can be customized to fit your project's needs. Best of all, you can easily add Backpack to your existing Node.js project with just a single dependency.

How to use

Install it:

npm i backpack-core --save-dev

and add a script to your package.json like this:

{
  "scripts": {
    "dev": "backpack"
  }
}

After that there are just a few conventions defaults:

• src/index.js: the entry of your app.

...actually thats it.

Backpack comes with the "battery-pack included":

• Latest ES6 features (including module syntax, async/await, object rest spread)
• SUPER Friendly, human readable error messages
• Live reload (on saves, add/delete file, etc.)
• Zero-config, one dependency.

HOWEVER, you can configure Backpack to your project's needs. You can modify the underlying Webpack 2 configuration.

Custom configuration

For custom advanced behavior, you can create a backpack.config.js in the root of your project's directory (next to package.json). Note: backpack.config.js is a regular Node.js module, not a JSON file. It gets used by the Backpack build phase, but does not itself go through babel transformation. So only use JS that's supported by your current Node.js version.

// backpack.config.js
module.exports = {
  /* config options here */
}

Customizing Webpack

Example

To extend webpack, you can define a function that extends its config via backpack.config.js.

// backpack.config.js
module.exports = {
  webpack: (config, options) => {
    // Perform customizations to config
    // Important: return the modified config
    return config
  }
}

Building for Production

Add a npm script for the build step:

{
  "scripts": {
    "dev": "backpack",
    "build": "backpack build"
  }
}

Then run the build command and start your app

npm run build
node ./build/server/main.js   

FAQ

Is this like Create-React-App or Next.js?

Yes and No.

Yes in that they will all make your life easier.

No in that it that Backpack is focused on server-only applications. You should use create-react-app or Next.js for your frontend and then build your backend with Backpack.

Can I use this with React to build a universal app?

Technically, yes. However, we strongly advise against it at the moment. Backpack handles file-watching and reloading in a way that will make things like webpack-hot-middleware annoying to work with.

What syntactic features are transpiled? How do I change them?

We track V8. Since V8 has wide support for ES6 and async and await, we transpile those. Since V8 doesn’t support class decorators, we don’t transpile those.

See this and this

Why is it called Backpack?

Backpack is focused on server-only applications. We've been using it for building out Node.js backends and microservices. Under the hood, Webpack and a few other tools make the magic happen. Hence Backend + Webpack = Backpack.

Authors

• Jared Palmer (@jaredpalmer) - The Palmer Group