• Stars
    star
    5,572
  • Rank 7,342 (Top 0.2 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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)

nwb

Linux Travis Windows Appveyor npm package Coveralls

nwb

nwb is a toolkit for:

A zero-config development setup is provided, but nwb also supports configuration and plugin modules which add extra functionality (e.g. Sass support), should you need them

Install

Installing globally provides an nwb command for quick development and working with projects.

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":

npm install --save-dev nwb
{
  "scripts": {
    "start": "nwb serve-react-app",
    "build": "nwb build-react-app"
  }
}

Quick Development

For quick development with React, Inferno, Preact or vanilla JavaScript, use the nwb react, nwb inferno, nwb preact or nwb webcommands.

import React, {Component} from 'react'

export default class App extends Component {
  render() {
    return <h1>Hello world!</h1>
  }
}
$ 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/
$ nwb react build app.js
βœ” Building React app

File size after gzip:

  dist\app.cff417a3.js  46.72 KB

See Quick Development with nwb for a more detailed guide.

React Apps

Use nwb new react-app to create a React app skeleton, preconfigured with npm scripts which use nwb for development:

nwb new react-app my-app
cd my-app/
npm start

Open 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 for a more detailed guide.

Preact Apps

Use nwb new preact-app to create a Preact app skeleton:

nwb new preact-app my-app

Inferno Apps

Use nwb new inferno-app to create an Inferno app skeleton:

nwb new inferno-app my-app

Vanilla JavaScript Apps

Use nwb new web-app to create a vanilla JavaScript app skeleton:

nwb new web-app my-app

React Components and Libraries

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 for a more detailed guide.

npm Modules for the Web

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

Documentation

Why use nwb?

Get started quickly. Start developing from a single .js file or generate a project skeleton.

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 to tweak things to your liking.

Manages key development dependencies and configuration for you. Check out an example of the effect using nwb had on the amount of devDependencies and configuration to be managed in a real project it was dropped into.

MIT Licensed

Cover image created by GeorgioWan

Operating system icons created with Icons8

More Repositories

1

react-hn

React-powered Hacker News client
JavaScript
2,179
star
2

control-panel-for-twitter

Browser extension which gives you more control over your Twitter timeline and adds missing features and UI improvements - available for desktop and mobile browsers
JavaScript
1,924
star
3

react-maskedinput

Masked <input/> React component
JavaScript
730
star
4

newforms

Isomorphic form-handling for React
JavaScript
642
star
5

msx

JSX for Mithril.js 0.x
JavaScript
362
star
6

react-heatpack

A 'heatpack' command for quick React development with webpack hot reloading
JavaScript
347
star
7

inputmask-core

Standalone input mask implementation, independent of any GUI
JavaScript
304
star
8

babel-plugin-react-html-attrs

Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes
JavaScript
177
star
9

isomorphic-lab

Isomorphic React experimentation
JavaScript
144
star
10

DOMBuilder

DOM builder with multiple output formats
JavaScript
119
star
11

react-auto-form

Simplifies getting user input from forms via onChange and onSubmit events, using DOM forms APIs
JavaScript
116
star
12

react-router-active-component

Factory function for React components which are active for a particular React Router route
JavaScript
113
star
13

get-form-data

Gets form and field data via form.elements
JavaScript
106
star
14

react-lessons

Tool for creating and taking interactive React tutorials
JavaScript
103
star
15

react-examples

React… examples…
JavaScript
98
star
16

ad-hoc-reckons

JavaScript
85
star
17

control-panel-for-youtube

Browser extension which gives you more control over YouTube by adding missing options and UI improvements - for desktop & mobile browsers
JavaScript
81
star
18

remote_control_for_vlc

A VLC remote control written with Flutter
Dart
77
star
19

react-octicon

A GitHub Octicons icon React component
JavaScript
75
star
20

gatsby-plugin-dark-mode

A Gatsby plugin which handles some of the details of implementing a dark mode theme
JavaScript
68
star
21

react-filtered-multiselect

