Giter Club home page Giter Club logo

react-redux-webpack-boilerplate's Introduction

React / Redux / Webpack / Hot-Reloading Boilerplate

Understanding, Configuring, and Building

There are a few pre-configured npm scripts:

  • npm run build uses webpack to build bundle.js and places it under the public directory. This bundle contains both the js and css for the app.
  • npm run start starts in "production mode" (no hot reloading). This simply spins up the server under server/app.js, which right now only serves what's in the public directory. There's an example route under server/routes.js to help ya get started.
  • npm run dev is where the magic happens. This introduces the webpack dev and hot middleware (the correct environment variables are set via npm better run), which rebuilds the bundle on css or js changes and injects it into the browser using magic. No reloading necessary!

Thus, to run in production:

npm install
npm run build
npm run start

To run in dev mode:

npm install
npm run dev

To handle the discrepancies between running the client code in "dev mode" or "production mode", there are two helpers provided - containers/Root.js and store/configureStore.js. These modules conditionally load the .dev or .prod extension of their respective file depending on the environment variables when webpack is running. The only difference in the respective versions are loading the necessary tooling for the dev/debugging redux awesomeness. In dev mode, the DevTools react component loads and renders which provides a visual history of all the actions and allows you to go forwards and backwards in time. It also logs all the state changes.

Server Code Structure

All server code goes under the server/src directory.

The main app module currently only configures the Express server and sets up the routes.

I prefer keeping the routes code separate from the rest of the server code. This allows for easier maintainability as you add different endpoints to your application. Right now the only route renders the home page.

Client Code Structure

All client code goes under the client directory.

This boilerplate is set up using the Redux architecture. It's pretty magical.

The main React entry point is client/index. This will load in the other app components and manage state throughout the application. It also loads the main reducer from reducers/myApp and configures the store.

actions/actions, constants/Constants, and reducers/myApp all show how these classes are intended to be used.

react-redux-webpack-boilerplate's People

Contributors

kauffecup avatar

Watchers

James Cloos avatar JP Mamuric avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.