{"id":13394419,"url":"https://github.com/jaredpalmer/backpack","last_synced_at":"2025-05-14T13:07:04.184Z","repository":{"id":40002869,"uuid":"78035476","full_name":"jaredpalmer/backpack","owner":"jaredpalmer","description":"🎒 Backpack is a minimalistic build system for Node.js projects.","archived":false,"fork":false,"pushed_at":"2024-08-07T12:56:15.000Z","size":1895,"stargazers_count":4439,"open_issues_count":83,"forks_count":168,"subscribers_count":51,"default_branch":"master","last_synced_at":"2024-10-29T15:20:46.297Z","etag":null,"topics":["babel","build","es6","javascript","node","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredpalmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["jaredpalmer"]}},"created_at":"2017-01-04T17:03:00.000Z","updated_at":"2024-10-28T22:04:30.000Z","dependencies_parsed_at":"2024-11-10T19:10:20.998Z","dependency_job_id":"b3cb60df-ab94-411a-a64a-645cca34e55d","html_url":"https://github.com/jaredpalmer/backpack","commit_stats":{"total_commits":154,"total_committers":31,"mean_commits":4.967741935483871,"dds":0.6363636363636364,"last_synced_commit":"efbf8cbbfbdfef42f7239eb4145b738c79ddda10"},"previous_names":["palmerhq/backpack"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fbackpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fbackpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fbackpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredpalmer%2Fbackpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredpalmer","download_url":"https://codeload.github.com/jaredpalmer/backpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247324649,"owners_count":20920692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","build","es6","javascript","node","webpack"],"created_at":"2024-07-30T17:01:18.717Z","updated_at":"2025-04-09T03:11:32.934Z","avatar_url":"https://github.com/jaredpalmer.png","language":"JavaScript","readme":"![backpack](https://cloud.githubusercontent.com/assets/4060187/21872211/318795e8-d835-11e6-8376-bea370605361.png)\n\n![backpack-status](https://david-dm.org/palmerhq/backpack.svg?path=packages/backpack-core)\n[![npm version](https://badge.fury.io/js/backpack-core.svg)](https://badge.fury.io/js/backpack-core)  [![Discord](https://img.shields.io/discord/769256827007139912?label=%F0%9F%92%AC%20%20join%20us%20on%20discord\u0026style=plastic)](https://discord.com/invite/RevdZTYMzr)\n\nBackpack is minimalistic build system for Node.js. Inspired by Facebook's [create-react-app](https://github.com/facebookincubator/create-react-app), Zeit's [Next.js](https://github.com/zeit/next.js), and Remy's [Nodemon](https://github.com/remy/nodemon), Backpack lets 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.\n\n**Backpack comes with the \"battery-pack included\":**\n\n* Latest ES6 features (including module syntax, async/await, object rest spread)\n* SUPER friendly, human readable error messages\n* Live reload (on saves, add/delete file, etc.)\n* Zero-config, one dependency.\n\nHOWEVER, you can configure Backpack to your project's needs by extending [the underlying Webpack 4 configuration](#custom-configuration).\n\n**PLEASE READ:** If you're thinking of using Backpack with React.js, you should use [Razzle](https://github.com/jaredpalmer/razzle) instead. It is a project purpose-built for SSR React with an almost identical API.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n**Table of Contents**\n\n* [How to use](#how-to-use)\n  * [Custom configuration](#custom-configuration)\n  * [Customizing webpack config](#customizing-webpack-config)\n  * [Customizing babel config](#customizing-babel-config)\n  * [Building for Production](#building-for-production)\n* [CLI Commands](#cli-commands)\n  * [`backpack dev`](#backpack-dev)\n  * [`backpack build`](#backpack-build)\n* [FAQ](#faq)\n* [Inspiration](#inspiration)\n* [Authors](#authors)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## How to use\n\nInstall it:\n\n```bash\nnpm i backpack-core --save\n```\n\nand add a script to your package.json like this:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"backpack\"\n  }\n}\n```\n\nAfter that there are just a few ~~conventions~~ defaults:\n\n* `src/index.js`: the entry of your app.\n\n...actually that's it.\n\nYou can then run your application in development mode:\n\n```bash\nnpm run dev\n```\n\nSuccessful builds will show a console like this. _Note: screenshot taken from running the [basic example](https://github.com/palmerhq/backpack/tree/master/examples/basic)_\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/4060187/21944379/eaba2fde-d9a3-11e6-87aa-f30ddc88b5a8.png\" width=\"600\" alt=\"npm run dev\"\u003e\n\n### Custom configuration\n\nFor custom advanced behavior, you can create a `backpack.config.js` in the root of your project's directory (next to `package.json`).\n\n```js\n// backpack.config.js\n// IMPORTANT: This file is not going through babel transformation.\n// You can however use the ES2015 features supported by your Node.js version.\nmodule.exports = {\n  /* config options here */\n};\n```\n\n### Customizing webpack config\n\n[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-webpack-config)\n\nTo extend webpack, you can define a function that extends its config via `backpack.config.js`.\n\n```js\n// backpack.config.js\nmodule.exports = {\n  webpack: (config, options, webpack) =\u003e {\n    // Perform customizations to config\n    // Important: return the modified config\n    return config;\n  },\n};\n```\n\n### Customizing babel config\n\n[Example](https://github.com/palmerhq/backpack/tree/master/examples/with-custom-babel-config)\n\nTo extend our usage of `babel`, you can define a `.babelrc` file at the root of your app. This file is optional.\n\nIf found, Backpack will consider it to be the _source of truth_. Thus it must define what Backpack needs as well, which is the `backpack-core/babel` preset.\n\nThis is designed so that you are not surprised by modifications we could make to the default `babel` configurations.\n\nHere's an example `.babelrc` file:\n\n```js\n{\n  \"presets\": [\n    \"backpack-core/babel\",\n    \"stage-0\"\n  ]\n}\n```\n\n_Note: This works [exactly like Next.js does](https://github.com/zeit/next.js#customizing-babel-config)._\n\n### Building for Production\n\nAdd a npm script for the build step:\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"backpack\",\n    \"build\": \"backpack build\"\n  }\n}\n```\n\nThen run the build command and start your app\n\n```bash\nnpm run build\nnode ./build/main.js\n```\n\n## CLI Commands\n\n### `backpack dev`\n\nRuns backpack in development mode.\n\nYour code will reload if you make edits.  \nYou will see the build errors in the console that look like this.\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/4060187/21944372/e2d5e556-d9a3-11e6-9842-0e01ce28ddd6.png\" width=\"600\" alt=\"backpack dev\"\u003e\n\n### `backpack build`\n\nBuilds the app for production to the `build` folder.  \nIt correctly bundles your production mode and optimizes the build for the best performance.\n\nYou can run your production application with the following command:\n\n```bash\nnode ./build/main.js\n```\n\nYour application is ready to be deployed!\n\n_Note: Make sure to add the `build` directory to your `.gitignore` to keep compiled code out of your git repository_\n\n## FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003eIs this like Create-React-App or Next.js?\u003c/summary\u003e\n  \n  Yes and No.\n\nYes in that they will all make your life easier.\n\nNo 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.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCan I use this with React to build a universal app?\u003c/summary\u003e\n  \nTechnically, 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.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWhat syntactic features are transpiled? How do I change them?\u003c/summary\u003e\n  \nWe track V8. Since V8 has wide support for ES6, we don't transpile it. Since V8 doesn’t support async/await and class properties yet, we transpile those.\n  \n  See [this](https://github.com/palmerhq/backpack/blob/master/packages/backpack-core/config/webpack.config.js#L83) and [this](https://github.com/palmerhq/backpack#customizing-webpack)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWhy is it called Backpack?\u003c/summary\u003e\n  \n  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*. \n\u003c/details\u003e\n\n## Inspiration\n\n* [jlongster/backend-with-webpack](https://github.com/jlongster/backend-with-webpack)\n* [nyt/kyt](https://github.com/NYTimes/kyt)\n* [zeit/next.js](https://github.com/zeit/next.js)\n* [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n\n## Authors\n\n* Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - The Palmer Group\n","funding_links":["https://github.com/sponsors/jaredpalmer"],"categories":["JavaScript","Web","babel"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fbackpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredpalmer%2Fbackpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredpalmer%2Fbackpack/lists"}