Filtered multi-select React component
JavaScript
61
star
22

redux-todomvc-es5

ES5 version of the Redux todomvc example
JavaScript
59
star
23

react-router-form

<Form> is to <form> as <Link> is to <a>
JavaScript
56
star
24

redux-action-utils

[DEPRECATED] Factory functions for reducing action creator boilerplate (pun not intended)
JavaScript
48
star
25

newforms-bootstrap

Components for rendering a newforms Form using Bootstrap 3
JavaScript
48
star
26

package-config-checker

Checks if your dependencies have package.json files config or an .npmignore for packaging
JavaScript
47
star
27

obs-bounce

OBS script to bounce a scene item around, DVD logo style or throw & bounce with physics
Lua
44
star
28

lifequote

React port of a life insurance quick quoting application
JavaScript
39
star
29

newforms-examples

Examples repository for newforms / React
JavaScript
32
star
30

ideas-md

A float-to-the-top ideas log built with React
JavaScript
32
star
31

djangoffice

Project management/CRM for small offices - Clients, Jobs, Tasks, Rates, Activities, Timesheets, Contacts, Invoices etc. etc.
Python
30
star
32

tabata_timer

A Tabata training interval timer written with Flutter.
Dart
30
star
33

react-gridforms

React components for Gridforms form layout
JavaScript
29
star
34

newforms-gridforms

Grid Forms integration for newforms
CSS
27
star
35

comments-owl-for-hacker-news

Browser extension which makes it easer to follow comment threads on Hacker News across multiple visits, allows you to annotate and mute users, and other UI tweaks and mobile UX improvements
JavaScript
27
star
36

astro-lazy-youtube-embed

Embed YouTube videos with a static placeholder which only embeds when you click
Astro
26
star
37

reactodo

Multiple localStorage TODO lists, built with React
JavaScript
25
star
38

forum

A basic Django forum app with metaposts; uses redis for stats/tracking
Python
25
star
39

react-plain-editable

[DEPRECATED] React component for editing plain text via contentEditable
JavaScript
21
star
40

ui-lib-samples

Misc impls of functionality with various JavaScript UI libs
HTML
15
star
41

react-dsl

Generate React components as DSLs for structural markup, such as that of CSS frameworks
CSS
14
star
42

soclone

The beginnings of a Stack Overflow clone
Python
14
star
43

concur

Sugar for infectious JavaScript inheritance, metaprogramming & mixins
JavaScript
14
star
44

gulp-msx

Precompile Mithril views which use JSX into JavaScript
JavaScript
14
star
45

manage-twitter-engagement

Manage "engagement" on Twitter by moving retweets and algorithmic tweets to their own lists
JavaScript
14
star
46

hta-localstorage

Basic localStorage implementation for Internet Explorer HTML Applications (HTA)
JavaScript
12
star
47

caveat-utilitor

Personal GtHub repo status badges
12
star
48

sublime-sort-javascript-imports

Sublime Text package for sorting selected JavaScript import/require() lines by module name
Python
11
star
49

greasemonkey

User scripts
JavaScript
11
star
50

nwb-from-create-react-app

Examples of using nwb as an alternative to ejecting from create-react-app
JavaScript
11
star
51

nwb-sass

Sass plugin for nwb
JavaScript
11
star
52

templates

Reusable templates for various kinds of projects
HTML
10
star
53

sacrum

One codebase, two environments - single-page JavaScript apps in the browser, forms 'n links webapps on Node.js for almost-free
JavaScript
10
star
54

isomorph

Shared utilities for browsers and Node.js
JavaScript
9
star
55

update-object

Mirror of Facebook's update() immutability helper
JavaScript
9
star
56

substitute

Edits Twitter typos using s/this/that/ expressions
JavaScript
7
star
57

react-playground

React component for creating interactive coding playgrounds with preset examples
JavaScript
7
star
58

dinnertime

Cooking timer & scheduler with spoken instructions
JavaScript
7
star
59

validators

