Yeoman generator for ReactJS and Webpack

Last update: Jun 3, 2022

generator-react-webpack

Coverage Status Join the chat at https://gitter.im/newtriks/generator-react-webpack Build Status Amount of Downloads per month Dependency Tracker Dependency Tracker Node Version

Yeoman generator for ReactJS - lets you quickly set up a project including karma test runner and Webpack module system.

About

Generator-React-Webpack will help you build new React projects using modern technologies.

Out of the box it comes with support for:

  • Webpack
  • ES2015 via Babel-Loader
  • Different supported style languages (sass, scss, less, stylus)
  • Style transformations via PostCSS
  • Automatic code linting via esLint
  • Ability to unit test components via Karma and Mocha/Chai

Changes since version 2.0

This generator is written in ES2015. This means it is not compatible with node.js versions before 4.0.

It also does NOT include support for Flux-Frameworks anymore. Instead, we will use it as a base for other generators to build upon. This will make the base generator easier to use and update.

If you are interested, feel free to write your own generator and use generator-react-webpack as a base (via composition).

If you have built a generator using generator-react-webpack, tell us and we will add a link to our README.

Generators that extend generator-react-webpack


Installation

# Make sure both is installed globally
npm install -g yo
npm install -g generator-react-webpack

Setting up projects

# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project

# Run the generator
yo react-webpack

Please make sure to edit your newly generated package.json file to set description, author information and the like.

Generating new components

# After setup of course :)
# cd my-new-project
yo react-webpack:component my/namespaced/components/name

The above command will create a new component, as well as its stylesheet and a basic testcase.

Generating new stateless functional components

yo react-webpack:component my/namespaced/components/name --stateless

Stateless functional components where introduced in React v0.14. They have a much shorter syntax than regular ones and no state or lifecycle methods at all. Please read the React 0.14 release notes to get more information about those components.

Note: You will still be able to set properties for stateless components!

Adding PostCSS plugins

If you have enabled PostCSS at generation time, install your PostCSS plugins via npm and require it in postcss function in cfg/base.js.

Example for autoprefixer:

cd my-new-project
npm install autoprefixer

Require in cfg/base.js

...
postcss: function () {
  return [
    require('autoprefixer')({
      browsers: ['last 2 versions', 'ie >= 8']
    })
  ];
}
...

Usage

The following commands are available in your project:

# Start for development
npm start # or
npm run serve

# Start the dev-server with the dist version
npm run serve:dist

# Just build the dist version and copy static files
npm run dist

# Run unit tests
npm test

# Auto-run unit tests on file changes
npm run test:watch

# Lint all files in src (also automatically done AFTER tests are run)
npm run lint

# Clean up the dist directory
npm run clean

# Just copy the static assets
npm run copy

Naming Components

We have opted to follow @floydophone convention of uppercase for component file naming e.g. Component.js. I am open to suggestions if there is a general objection to this decision.

Modules

Each component is a module and can be required using the Webpack module system. Webpack uses Loaders which means you can also require CSS and a host of other file types. Read the Webpack documentation to find out more.

Props

Thanks to Edd Hannay for his Webpack optimisations, my local merge and testing meant his additions lost his signature (my fault, sorry). So, big thanks Edd.

Contribute

Contributions are welcomed. When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.

Running Tests

npm test or node node_modules/.bin/mocha

License

MIT license

GitHub

