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)

Last update: May 13, 2022

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

GitHub

https://github.com/insin/nwb
Comments
  • 1. Babel 7

    Essential

    • [x] Compatibility issues with babel-plugin-inferno
    • [x] Drop use of loose mode, as extending built-ins works as expected now, but breaks with loose mode
    • [x] babel-plugin-react-transform doesn't work with Babel 7 and is deprecated - switch to react-hot-loader
    • [x] Issue with babel-plugin-add-module-exports for ES5 builds: https://github.com/59naga/babel-plugin-add-module-exports/issues/61
    • [x] stage-X presets are being removed - created a babel-preset-proposals preset we'll use to handle this instead
    • [x] plugin-transform-runtime removed its moduleName option https://github.com/babel/babel/pull/8266
      • Workaround would be to require local installation of @babel/runtime - we could do this automatically for quick commands

    Nice to have

    • [x] Hot Module Replacement - babel-plugin-react-transform doesn't work with Babel 7 and is deprecated.

      Replaced with react-hot-loader (which also supports patching component methods defined with class properties! \o/) and react-hot-loader-loader to mark the main app module for hot reloading without having to add it to your app code.

    • [ ] render() error handling - babel-plugin-react-transform did this really nicely, but it's been removed from the latest react-hot-loader, so you need to deal with render() errors yourself by wrapping with your own error boundary.

      Also not sure if error boundaries preserve state and allow for recovery by fixing render(), which is where babel-plugin-react-transform's HMR handling came in handy when working deep in a component tree.

      Could try using https://github.com/smooth-code/error-overlay-webpack-plugin as a guide to integrating create-react-app's error overlay (does it allow for recovery or it is one-and-done?)

    Reviewed by insin at 2017-11-22 08:58
  • 2. Update to babel 6

    This is a WIP for #12. Currently, there is a bit of duplication on the babel presets used for the different builds, we can definitely do something smarter.

    I chose to use the following presets for babel:

    • es2015
    • react
    • stage-2 (mainly for the spread syntax)
    Reviewed by geowarin at 2015-12-26 18:24
  • 3. PostCSS error in version 0.15.8

    This issue is a: Bug Report

    • [x] Bug report
    • [ ] Feature request
    • [ ] Question / support request
    • [ ] Other

    Got the following error for any given css file after upgrade to 0.15.8 from 0.15.6:

    Module build failed: TypeError: Cannot read property 'postcss' of null
        at Processor.normalize (/Users/xxx/node_modules/postcss/lib/processor.js:136:12)
        at new Processor (/Users/xxx/node_modules/postcss/lib/processor.js:51:25)
        at postcss (/Users/xxx/node_modules/postcss/lib/postcss.js:73:10)
        at /Users/xxx/node_modules/postcss-loader/index.js:122:16
        at process._tickCallback (internal/process/next_tick.js:103:7)
    
    Reviewed by kirill-konshin at 2017-05-26 17:33
  • 4. Allow to pass useable styles option to style loader

    This issue is a: Feature request.

    • [ ] Bug report
    • [x] Feature request
    • [ ] Question / support request
    • [ ] Other

    https://github.com/webpack-contrib/style-loader#reference-counted-api

    Currently this option is not supported by NWB.

    Reviewed by kirill-konshin at 2017-04-11 20:03
  • 5. Sass files with react-component missing after build

    I recently started to work with Sass and wanted to share some common components between projects by making a collection. I therefore created a react-component module from nwb.

    Now I'm in the situation where I would like to share the collection between my projects. Therefore I wanted to make a build with the build script of nwb. I initially thought I would get complete components with css, however it would also not be a problem if it were still the scss files (I import them in other projects which have sass configuration anyway) however in the output there are no scss files.

    Is there a special setting necessary for build in order to keep the sass files in the build?

    Reviewed by arddor at 2016-07-15 15:55
  • 6. Loaders should be configurable

    This issue is a: Bug report.

    • [x] Bug report
    • [ ] Feature request
    • [ ] Question / support request
    • [ ] Other

    As mentioned in #294 providing loader in config leads to unexpected results:

    {
      style: {
        loader: require.resolve('css-loader/useable'),
        options: {modules: true}
      }
    }
    

    Produces:

    [ { loader: '/boilerplate/node_modules/style-loader/index.js',
        options: 
         { loader: '/boilerplate/node_modules/style-loader/useable.js', modules: true } },
    

    Following two configs produce same results:

    css: {options: {modules: true}}
    css: {modules: true}
    
    Reviewed by kirill-konshin at 2017-04-29 06:25
  • 7. Changing loaders

    This issue is a:

    • [ ] Bug report
    • [x] Feature request
    • [x] Question / support request
    • [ ] Other

    I want to change the loaders used for SVG images. Basically I want to SVG's to be inlined, so that I can change the fill color etc. Am I correct in assuming that it isn't possible right now?

    module.exports = () => {
      return {
        type: 'react-app',
        webpack: {
          rules: {
            svg: {
              use: ['svg-inline-loader?classPrefix, image-webpack-loader'] // <-- this doesn't work
            }
          },
          extra: {
            resolve: {
              modules: [path.resolve(__dirname, 'src'), 'node_modules']
            },
            module: {
              rules: [
                {
                  // This will add the rule as the last entry in the Webpack config, but doesn't do anything
                  // It doesn't overwrite the current rule for svg :(
                  test: /\.svg$/,
                  use: ['svg-inline-loader?classPrefix, image-webpack-loader']
                }
              ]
            }
          }
        }
      }
    }
    
    Reviewed by TimonVS at 2017-02-02 14:11
  • 8. Is there a way to import CSS styles into a component?

    I'm using nwb to create isolated React components. Some of these components require CSS styling.

    How can I import an scss stylesheet while developing, and how can I package it for production during the build process?

    Thanks!

    Reviewed by hackingbeauty at 2016-01-23 19:47
  • 9. maintenance of NWB library

    This issue is a:

    • Other

    Hello! NWB is such an important library those days where the devop changes frequently and become a complicated yet essential part of the development. I loved that you covered many technology stacks (web, preact, react....) and that you abstract the implementation details yet support the common formats (es modules, umd, lib).

    I wanted to ask about the maintenance status of this library as it is been a while since you released new version or pushed new commits, there are deprecation and security warnings on libraries that are used by nwb and issues are not getting attentions.

    This is not a criticism, I know how hard it is to try and be on top of all those issues/updates etc. But I would appreciate your answer about the near future planned effort on this library. When are you planning to fix all those deprecations / security issues and release new version?

    Thanks! Eran.

    Reviewed by esakal at 2019-07-11 06:00
  • 10. Library/multi-component example?

    This issue is a:

    • [ ] Bug report
    • [ ] Feature request
    • [x] Question / support request
    • [ ] Other

    I wanted to create a react component library and saw that the docs mention this is possible, but only offers react-bootstrap as an example, which doesn't have the nwb.config files.

    Is there a simple example of how to get this working with multiple components in the src file? What would I have to do with the nwb.config file to get multiple components built for distribution?

    Reviewed by mklemme at 2017-03-23 18:56
  • 11. Need `proxy` support

    In react app development, I usually call remote api in same domain, but the real api server runs on other process/port. So I need a proxy config like this:

    module.exports = {
      webpack: {
        proxy: {
          '/api/': {
            target: 'http://www.myhost.com/api/'
          }
        }
      }
    }
    

    The proxy is a webpack config, I can access http://localhost:3000/api/test to forward to my api server. Expect nwb to support that.

    Reviewed by cpunion at 2016-03-03 04:25
  • 12. Testing.md Documentation Broken Link

    Reviewed by furugoorin at 2022-04-22 15:59
  • 13. Release with phantom dependencies removed?

    Hi, I realized that the most recent version on npm, v0.25.2, still uses phantom but in the master branch of this repo, changes have been made to remove phantom and use Chrome headless. When will these changes be included in a release on npm? I have a project that must use Chrome headless so I am very much relying on this new release. Thank you.

    Reviewed by fnandoz21 at 2022-01-26 18:20
  • 14. [QUESTION]how to ignore stories.js files from ./src when performing nwb build-react-component

    I searched numbers of articles in google and read through their doc(https://github.com/insin/nwb/blob/master/docs/Commands.md#nwb-build) and issues, I can't find anything. but my nwb build brings in .stories.js files into the ./dist directory after built. I store stories.js files alone side my component files in ./src for easier access and update stories.

    I can't find any relevant config can somehow ignore the stories.js files in src file so they won't be generated when I run command like following: nwb build-react-component --copy-files --no-demo

    Any idea or suggestions?

    Reviewed by adamchenwei at 2021-12-30 18:33
  • 15. Avoid NextJS module import error

    This issue is a:

    • Question / support request

    nwb v0.25.2 node v14.17.0 npm v6.14.13 react v17.0.2

    I'm using nwb to build a React component that I've uploaded to a private github repo. I've included the component on regular React projects with no problem. However, NextJS is giving me an error because I'm using CSS modules in the component:

    https://nextjs.org/docs/messages/css-modules-npm

    NextJS seems to think that I'm using the source files rather than the built ones, but that's not correct - the folder for the component in my /node_modules/ folder contains the /lib/ folder with the built files (but they are using module imports).

    How can I build the component in a way that satisfies NextJS?

    Reviewed by MikeWillisFC at 2021-10-13 21:22
  • 16. test failures with object.getprototypeof 1.0.1

    This issue is a:

    • Bug report: test failures. The author of object.getprototypeof was kind enough to publish a workaround, so projects work again. But they have been broken for 4 months until today as far as I can tell (date of publish of is-equal 1.6.2, using object.getprototypeof). See https://github.com/inspect-js/is-equal/issues/77 for some insights.

    REPRO

    $ nwb new react-app tuu
    # edit package.json to use object.getprototypeof 1.0.1
    $ npm run test
    > [email protected] test /tmp/bar/tuu
    > nwb test-react
    START:
    08 09 2021 17:36:46.891:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
    08 09 2021 17:36:46.892:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
    08 09 2021 17:36:46.916:INFO [launcher]: Starting browser PhantomJS
    08 09 2021 17:36:47.127:INFO [PhantomJS 2.1.1 (Linux x86_64)]: Connected on socket GChCaIIaxtzq9rV4AAAA with id 41645376
    PhantomJS 2.1.1 (Linux x86_64) ERROR
      TypeError: Object is not a function (evaluating 'getPolyfill()')
      at webpack:///usr/local/lib/node_modules/nwb/node_modules/reflect.getprototypeof/index.js:10:1 <- tests/App.test.js:6830:33
    
    Finished in 0.218 secs / 0 secs @ 17:36:47 GMT+0200 (heure d’été d’Europe centrale)
    
    SUMMARY:
    ✔ 0 tests completed
    Karma exit code was 1
    

    Is the version of nwb you're using installed globally or locally? globally Which versions of Node.js, npm and nwb are you using (if using it globally)?

    $ node -v
    v10.19.0
    $ npm -v
    6.14.4
    $ nwb -v
    v0.25.2
    
    

    Which modules are installed in your project? none

    Try setting the DEBUG environment variable to nwb before running to check what generated configuration looks like:

    # *nix
    export DEBUG=nwb
    > nwb test-react
    
      nwb 0 nwb-* dependencies in package.json +0ms
      nwb imported config module from /tmp/bar/tuu/nwb.config.js +2ms
      nwb user config: { type: 'react-app',
      babel: {},
      devServer: {},
      karma: {},
      npm: {},
      webpack: {} } +2ms
      nwb createWebpackConfig buildConfig: { babel: { presets: [ 'react' ] },
      devtool: 'cheap-module-inline-source-map',
      node: { fs: 'empty' },
      plugins: { status: { quiet: true } },
      resolve:
       { alias:
          { expect: '/tmp/bar/tuu/node_modules/expect',
            src: '/tmp/bar/tuu/src' } },
      server: { hot: false } } +19ms
      nwb karma config: { browsers: [ 'PhantomJS' ],
      coverageReporter:
       { dir: '/tmp/bar/tuu/coverage',
         reporters:
          [ { type: 'html', subdir: 'html' },
            { type: 'lcovonly', subdir: '.' },
            { type: 'text-summary' } ] },
      files:
       [ '/tmp/bar/tuu/node_modules/@babel/polyfill/dist/polyfill.js',
         '+(src|test?(s))/**/*+(.spec|.test).js' ],
      frameworks: [ 'mocha' ],
      mochaReporter: { showDiff: true },
      plugins:
       [ { 'preprocessor:sourcemap':
            [ 'factory',
              { [Function: createSourceMapLocatorPreprocessor] '$inject': [ 'args', 'logger' ] } ] },
         { webpackPlugin: [ 'type', [Function: Plugin] ],
           'preprocessor:webpack': [ 'factory', [Function: createPreprocesor] ],
           'middleware:webpackBlocker': [ 'factory', [Function: createWebpackBlocker] ] },
         { 'framework:mocha':
            [ 'factory',
              { [Function: initMocha] '$inject': [ 'config.files', 'config' ] } ] },
         { 'reporter:mocha':
            [ 'type',
              { [Function: MochaReporter]
                '$inject': [ 'baseReporterDecorator', 'formatError', 'config' ] } ] },
         { 'launcher:PhantomJS':
            [ 'type',
              { [Function: PhantomJSBrowser]
                '$inject':
                 [ 'baseBrowserDecorator',
                   'config.phantomjsLauncher',
                   'args',
                   'logger' ] } ] } ],
      preprocessors:
       { '+(src|test?(s))/**/*+(.spec|.test).js': [ 'webpack', 'sourcemap' ] },
      reporters: [ 'mocha' ],
      singleRun: true,
      webpack:
       { mode: 'development',
         module:
          { rules:
             [ { test: /\.js$/,
                 loader: '/tmp/bar/tuu/node_modules/babel-loader/lib/index.js',
                 exclude: /node_modules[\\\/](?!react-app-polyfill)/,
                 options:
                  { babelrc: false,
                    cacheDirectory: true,
                    presets:
                     [ [ '/tmp/bar/tuu/node_modules/@babel/preset-env/lib/index.js',
                         { loose: true, modules: false } ],
                       [ '/tmp/bar/tuu/node_modules/@babel/preset-react/lib/index.js',
                         { development: true } ],
                       [ '/tmp/bar/tuu/node_modules/babel-preset-proposals/lib/index.js',
                         { loose: true,
                           decorators: true,
                           classProperties: true,
                           exportDefaultFrom: true,
                           exportNamespaceFrom: true,
                           absolutePaths: true } ] ],
                    plugins:
                     [ '/tmp/bar/tuu/node_modules/@babel/plugin-proposal-optional-chaining/lib/index.js',
                       '/tmp/bar/tuu/node_modules/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js',
                       [ '/tmp/bar/tuu/node_modules/@babel/plugin-transform-runtime/lib/index.js',
                         { absoluteRuntime: '/tmp/bar/tuu/node_modules/nwb',
                           useESModules: true } ],
                       '/tmp/bar/tuu/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js' ] } },
               { test: /\.(gif|png|webp)$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.svg$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.jpe?g$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.(eot|otf|ttf|woff|woff2)$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.(mp4|ogg|webm)$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.(wav|mp3|m4a|aac|oga)$/,
                 loader: '/tmp/bar/tuu/node_modules/url-loader/dist/cjs.js',
                 options: { limit: 1, name: '[name].[hash:8].[ext]' } },
               { test: /\.css$/,
                 use:
                  [ { loader: '/tmp/bar/tuu/node_modules/style-loader/dist/cjs.js' },
                    { loader: '/tmp/bar/tuu/node_modules/css-loader/dist/cjs.js',
                      options: { importLoaders: 1 } },
                    { loader: '/tmp/bar/tuu/node_modules/postcss-loader/src/index.js',
                      options:
                       { ident: 'postcss',
                         plugins:
                          [ { [Function: plugin]
                              options:
                               { overrideBrowserslist:
                                  'last 1 chrome version, last 1 firefox version, last 1 safari version' },
                              browsers:
                               'last 1 chrome version, last 1 firefox version, last 1 safari version',
                              info: [Function],
                              postcssPlugin: 'autoprefixer',
                              postcssVersion: '7.0.36' } ] } } ] } ],
            strictExportPresence: true },
         output: {},
         performance: { hints: false },
         optimization: {},
         plugins:
          [ CaseSensitivePathsPlugin {
              options: {},
              logger:
               Console {
                 log: [Function: bound consoleCall],
                 debug: [Function: bound consoleCall],
                 info: [Function: bound consoleCall],
                 dirxml: [Function: bound consoleCall],
                 warn: [Function: bound consoleCall],
                 error: [Function: bound consoleCall],
                 dir: [Function: bound consoleCall],
                 time: [Function: bound consoleCall],
                 timeEnd: [Function: bound consoleCall],
                 timeLog: [Function: bound timeLog],
                 trace: [Function: bound consoleCall],
                 assert: [Function: bound consoleCall],
                 clear: [Function: bound consoleCall],
                 count: [Function: bound consoleCall],
                 countReset: [Function: bound consoleCall],
                 group: [Function: bound consoleCall],
                 groupCollapsed: [Function: bound consoleCall],
                 groupEnd: [Function: bound consoleCall],
                 table: [Function: bound consoleCall],
                 Console: [Function: Console],
                 markTimeline: [Function: markTimeline],
                 profile: [Function: profile],
                 profileEnd: [Function: profileEnd],
                 timeline: [Function: timeline],
                 timelineEnd: [Function: timelineEnd],
                 timeStamp: [Function: timeStamp],
                 context: [Function: context],
                 [Symbol(counts)]: Map {},
                 [Symbol(kColorMode)]: 'auto' },
              pathCache: {},
              fsOperations: 0,
              primed: false },
            DefinePlugin { definitions: { 'process.env.NODE_ENV': '"test"' } },
            LoaderOptionsPlugin {
              options:
               { options: { context: '/tmp/bar/tuu' },
                 test: { test: [Function: test] } } },
            StatusPlugin {
              disableClearConsole: false,
              quiet: true,
              successMessage: '',
              isInitialBuild: true,
              watchRun: [Function],
              done: [Function] } ],
         resolve:
          { alias:
             { expect: '/tmp/bar/tuu/node_modules/expect',
               src: '/tmp/bar/tuu/src' } },
         resolveLoader:
          { modules:
             [ 'node_modules', '/tmp/bar/tuu/node_modules/nwb/node_modules' ] },
         devtool: 'cheap-module-inline-source-map',
         node: { fs: 'empty' } },
      webpackMiddleware: { logLevel: 'silent' } } +8ms
    
    START:
    08 09 2021 21:48:01.730:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
    08 09 2021 21:48:01.731:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
    08 09 2021 21:48:01.752:INFO [launcher]: Starting browser PhantomJS
    08 09 2021 21:48:01.935:INFO [PhantomJS 2.1.1 (Linux x86_64)]: Connected on socket Lm8ksdwzngeWdRqIAAAA with id 53746178
    PhantomJS 2.1.1 (Linux x86_64) ERROR
      TypeError: Object is not a function (evaluating '__webpack_require__(/*! object.getprototypeof/polyfill */ "./node_modules/object.getprototypeof/polyfill.mjs")()')
      at webpack:///node_modules/is-equal/why.js:21:1 <- tests/App.test.js:4893:132
    
    Finished in 0.236 secs / 0 secs @ 21:48:02 GMT+0200 (heure d’été d’Europe centrale)
    
    SUMMARY:
    ✔ 0 tests completed
    Karma exit code was 1
    Reviewed by jonenst at 2021-09-08 20:05
  • 17. Export Webpack Configuration File

    In order to add Cypress component testing to a project, I need access to the webpack.config.js file. There is effectively no way to "eject" a React app generated using nwb (to use create-react-app terminology).

    The FAQ tells you how to set the debug flag to view the generated Webpack configuration, but it renders the runtime representation (aka console.log) which contains things like [Function] and cannot be copied. It might be possible for me to re-create the Webpack config file by diving into the nwb codebase, but nwb should be able to simply write out the config file being used so it can be require()-d by other tools.

    Reviewed by alecmerdler at 2021-07-14 21:12
Zero configuration Preact widgets renderer in any host DOM
Zero configuration Preact widgets renderer in any host DOM

Preact Habitat A 900 Bytes module for that will make plugging in Preact components and widgets in any CMS or website as fun as lego! Demos Login Widge

May 13, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

May 15, 2022
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

May 8, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Dec 15, 2021
Brownie-next-mix - Everything you need to use NextJS with Brownie

Brownie NextJS Mix This mix comes with everything you need to start using NextJS

Feb 16, 2022
Vanilla JSX + HTML + CSS compiler and static-site generator (SSG)

VANIL Vanilla JSX + HTML + CSS compiler and static-site generator (SSG) VANIL is a compiler and static site generator (SSG) that combines TSX/JSX+HTML

Mar 21, 2022
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

Apr 13, 2022
May 11, 2022
Mar 5, 2022
Enjoy React, Redux, and React-Router, with zero build configuration.
Enjoy React, Redux, and React-Router, with zero build configuration.

react-redux-starter-kit This is yet another single page web application template using React. However, this project attempts to balance simplicity wit

Apr 15, 2022
an npm package for displaying and direct updating state for prototypes on React

React state-control A bunch of lightweight components for updating the model stored in React's stateful components for fast prototyping. Complete libr

May 7, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

May 9, 2022
A template to create a React Library. Zero configuration, just use!

React lib template ?? A simple React lib template based on Parcel and Jest. Usage use this template for your next React lib, modify it and run npm run

May 9, 2022
✨ A template code for creating react component or JS module npm packages.
✨ A template code for creating react component or JS module npm packages.

React Package Template A template code repo for creating react component or JS npm packages. Just follow few steps and you can start publishing your c

May 2, 2022
Vtexio-react-apps - Apps react para plafaforma VTEX.
Vtexio-react-apps - Apps react para plafaforma VTEX.

Projeto Modal + Apps Extras Projeto modal setando cookies. Desenvolvido em React + TypeScript para aplicação em e-commerce VTEXIO. ?? Este projeto se

Jan 3, 2022
✨ Create server-rendered universal JavaScript applications with no configuration
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

May 10, 2022
TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces;

TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces; Advanced Types & TypeScript Features, Generics, Decorators; Full Project culminating this learning adventure; Working with Namespaces & Modules, Webpack & TypeScript, Third-Party Libraries & TypeScript.; React + TypeScript, NodeJS + TypeScript

Dec 27, 2021
Completely static, built with Next.js, Preact, and TailwindCSS

Oxygen Updater website Completely static, built with Next.js, Preact, and TailwindCSS. Detailed setup instructions may follow in a later commit. Getti

Mar 6, 2022
Create-editorconfig - A simple npm script to generate an .editorconfig file

Create EditorConfig A simple npm script to generate an .editorconfig file. You d

Jan 11, 2022