Validators which can be shared between browsers and Node.js
JavaScript
7
star
60

nwb-react-tutorial

An implementation of the React Tutorial using nwb's middleware
JavaScript
6
star
61

sublime-react-snippets

Sublime Text snippets for writing React components
JavaScript
6
star
62

eslint-config-jonnybuchanan

Personal ESLint setup as a single devDependency
JavaScript
6
star
63

insin.github.io

Static project & demo hosting
JavaScript
6
star
64

react-objecteditor

An <ObjectEditor/> React component
JavaScript
5
star
65

nwb-thinking-in-react

An implementation of the Thinking in React tutorial using nwb
JavaScript
5
star
66

nwb-examples

Examples of configuring nwb
JavaScript
5
star
67

stargaze

Watch a GitHub repo's star count, with change notifications on your desktop
JavaScript
5
star
68

nwb-less

Less plugin for nwb
JavaScript
4
star
69

babel-preset-proposals

A Babel 7 preset to manage experimental proposal plugin dependencies and usage
JavaScript
4
star
70

urlresolve

Resolves paths against URL patterns
JavaScript
4
star
71

shilefare

Dead simple local, temporary file sharing with Node.js
JavaScript
4
star
72

couch25k

Java MIDlet which tracks intervals for the Couch-to-5k running program
Java
4
star
73

chainable-check

Create React.PropTypes-alike validators with an isRequired property
JavaScript
4
star
74

yak-stacker

An app for tracking your Yak Stack during programming sessions
4
star
75

cdogs-wii

Wii port of C-Dogs SDL using SDL Wii
C
4
star
76

deduped-babel-presets

[DEPRECATED] Babel 6 presets with shared dependencies manually deduplicated for npm2 compatibility
JavaScript
3
star
77

react-suggest

React components for implementing suggested completions
JavaScript
3
star
78

rllmuk-really-ignore-users

Really ignore ignored users, and ignore users in specific topics
JavaScript
3
star
79

react-split-date-input

Reusable split date input React component
JavaScript
3
star
80

njive

Node.js wrapper for the Jive API
JavaScript
3
star
81

bootstrap-4-nwb

Example app from "Using Bootstrap 4 from source with React and nwb"
CSS
3
star
82

react-node-time-tracker

A React clone of a Vue tutorial app
JavaScript
3
star
83

redbox-noreact

A fork of redbox-react which doesn't import React
JavaScript
3
star
84

POWDER-wii

Port files for the Wii version of POWDER ( http://www.zincland.com/powder/ )
C++
3
star
85

just-dadjokes

Just the jokes from /r/dadjokes
JavaScript
3
star
86

gulp-flatten-requires

Flattens relative require('./<path>/<module>') calls to require('./<module>')
JavaScript
3
star
87

pixel-shifter

A React component for pixel-shifting text elements
JavaScript
3
star
88

event-listener

Simple function for addEventListener() vs. addEvent()
JavaScript
3
star
89

lmms

Linux MultiMedia Studio working directory
Python
3
star
90

buildumb

Ultra-dumb exporter of Node.js modules for use in the browser
JavaScript
2
star
91

models

Models, models, everywhere. In the client and in the server.
JavaScript
2
star
92

countdown-file

Writes a countdown to a text file every second
JavaScript
2
star
93

django-vgdb

[OLD] Videogame database, opinion & story collector - begat django-mptt
Python
2
star
94

iswydt

Tumblejobs
JavaScript
2
star
95

twitter-searchite

Quick creation of sites driven by polling a Twitter search
JavaScript
2
star
96

stackoverflow

Code from investigating/answering StackOverflow questions
CSS
2
star
97

cookdandbombd-really-ignore-users

Really ignore ignored users
JavaScript
2
star
98

mixinstance

Mix new things into an instance's prototype chain
JavaScript
2
star
99

successcrm

JavaScript
2
star
100

rllmuk-ignore-topics

Hide topics and forums you're not interested in on the Rllmuk forum
JavaScript
2
star