https://github.com/react-webpack-generators/generator-react-webpack
Comments
  • 1. App stuck at 'wait until bundle finished: /assets/app.js'

    So, for some reason the app won't get past wait until bundle finished: /assets/app.js when I run 'npm start' or 'npm run serve'.

    Also, 'npm run dist' gets stuck at > copyfiles -f ./src/index.html ./src/favicon.ico ./dist

    Anyone running into this issue as well?

    I am on node v5.0.0 Latest version of the generator.

    I have been using this for a week now without a problem, so im not sure what is causing it now.

    Reviewed by harrisrobin at 2015-11-26 18:05
  • 2. "cannot get /" error with react-router

    Hi! :)

    I started a new project today, and when I tried to create routes like this:

    //main.js file
    var Routes = (
      <Route path="/" handler={App}>
        <Route path="/profile" name="profile" handler={Profile}/>
        <DefaultRoute name="home" handler={Home}/>
      </Route>
    );
    
    //app-name.js file
    
      render: function() {
        return (
          <div className="wrapper">
            <ReactTransitionGroup transitionName="fade">
              <RouteHandler/>
            </ReactTransitionGroup>
          </div>
        );
      }
    

    Return "cannot get /profile" error when I access the URL. But DefaultRoute works fine (even when I change {Home} do {Profile}). What I'm doing wrong? :(

    Edit: It's maybe related to this https://github.com/newtriks/generator-react-webpack/issues/117

    I added 'historyApiFallback: true' line in gruntfile.js. Now I can change url, but they show only '{Home}' content. :/

    (If I build the app and run in http serve, works fine)

    Reviewed by highlabs at 2015-08-18 21:54
  • 3. Remove Flux, Reflux, etc from generator

    The generator has gained much more traction than I would have invisaged and to maintain it better I need to remove complexity and additional potentially unnecessary functionality.

    A while back I merged in a pull request that introduced Flux and Reflux. Although the input was appreciated it has increased the overall scope of this generator, has confusing directory naming conventions (a, c, s) and with the growth of the options to develop with React, the additions could become endless. I should have paid more attention and had more forethought, however, I simply have not had the time to focus as I wanted on this generator.

    I am going to start looking at removing all the unnecessary framework related bloat and hopefully someone in the community can separately write their own generators for them.

    Reviewed by newtriks at 2015-07-22 07:34
  • 4. renaming the project

    For every operation, one needs to write yo react-webpack, quite long I assume. There is no workaround for alias name, so the only option is to rename the entire project.

    generator-react is already taken. Can anyone think about a cool and short name?

    Reviewed by yonatanmn at 2015-04-08 22:10
  • 5. Testing default props

    Is there an example anywhere on how to test default properties?

    'use strict';
    import React from 'react';
    require('styles//Dan.less');
    class DanComponent extends React.Component {
      render() {
        return (
          
    {this.props.name} is now here!
    ); } } DanComponent.displayName = 'DanComponent'; // Uncomment properties you need DanComponent.propTypes = { name: React.PropTypes.string }; DanComponent.defaultProps = { name: '==blank' }; export default DanComponent; == test 'use strict'; import createComponent from 'helpers/shallowRenderHelper'; import DanComponent from 'components//DanComponent.js'; describe('DanComponent', () => { let component; beforeEach(() => { component = createComponent(DanComponent); }); it('should have its component className as dan-component', () => { expect(component.props.className).to.equal('dan-component'); }); it('Name default property should be ==blank', () => { expect(component.defaultProps.name).to.equal('==blank'); }); });

    I understand that 'react-addons-test-utils' may help in this area but I wanted to see if there was an example anywhere on here a la "out of the box".

    Reviewed by dannymk at 2016-07-12 19:15
  • 6. Browser keeps loading "old" version of js files

    When running npm start, a browser is launched to http://localhost:8000/webpack-dev-server/ (which is expected).

    Then, when changing anything in code, for example in the Main.js file, nothing happens in the browser. Worse even, when refreshing the browser window, the changes made to the source code are not reflected at all.

    Is there anything else I need to do to get this working? Extra watch/build commands to run?

    Thank you

    Reviewed by NickSevens at 2016-06-16 12:19
  • 7. Running app generator does not create project scaffold

    when iI follow the introduction to generate my project, here comes the error. my command:"yo react-webpack galleyReact",i want to use react-webpack to generate a project named "galleryReact",then ? Please choose your application name (galleryReact)

    events.js:141 throw er; // Unhandled 'error' event ^

    TypeError: this.env.adapter.prompt(...).then is not a function at Base.prompt (C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\yeoman-generator\lib\base.js:240:45) at module.exports.generator.Base.extend.prompting (C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\generators\app\index.js:40:10) at Object. (C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\yeoman-generator\lib\base.js:439:23) at C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\yeoman-generator\node_modules\run-async\index.js:26:25 at C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\yeoman-generator\node_modules\run-async\index.js:25:19 at C:\Users\Administrator\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\yeoman-generator\lib\base.js:440:9 at processImmediate as _immediateCallback

    i have no idea of solving this problem,hoping you can give some help,thanks!

    Reviewed by loosenRogers at 2016-08-11 14:19
  • 8. Authoring Wiki pages for common next-steps

    There are usually certain next-steps after setting up the base generator, e.g. adding React Router, certain upcoming packages like css modules, flux implementations (I know there are superseding generators for some of them), react bootstrap or more advanced modifications like setting up code splitting, building various widgets, etc. Following the repo for quite some time I noticed there is lots of valuable guidance to individual questions spread across the existing issues.

    I wonder if you would consider it a good idea to build a topic-based Wiki for some of these things. In my opinion it would serve as a guide for us users to achieve a next step, but it might also clarify an implementation path to additions to the generator in the future. It might also help keeping this generator as thin as possible but still providing the relevant upgrade paths for its users.

    If it sounds interesting a possible next step would be to collect some interesting topics. I don't know exactly how much time I'll have in the coming weeks, but I'd be happy to draft some content and PR it into the repo.

    Reviewed by sthzg at 2016-05-15 16:13
  • 9. Try to use Browser-sync in our kit. But failed.

    You guys do a good job, I love your kit to do my development, helps a lot. Here is my problem:

    I try to use Browser-sync in our kit, refresh the browser automatically after change any html,css,js code!

    Follow the config file here : https://github.com/Browsersync/recipes/tree/master/recipes/webpack.react-hot-loader

    Changed our project's config like this:

        'use strict';
    require('core-js/fn/object/assign');
    const webpack = require('webpack');
    const config = require('./webpack.config');
    const open = require('open');
    var browserSync = require('browser-sync');
    var webpackDevMiddleware = require('webpack-dev-middleware');
    var webpackHotMiddleware = require('webpack-hot-middleware');
    var path = require('path');
    
    var bundler = webpack(config);
    
    browserSync({
        server: {
          baseDir: './src',
    
          middleware: [
            webpackDevMiddleware(bundler, {
              publicPath: path.join(__dirname,'dist','assets'),
              stats: { colors: true }
            }),
            webpackHotMiddleware(bundler)
          ]
        },
        files: [
          'src/**/*.scss',  //use for SCSS change and refresh browser
          'src/*.html'
        ]
    });
    

    The error is:

    1. F12 and console: /assets/app.jsis not loaded!
    2. Change any js code in components, the browser is refreshed, but show nothing in the page.

    Anyone, any suggestions? Thank you.

    Reviewed by wayearn at 2016-08-08 03:53
  • 10. when i use "npm run serve",the following error occurs,but "npm run serve:dist" is ok.

    The following error occurs when I start the server after initial install: http://localhost:8000/assets/app.js 404 (Not Found)

    ERROR in ./src/index.js
    Module parse failed: d:\works\ad-fe\react-webpack\src\index.js Unexpected token
    (7:16)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (7:16)
        at Parser.pp.raise (D:\works\ad-fe\react-webpack\node_modules\acorn\dist\aco
    rn.js:920:13)
        at Parser.pp.unexpected (D:\works\ad-fe\react-webpack\node_modules\acorn\dis
    t\acorn.js:1483:8)
        at Parser.pp.parseExprAtom (D:\works\ad-fe\react-webpack\node_modules\acorn\
    dist\acorn.js:330:12)
        at Parser.pp.parseExprSubscripts (D:\works\ad-fe\react-webpack\node_modules\
    acorn\dist\acorn.js:225:19)
        at Parser.pp.parseMaybeUnary (D:\works\ad-fe\react-webpack\node_modules\acor
    n\dist\acorn.js:204:17)
        at Parser.pp.parseExprOps (D:\works\ad-fe\react-webpack\node_modules\acorn\d
    ist\acorn.js:151:19)
        at Parser.pp.parseMaybeConditional (D:\works\ad-fe\react-webpack\node_module
    s\acorn\dist\acorn.js:133:19)
        at Parser.pp.parseMaybeAssign (D:\works\ad-fe\react-webpack\node_modules\aco
    rn\dist\acorn.js:110:19)
        at Parser.pp.parseExprList (D:\works\ad-fe\react-webpack\node_modules\acorn\
    dist\acorn.js:657:23)
        at Parser.pp.parseSubscripts (D:\works\ad-fe\react-webpack\node_modules\acor
    n\dist\acorn.js:249:29)
     @ multi main
    webpack: bundle is now VALID.
    
    Reviewed by galaa2011 at 2016-05-26 16:44
  • 11. I install generator, but can't find and use it.

    I use the command npm install -g generator-react-webpack to install react-webpack generator to yo. It works. After that, I run yo react-webpack , but it failed. And it shows:

    Error react-webpack You don't seem to have a generator with the name react-webpack installed. You can see available generators with npm search yeoman-generator and then install them with npm install [name]. To see the 0 registered generators run yo with the '--help' option.

    That means I didn't install any generator. But in root of npm's installation directory, I find 'generator-react-webpack' folder, and in that folder the command of yo react-webpack can work.

    I use iterm and zsh in MacOS. And I try yo completion, it shows some options, I choose 'Zsh config file', but it shows even I use sudo : oh oh Error: EACCES: permission denied, open '/usr/local/lib/node_modules/.yo_npminstall/tabtab/1.3.2/tabtab/.completions/yo.zsh' at Error (native)

    What should I do to fix it and use generator?

    Reviewed by le0zh0u at 2016-08-22 16:12
  • 12. Error trying to run npm run dist

    `$ npm run dist

    @0.0.1 dist /Users/jbriceno/workspace/web/amp-web-skin-maker npm run copy-files & webpack --env=dist

    @0.0.1 copy-files /Users/jbriceno/workspace/web/amp-web-skin-maker copyfiles ../src/index.html ../src/favicon.ico ../dist

    internal/modules/cjs/loader.js:583 throw err; ^

    Error: Cannot find module './index' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:20:18) at Object. (/Users/jbriceno/workspace/web/amp-web-skin-maker/node_modules/.bin/copyfiles:3:17) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @0.0.1 copy-files: copyfiles ../src/index.html ../src/favicon.ico ../dist npm ERR! Exit status 1 `

    Reviewed by jbricenoz at 2018-11-29 22:13
  • 13. React Version is Old

    1. Run generator as per README

    Expected

    • A recent or latest version of react

    Actual

    • Pre-generated package.json has version 15 of react which is not current
    Reviewed by GUSCRAWFORD at 2018-08-31 19:31
  • 14. install warn

    When I install webpack with npm install -g generator-react-webpack npm install -g generator-react-webpack somthing is wrong

    npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead

    [email protected] postinstall C:\Users\Yvonne\AppData\Roaming\npm\node_modules\generator-react-webpack\node_modules\spawn-sync node postinstall

    What happend here.How can I fix it an install correctly.Thanks

    Reviewed by YvonneD at 2018-03-23 16:15
  • 15. How can I set webpack proxy in cfg/base.js

    const path = require('path'); const defaultSettings = require('./defaults');

    const additionalPaths = []; // Remote target const targetServiceUrl = 'http://xxxxxxxxxxxxxxxxx';

    module.exports = { additionalPaths, port: defaultSettings.port, debug: true, devtool: 'eval', output: { path: path.join(__dirname, '/../dist/assets'), filename: 'app.js', publicPath: defaultSettings.publicPath, }, devServer: { contentBase: './src/', quiet: false, proxy: { '/api/': { target: targetServiceUrl, pathRewrite: { '^/api': '' }, secure: false, }, '/view/': { secure: false, bypass: () => '/index.html', }, }, }, resolve: { extensions: ['', '.js', '.jsx'], alias: { assets: ${defaultSettings.srcPath}/assets/, components: ${defaultSettings.srcPath}/components/, stores: ${defaultSettings.srcPath}/stores/, utils: ${defaultSettings.srcPath}/utils/, config: ${defaultSettings.srcPath}/config/${process.env.REACT_WEBPACK_ENV}, 'react/lib/ReactMount': 'react-dom/lib/ReactMount', }, }, module: {}, };

    Here is my base.js, but it doesn't work,help!

    Reviewed by Anoiing at 2017-10-19 11:08
  • 16. impossible to use any node package added

    Hi,

    I have installed

    material-ui react-toolbox

    And I cannot use it them in the Main component any idea?

    my code

    require('styles/App.css');
    
    import React from 'react';
    import { render } from 'react-dom';
    import { Button } from 'react-toolbox/lib/button';
    
    
    let logoImage = require('../images/origin.jpg');
    
    class AppComponent extends React.Component {
      render() {
        return (
    
          <Button label="Hello World!" />
    
    
        );
      }
    }
    
    AppComponent.defaultProps = {
    };
    
    export default AppComponent;
    

    error

    warning.js?8a56:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AppComponent`. in AppComponent printWarning @ warning.js?8a56:33 warning @ warning.js?8a56:57 createElement @ ReactElementValidator.js?a599:190 render @ Main.js?7cd4:14 (anonymous) @ makeAssimilatePrototype.js?c7d8:15 (anonymous) @ ReactCompositeComponent.js?d2b3:793 measureLifeCyclePerf @ ReactCompositeComponent.js?d2b3:73 _renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?d2b3:792 _renderValidatedComponent @ ReactCompositeComponent.js?d2b3:819 performInitialMount @ ReactCompositeComponent.js?d2b3:359 mountComponent @ ReactCompositeComponent.js?d2b3:255 mountComponent @ ReactReconciler.js?399b:43 performInitialMount @ ReactCompositeComponent.js?d2b3:368 mountComponent @ ReactCompositeComponent.js?d2b3:255 mountComponent @ ReactReconciler.js?399b:43 mountComponentIntoNode @ ReactMount.js?26a9:102 perform @ Transaction.js?f15f:141 batchedMountComponentIntoNode @ ReactMount.js?26a9:124 perform @ Transaction.js?f15f:141 batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:60 batchedUpdates @ ReactUpdates.js?8e6b:95 _renderNewRootComponent @ ReactMount.js?26a9:317 _renderSubtreeIntoContainer @ ReactMount.js?26a9:399 render @ ReactMount.js?26a9:420 (anonymous) @ index.js?9552:7 (anonymous) @ VM19946:24 (anonymous) @ VM19946:25 (anonymous) @ app.js:1051 __webpack_require__ @ app.js:556 fn @ app.js:87 (anonymous) @ app.js:588 __webpack_require__ @ app.js:556 (anonymous) @ app.js:579 (anonymous) @ app.js:582 invariant.js?4599:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `AppComponent`. at invariant (eval at <anonymous> (app.js:1177), <anonymous>:42:15) at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (eval at <anonymous> (app.js:1585), <anonymous>:72:55) at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (app.js:1591), <anonymous>:364:22) at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (app.js:1591), <anonymous>:255:21) at Object.mountComponent (eval at <anonymous> (app.js:1537), <anonymous>:43:35) at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (app.js:1591), <anonymous>:368:34) at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (app.js:1591), <anonymous>:255:21) at Object.mountComponent (eval at <anonymous> (app.js:1537), <anonymous>:43:35) at mountComponentIntoNode (eval at <anonymous> (app.js:1117), <anonymous>:102:32) at ReactReconcileTransaction.perform (eval at <anonymous> (app.js:1579), <anonymous>:141:20)

    Thanks

    Reviewed by radjivF at 2017-10-16 02:44
"To-do list" app - built with reactjs JSX javaScripts webpack gitflow

Project Name : To Do Lists "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to ma

May 27, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

May 12, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

May 12, 2022
A collection of 14 different React projects like Music Player, Weather App, Crypto Tracker, Chat Room, Currency Converter, COVID Tracker, To-do and Expense App, Color Generator etc.
A collection of 14 different React projects like Music Player, Weather App, Crypto Tracker, Chat Room, Currency Converter, COVID Tracker, To-do and Expense App, Color Generator etc.

Simple React Projects Note: If any project does not work Online download the project and run on your local Storage (Error is coming due to Local Stora

Jun 9, 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

Jun 8, 2022
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Jun 22, 2022
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It com

Jun 4, 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

May 22, 2022
A Demo SPA developed with React, ES6, Webpack (2.x), and Antd (1.0.1) 【move to react-seed】

Target 使用React技术栈开发SPA. Tech Stack UI库:React & React-Dom UI组件:Antd 路由:React-Router & History 框架:Reflux JS:ES6 样式:Less 图标:Antd自带/FontAwesome 动画:Animate

Jun 18, 2022
a starter-template with typescript, react, mobx and webpack...
a starter-template with typescript, react, mobx and webpack...

This is a simple (admin) starter with typescript, react and webpack. Have a quick view: setup If you do not need the taobao registry, you can change i

Jun 17, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Jun 16, 2022
An Electron boilerplate featuring typescript, react, webpack, tailwind and redux - ready to use!

A secure, modular, and easy to use Electron Forge boilerplate featuring Typescript, React, Webpack, TailwindCSS, Redux and persistance (with redux-persist support)

Jun 23, 2022
Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.
 Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh.

Oct 6, 2021
Starting project with react from scratch using webpack and babel
Starting project with react from scratch using webpack and babel

React Part 2 Meliuz Iniciando projeto com react do zero usando webpack e babel. O que é? (Onde vivem? O que comem?) webpack (com “w” minúsculo, respei

Oct 30, 2021
A react starter template configured with Webpack, Typescript and Redux

React Starter Kit ??‍?? A react starter template configured with Webpack, Typescript, Redux, and React Router. Features ?? ⚡️ Configured with typescri

Jun 8, 2022
Redux port of SurviveJS - Webpack and React Kanban app

Kanban app - redux port This repository contains redux port of the SurviveJS - Webpack and React Kanban example. See Dan Abramov's interview about red

Apr 28, 2022
A boilerplate for a Koa Redux React application with Webpack, Mocha and SASS

Boilerplate for a Koa Redux React app with Webpack, Mocha, SASS, Babel, ESLint... Docs Detailed blogpost on how was this boilerplate built Good to und

Nov 26, 2021
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Oct 24, 2021
Redux immutable architecture boilerplate with Webpack and React
Redux immutable architecture boilerplate with Webpack and React

A simple Boilerplate including the best concepts and libraries of React and Redux plus some useful UI components (Toaster, Modals, Responsive Side Men

Jul 14, 2019