{"id":13422474,"url":"https://github.com/insin/nwb","last_synced_at":"2025-04-28T11:50:43.682Z","repository":{"id":2216429,"uuid":"45947467","full_name":"insin/nwb","owner":"insin","description":"A toolkit for React, Preact, Inferno \u0026 vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)","archived":false,"fork":false,"pushed_at":"2023-10-16T13:32:05.000Z","size":2754,"stargazers_count":5572,"open_issues_count":169,"forks_count":331,"subscribers_count":66,"default_branch":"master","last_synced_at":"2024-10-29T14:53:28.713Z","etag":null,"topics":["babel","inferno","javascript","karma","npm-module","preact","react","react-component","toolkit","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2015-11-10T23:32:58.000Z","updated_at":"2024-09-29T10:56:42.000Z","dependencies_parsed_at":"2024-06-18T11:15:07.259Z","dependency_job_id":"5310980d-ac2e-4f86-bb09-d92955ce5c90","html_url":"https://github.com/insin/nwb","commit_stats":{"total_commits":1126,"total_committers":33,"mean_commits":"34.121212121212125","dds":"0.035523978685612745","last_synced_commit":"9fa98034babfa139b3f9f2bb93f46556bf64d876"},"previous_names":[],"tags_count":103,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fnwb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fnwb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fnwb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Fnwb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/nwb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251310961,"owners_count":21568999,"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","inferno","javascript","karma","npm-module","preact","react","react-component","toolkit","webpack"],"created_at":"2024-07-30T23:00:45.750Z","updated_at":"2025-04-28T11:50:43.663Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":["Publishing Components to npm","Code Design","Uncategorized","Alternatives","JavaScript","Web","Summary","babel","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Getting Started with Styleguidist","Boilerplate","Uncategorized","Tools"],"readme":"# nwb is deprecated and unmaintained\n\n### TL;DR: use [Vite](https://vite.dev/)!\n\nnwb was created at a time when JavaScript tooling was in flux, when the capabilities of ES6 were less widely-supported by browsers than they are today, and when versions of Webpack, Babel and other common build tools were out of date almost as soon as you added them to your package.json, and there wasn't even a create-react-app yet!\n\nPeople who were adopting these tools ended up having to independently manage the same sets of dependencies and configure them to work together to create a great local development experience, a solid testing setup and optimised production builds.\n\nThe goal of nwb was to take the weight of managing these [off the shoulders of developers, and instead provide a configuration file](https://github.com/insin/react-yelp-clone/compare/master...nwb) exposing a smaller surface area for the configuration needed to tweak the things which were specific to your project.\n\n---\n\nAt this point in time, years later than we should have formally announced nwb's deprecation, [Vite](https://vite.dev/) is one of the best implementations of that goal there is.\n\nIt's massively popular, widely-used, and it's likely that every plugin you need for your use case has already likely written, and if not, there's an API for that, which is so good that high-quality frameworks now build on top of Vite, such as [Astro](https://astro.build/) for static site generation (and on-demand server rendering) and [React Router](https://reactrouter.com) for client and/or server rendered React apps.\n\nWeb Application frameworks like [Hono](https://hono.dev/) also provide official plugins to integrate with Vite's development server if you just need to create a server which serves up a client app and provide authentication and API endpoints, while retaining Vite's fantastic developer experience.\n\nVite also comes with a fantastic testing framework in [Vitest](https://vitest.dev/) which integrates directly with Vite, rather than the hodge-podge of different configs we used to have to deal with to get the likes of Karma sucessfully using the same build tooling as the rest of our development process (IYKYK).\n\nIn summary:\n\n- Starting a new React/Preact etc. project today? Possibly even your first project?\n\n  Use [Vite](https://vite.dev/). There _will_ be a plugin and a project template for whatever you want to use.\n\n- Have an old project which used something like nwb or create-react-app?\n\n  Migrate to [Vite](https://vite.dev/). It's not going to be painless, but it's going to be better. I've done it. You can do it.\n\n- Starting a new project which needs client rendering? Server rendering?\n\n  Use [Vite](https://vite.dev/). There's a plugin or maybe even a framework built on Vite for that. Don't take on more complexity than you need. Don't fight with a framework intended for server rendering if that's not what you need.\n\nThanks for using nwb!\n\n-- Jonny\n\n---\n\n# nwb\n\n![Linux](resources/linux.png) [![Travis][travis-badge]][travis]\n![Windows](resources/windows.png) [![Appveyor][appveyor-badge]][appveyor]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\n![nwb](resources/cover.jpg)\n\nnwb is a toolkit for:\n\n- [Quick Development with React, Inferno, Preact or vanilla JavaScript](#quick-development)\n- Developing:\n  - [React Apps](#react-apps)\n  - [Preact Apps](#preact-apps)\n  - [Inferno Apps](#inferno-apps)\n  - [Vanilla JavaScript Apps](#vanilla-javascript-apps)\n  - [React Components and Libraries](#react-components-and-libraries)\n  - [npm Modules for the Web](#npm-modules-for-the-web)\n\nA zero-config development setup is provided, but nwb also supports [configuration](/docs/Configuration.md#configuration) and [plugin modules](/docs/Plugins.md#plugins) which add extra functionality (e.g. [Sass](http://sass-lang.com/) support), should you need them\n\n## Install\n\nInstalling globally provides an `nwb` command for quick development and working with projects.\n\n```sh\nnpm install -g nwb\n```\n\n\u003e **Note:** if you're using npm 5 and getting an `EACCES: permission denied` error from nwb's PhantomJS dependency while installing globally, try passing an `--unsafe-perm` flag:\n\u003e\n\u003e `npm install -g --unsafe-perm nwb`\n\nTo use nwb's tooling in a project, install it as a `devDependency` and use `nwb` commands in `package.json` `\"scripts\"`:\n\n```sh\nnpm install --save-dev nwb\n```\n```json\n{\n  \"scripts\": {\n    \"start\": \"nwb serve-react-app\",\n    \"build\": \"nwb build-react-app\"\n  }\n}\n```\n\n## Quick Development\n\nFor quick development with [React](https://facebook.github.io/react/), [Inferno](https://infernojs.org/), [Preact](https://preactjs.com/) or vanilla JavaScript, use the `nwb react`, `nwb inferno`, `nwb preact` or `nwb web`commands.\n\n```js\nimport React, {Component} from 'react'\n\nexport default class App extends Component {\n  render() {\n    return \u003ch1\u003eHello world!\u003c/h1\u003e\n  }\n}\n```\n```sh\n$ nwb react run app.js\n✔ Installing react and react-dom\nStarting Webpack compilation...\nCompiled successfully in 5033 ms.\n\nThe app is running at http://localhost:3000/\n```\n```sh\n$ nwb react build app.js\n✔ Building React app\n\nFile size after gzip:\n\n  dist\\app.cff417a3.js  46.72 KB\n```\n\n**See [Quick Development with nwb](/docs/guides/QuickDevelopment.md#quick-development-with-nwb) for a more detailed guide.**\n\n## React Apps\n\nUse `nwb new react-app` to create a [React](https://facebook.github.io/react/) app skeleton, preconfigured with npm scripts which use `nwb` for development:\n\n```sh\nnwb new react-app my-app\ncd my-app/\nnpm start\n```\n\nOpen [localhost:3000](http://localhost:3000), start editing the code and changes will be hot-reloaded into the running app.\n\n`npm test` will run the app's tests and `npm run build` will create a production build.\n\n**See [Developing React Apps with nwb](/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for a more detailed guide.**\n\n## Preact Apps\n\nUse `nwb new preact-app` to create a [Preact](https://preactjs.com/) app skeleton:\n\n```sh\nnwb new preact-app my-app\n```\n\n## Inferno Apps\n\nUse `nwb new inferno-app` to create an [Inferno](https://infernojs.org/) app skeleton:\n\n```sh\nnwb new inferno-app my-app\n```\n\n## Vanilla JavaScript Apps\n\nUse `nwb new web-app` to create a vanilla JavaScript app skeleton:\n\n```sh\nnwb new web-app my-app\n```\n\n## React Components and Libraries\n\n```sh\nnwb new react-component my-component\n\ncd my-component/\n```\n\n`npm start` will run a demo app you can use to develop your component or library against.\n\n`npm test` will run the project's tests and `npm run build` will create ES5, ES modules and UMD builds for publishing to npm.\n\n**See [Developing React Components and Libraries with nwb](/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb) for a more detailed guide.**\n\n## npm Modules for the Web\n\n```sh\nnwb new web-module my-module\n\ncd my-module/\n```\n\n`npm test` will run the project's tests and `npm run build` will create ES5, ES modules and UMD builds for publishing to npm.\n\n## [Guides](/docs/guides/#table-of-contents)\n\n- [Quick Development with nwb](/docs/guides/QuickDevelopment.md#quick-development-with-nwb)\n- [Developing React Apps with nwb](/docs/guides/ReactApps.md#developing-react-apps-with-nwb)\n- [Developing React Components and Libraries with nwb](/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)\n\n## [Documentation](/docs/#table-of-contents)\n\n- [Features](/docs/Features.md#features)\n- [Commands](/docs/Commands.md#commands)\n  - [`nwb`](/docs/Commands.md#nwb)\n  - [`nwb react`, `nwb inferno`, `nwb preact` and `nwb web`](docs/guides/QuickDevelopment.md#quick-development-with-nwb)\n- [Configuration](/docs/Configuration.md#configuration)\n  - [Configuration File](/docs/Configuration.md#configuration-file)\n  - [Configuration Object](/docs/Configuration.md#configuration-object)\n    - [Babel Configuration](/docs/Configuration.md#babel-configuration)\n    - [Webpack Configuration](/docs/Configuration.md#webpack-configuration)\n    - [Karma Configuration](/docs/Configuration.md#karma-configuration)\n    - [npm Build Configuration](/docs/Configuration.md#npm-build-configuration)\n- [Testing](/docs/Testing.md#testing)\n- [Plugins](/docs/Plugins.md#plugins)\n- [Middleware](/docs/Middleware.md#middleware)\n- [Examples](/docs/Examples.md#examples)\n- [Frequently Asked Questions](/docs/FAQ.md#frequently-asked-questions)\n- [Versioning](/docs/Versioning.md#versioning)\n\n## Why use nwb?\n\n**Get started quickly**. Start developing from a single `.js` file or [generate a project skeleton](/docs/Commands.md#new).\n\n**Covers the whole development cycle**. Development tools, testing and production builds for projects work out of the box, no configuration required.\n\n**Flexible**. While everything works out of the box, you can also use an optional [configuration file](/docs/Configuration.md#configuration-file) to tweak things to your liking.\n\n**Manages key development dependencies and configuration for you**. Check out an [example of the effect using nwb had](https://github.com/insin/react-yelp-clone/compare/master...nwb) on the amount of `devDependencies` and configuration to be managed in a real project it was dropped into.\n\n## MIT Licensed\n\n*Cover image created by [GeorgioWan](https://github.com/GeorgioWan)*\n\n*Operating system icons created with [Icons8](https://icons8.com/)*\n\n[travis-badge]: https://img.shields.io/travis/insin/nwb/master.png?style=flat-square\n[travis]: https://travis-ci.org/insin/nwb\n\n[appveyor-badge]: https://img.shields.io/appveyor/ci/insin/nwb/master.png?style=flat-square\n[appveyor]: https://ci.appveyor.com/project/insin/nwb\n\n[npm-badge]: https://img.shields.io/npm/v/nwb.png?style=flat-square\n[npm]: https://www.npmjs.org/package/nwb\n\n[coveralls-badge]: https://img.shields.io/coveralls/insin/nwb/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/insin/nwb\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fnwb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Fnwb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Fnwb/lists"}