redux-webpack-es6-boilerplate alternatives and similar libraries
Based on the "Boilerplate" category.
Alternatively, view redux-webpack-es6-boilerplate alternatives based on common mentions on social networks and blogs.
create-react-appSet up a modern web app by running one command.
react-boilerplate:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
electron-react-boilerplateA Foundation for Scalable Cross-Platform Apps
react-redux-starter-kitGet started with React, Redux, and React-Router!.
nx9.5 10.0 redux-webpack-es6-boilerplate VS nxSmart, Fast and Extensible Build System
react-redux-universal-hot-exampleA starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
nwbA toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
react-hot-boilerplateMinimal live-editing example for React
generator-react-webpackYeoman generator for ReactJS and Webpack
react-isomorphic-starterkitCreate an isomorphic React app in less than 5 minutes.
essential-reactA minimal skeleton for building testable React apps using Babel
generator-starhackitStarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL, the infrastructure deployed with GruCloud
relay-fullstack:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
reactpack:package: build your react apps with one command and one `npm i`.
redux-cliAn opinionated CLI for building redux/react apps quicker
universal-reduxAn 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.
reactuateReact/Redux stack (not a boilerplate kit)
gluestickGlueStick is a command line interface for quickly developing universal web applications using React and Redux.
rockpackRockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes
crisp-reactReact boilerplate written in TypeScript with a variety of Jamstack and full stack deployments. Comes with SSR and without need to learn a framework. Helps to split a monolithic React app into multiple SPAs and avoid vendor lock-in.
phoenixA simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
generator-flux-on-railsScaffolder of universal Flux / Redux app, backed by Rails API.
react-enterprise-starter-kitHighly Scalable Awesome React Starter Kit for an enterprise application with a very easy maintainable codebase. :fire:
express-react-boilerplate(Deprecated) 🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
PBandJZero-Config Reusable Component Framework for React 🥜💜
cra-template-redux-auth-starterCreate React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.
create-react-dependencyProject similar to the Create React App for libraries and dependencies
elegantElegant is a utility-first CMS framework for rapidly building expressive and elegant static content web applications.
Appwrite - The Open Source Firebase alternative introduces iOS support
Do you think we are missing an alternative of redux-webpack-es6-boilerplate or a related project?
React + Redux w/ ES6 Starter Project
:tada: A Completely updated version of my initial boilerplate :rocket:
Note: If you still want to use a previous version, please checkout
A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes
Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (
feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.
The provided boilerplate is powered by the following technology stack:
- [x] Redux — an incredibly simple way of modelling your data app state, with great community support
- [x] Webpack 2 and dev middleware — client-side module builder and module loader
- [x] React Hot Loader 3 — combines the best of React Hot Loader and React Transform and fixes some long-standing issues
- [ ] React Router v3 — to allow dynamic routing
- [x] React Router Redux — simple bindings to keep React Router and Redux in sync
- [x] Reselect — provides a way to access Redux state in components and build composable selectors that are automatically memoized
flow-bin) without breaking the project.
- [x] npm — package manager and task runner
- [x] Babel 6 — transpiler from ES6 / JSX to ES5
- [x] PostCSS — ecosystem of custom plugins and tools aimed at transforming extended syntaxes and features into modern, browser-friendly CSS
- [x] CSS Modules — guarantee that all the styles for a single component, designed to fix the problem of the global scope in CSS
- [x] Redux DevTools — a live-editing environment for your Redux apps (and as a browser extension)
- [x] webpack-dashboard — CLI dashboard for your Webpack dev server
- [ ] React Intl — internationalization for React projects
- [x] ESLint — reporter for syntax and style issues
- [x] eslint-plugin-react & eslint-plugin-flowtype — additional React/Flow type specific linting rules for ESLint
- [x] Sass — compiler of CSS styles with variables, mixins, and more
- [ ] Enzyme — makes unit testing React components an absolute pleasure
- [x] Chai — BDD assertion library that works along with
- [x] Sentry — real-time error tracking for your app
Support for Node.js > 5
$ git clone https://github.com/nicksp/redux-webpack-es6-boilerplate.git app-name $ cd app-name $ npm install
White Label It
- Update name, description, author, repository in
- Update app title in [
There are two ways in which you can build and run the web app:
- Build once for (ready for Production):
$ npm run build
$ npm run build:serve
The last command will boot up HTTP server on
3003 port and serve
build/client directory in a default browser
- Hot reloading via webpack middlewares:
$ npm start
- Point your browser to http://localhost:3000/, page hot reloads automatically when there are changes
To execute all unit tests, use:
$ npm run test
To run unit tests continuously during development (watch tests), use:
$ npm run test:watch
Expose App on Your Local Dev Machine
Assign yourself a unique publicly accessible url that will proxy all requests to your locally running webserver.
$ npm install -g localtunnel $ npm start $ npm run tunnel # run in a new tab
You will receive a url, for example
https://tbst.localtunnel.me, that you can share with anyone for as long as your local instance of
lt remains active. Any requests will be routed to your local service at the specified port.
Error Tracking and Insights with Sentry
In order to get info on errors that happened in production, we integrate Sentry into our application to track errors and get context on what happened.
To use it on your side, configure it first:
- Create account at https://sentry.io/signup/
- Add new project for your app on Sentry website
SENTRY_APPconstants values that you got after adding a new project
- Don't forget to define
Allowed Domainssection under your
Project Settingson Sentry website to track errors from required domains
For debugging purposes please use:
- Redux DevTools plugin for Chrome to simplify debugging React apps.
- React Developer Tools
What's this for?
This starter kit implements best practices like testing (
unit testing), minification, bundling, and so on. It saves you from the long, painful process of wiring it all together into an automated dev environment and build process.
What's happening under the hood when I run
Webpack serves your app in memory when you run
npm start. No physical files are written. However, the web root is
/src, so you can reference files under /src in index.html. When the app is built using
npm run build, physical files are written to
/build folder and the app is served from
How is Sass being processed?
We're handling it differently in DEV vs PROD.
When you run
- The sass-loader compiles Sass into CSS
- Webpack bundles the compiled CSS into app.js. Sounds weird, but it works!
When you run
npm run build:
- The sass-loader compiles Sass into CSS
- The extract-text-webpack-plugin extracts the compiled Sass into app.css
- buildHtml.js adds a reference to the stylesheet to the head of index.html.
How do I deploy this?
npm run build. This will prepare and build the project for production use. It does the following:
- Minifies all JS and CSS
- Inline base64 URLs for images and fonts if their size is less than specified limit
- Sets NODE_ENV to
productionso that React is built in production mode
- Places the resulting built project files into
/builddirectory. (This is the folder you'll expose to the world).
- [ ] Watch
- [ ] Setup test environment for React components using Enzyme, Mocha and Karma
- [ ] Add support for React Intl
- [ ] Add support for dynamic routing (
- [ ] Update
FAQsection to reflect latest greatest changes
- [ ] Add more Flow type annotations incrementally to allow Flow to validate more code, and gradually increase Flow’s coverage of the codebase
- [ ] Integrate Material Design or Bootstrap
- [ ] Check if PostCSS integration works
- [ ] Apply more best practices to how code is organized and written
- [ ] Add section about available
- [ ] Any more ideas?
MIT License, 2016
Brought to you by Nick S. Plekhanov
*Note that all licence references and agreements mentioned in the redux-webpack-es6-boilerplate README section above are relevant to that project's source code only.