Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drylikov/nwb
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it).
https://github.com/drylikov/nwb
Last synced: 8 days ago
JSON representation
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it).
- Host: GitHub
- URL: https://github.com/drylikov/nwb
- Owner: drylikov
- License: mit
- Created: 2024-07-13T22:29:39.000Z (4 months ago)
- Default Branch: drylikov
- Last Pushed: 2024-07-13T22:41:38.000Z (4 months ago)
- Last Synced: 2024-07-13T23:34:38.972Z (4 months ago)
- Language: JavaScript
- Size: 750 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# NWB
nwb is a toolkit for:
- [Quick Development with React, Inferno, Preact or vanilla JavaScript](#quick-development)
- Developing:
- [React Apps](#react-apps)
- [Preact Apps](#preact-apps)
- [Inferno Apps](#inferno-apps)
- [Vanilla JavaScript Apps](#vanilla-javascript-apps)
- [React Components and Libraries](#react-components-and-libraries)
- [npm Modules for the Web](#npm-modules-for-the-web)
A 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
## Install
Installing globally provides an `nwb` command for quick development and working with projects.
```sh
npm install -g nwb
```
> **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:
>
> `npm install -g --unsafe-perm nwb`
To use nwb's tooling in a project, install it as a `devDependency` and use `nwb` commands in `package.json` `"scripts"`:
```sh
npm install --save-dev nwb
```
```json
{
"scripts": {
"start": "nwb serve-react-app",
"build": "nwb build-react-app"
}
}
```
## Quick Development
For 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.
```js
import React, {Component} from 'react'
export default class App extends Component {
render() {
return
Hello world!
}
}
```
```sh
$ nwb react run app.js
✔ Installing react and react-dom
Starting Webpack compilation...
Compiled successfully in 5033 ms.
The app is running at http://localhost:3000/
```
```sh
$ nwb react build app.js
✔ Building React app
File size after gzip:
dist\app.cff417a3.js 46.72 KB
```
**See [Quick Development with nwb](/docs/guides/QuickDevelopment.md#quick-development-with-nwb) for a more detailed guide.**
## React Apps
Use `nwb new react-app` to create a [React](https://facebook.github.io/react/) app skeleton, preconfigured with npm scripts which use `nwb` for development:
```sh
nwb new react-app my-app
cd my-app/
npm start
```
Open [localhost:3000](http://localhost:3000), start editing the code and changes will be hot-reloaded into the running app.
`npm test` will run the app's tests and `npm run build` will create a production build.
**See [Developing React Apps with nwb](/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for a more detailed guide.**
## Preact Apps
Use `nwb new preact-app` to create a [Preact](https://preactjs.com/) app skeleton:
```sh
nwb new preact-app my-app
```
## Inferno Apps
Use `nwb new inferno-app` to create an [Inferno](https://infernojs.org/) app skeleton:
```sh
nwb new inferno-app my-app
```
## Vanilla JavaScript Apps
Use `nwb new web-app` to create a vanilla JavaScript app skeleton:
```sh
nwb new web-app my-app
```
## React Components and Libraries
```sh
nwb new react-component my-component
cd my-component/
```
`npm start` will run a demo app you can use to develop your component or library against.
`npm test` will run the project's tests and `npm run build` will create ES5, ES modules and UMD builds for publishing to npm.
**See [Developing React Components and Libraries with nwb](/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb) for a more detailed guide.**
## npm Modules for the Web
```sh
nwb new web-module my-module
cd my-module/
```
`npm test` will run the project's tests and `npm run build` will create ES5, ES modules and UMD builds for publishing to npm.
## [Guides](/docs/guides/#table-of-contents)
- [Quick Development with nwb](/docs/guides/QuickDevelopment.md#quick-development-with-nwb)
- [Developing React Apps with nwb](/docs/guides/ReactApps.md#developing-react-apps-with-nwb)
- [Developing React Components and Libraries with nwb](/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)
## [Documentation](/docs/#table-of-contents)
- [Features](/docs/Features.md#features)
- [Commands](/docs/Commands.md#commands)
- [`nwb`](/docs/Commands.md#nwb)
- [`nwb react`, `nwb inferno`, `nwb preact` and `nwb web`](docs/guides/QuickDevelopment.md#quick-development-with-nwb)
- [Configuration](/docs/Configuration.md#configuration)
- [Configuration File](/docs/Configuration.md#configuration-file)
- [Configuration Object](/docs/Configuration.md#configuration-object)
- [Babel Configuration](/docs/Configuration.md#babel-configuration)
- [Webpack Configuration](/docs/Configuration.md#webpack-configuration)
- [Karma Configuration](/docs/Configuration.md#karma-configuration)
- [npm Build Configuration](/docs/Configuration.md#npm-build-configuration)
- [Testing](/docs/Testing.md#testing)
- [Plugins](/docs/Plugins.md#plugins)
- [Middleware](/docs/Middleware.md#middleware)
- [Examples](/docs/Examples.md#examples)
- [Frequently Asked Questions](/docs/FAQ.md#frequently-asked-questions)
- [Versioning](/docs/Versioning.md#versioning)
## Why use nwb?
**Get started quickly**. Start developing from a single `.js` file or [generate a project skeleton](/docs/Commands.md#new).
**Covers the whole development cycle**. Development tools, testing and production builds for projects work out of the box, no configuration required.
**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.
**Manages key development dependencies and configuration for you**.