flexdinesh/react-redux-boilerplate

A minimal React-Redux boilerplate with all the best practices

This project is no longer maitained. If you've been using the boilerplate, it will work well and good. Latest version of redux and react hooks patterns are not used in the boilerplate and it is not recommended to start a new project with this boilerplate in 2020.

A minimal, beginner friendly React-Redux boilerplate with all the industry best practices

_{Created by Dinesh Pandiyan}

Why?

The whole React community knows and will unanimously agree that react-boilerplate is the ultimate starter template for kickstarting a React project. It's setup with all the industry best practices and standards. But it also has a lot more than what you just need to start a react-redux app. It took me quite some time to get my head around what was happening in the codebase and it's clearly not for starters. They quote this right in their readme,

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.

So it involves a lot of additional learning curve to get started with react-boilerplate. That's why I forked it, stripped it down and made this leaner, beginner friendly boilerplate without all the additional complexity.

Features

This boilerplate features all the latest tools and practices in the industry.

• React.js - React 16✨, React Router 5
• Redux.js - Redux saga and Reselect
• Babel - ES6, ESNext, Airbnb and React/Recommended config
• Webpack - Webpack 4✨, Hot Reloading, Code Splitting, Optimized Prod Build and more
• Test - Jest with Enzyme
• Lint - ESlint
• Styles - SCSS Styling

Here are a few highlights to look out for in this boilerplate

Instant feedback

Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!

Next generation JavaScript

Use template strings, object destructuring, arrow functions, JSX syntax and more, today.

Component Specific Styles

Separate styles for each component. Style in the good old scss way but still keep it abstracted for each component.

Industry-standard routing

It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.

Predictable state management

Unidirectional data flow allows for change logging and time travel debugging.

SEO

We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

But wait... there's more!

• The best test setup: Automatically guarantee code quality and non-breaking changes. (Seen a react app with 99% test coverage before?)
• The fastest fonts: Say goodbye to vacant text.
• Stay fast: Profile your app's performance from the comfort of your command line!
• Catch problems: TravisCI setup included by default, so your tests get run automatically on each code push.

Quick start

1. Clone this repo using git clone https://github.com/flexdinesh/react-redux-boilerplate.git
2. Move to the appropriate directory: cd react-redux-boilerplate.
   
3. Run yarn or npm install to install dependencies.
   
4. Run npm start to see the example app at http://localhost:3000.

Now you're ready build your beautiful React Application!

Info

These are the things I stripped out from react-boilerplate - github project rules, ngrok tunneling, shjs, service worker, webpack dll plugin, i18n, styled-components, code generators and a few more.

License

MIT license, Copyright (c) 2018 Dinesh Pandiyan.

react-redux-boilerplate's Issues

Consider adding flow

What do you think about adding flow - static type checker?

Uncaught SyntaxError: Unexpected token <

Hey,
After yarn, running yarn start which compile successfully but gives an error in console:
Uncaught SyntaxError: Unexpected token < (in main.js)
I am using Windows.
Any idea why ?

Deploy to heroku failed

First of all, thanks for your work. Help me so much.

When I try to deploy your app to heroku, i get this error.

ERROR in ./app/components/Header/images/banner.jpg
remote: Module build failed (from ./node_modules/image-webpack-loader/index.js):
remote: Error: write EPIPE
remote:     at WriteWrap.afterWrite (net.js:835:14)
remote:  @ ./app/components/Header/Header.js 13:0-41 21:7-13
remote:  @ ./app/components/Header/index.js
remote:  @ ./app/containers/App/App.js
remote:  @ ./app/containers/App/index.js
remote:  @ ./app/app.js
remote:  @ multi ./app/app.js
remote: Child html-webpack-plugin for "index.html":
remote:      1 asset
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 2
remote: npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --config config/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout`
remote: npm ERR! Exit status 2
remote: npm ERR! 
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2018-07-12T11_57_59_818Z-debug.log
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !	Push rejected to bm-migrator.
remote: 

Do you know what could be?

Only worked when I removed Header component.

css loader issues

Hi,

I'm try to dynamic add css. But it's take js.

Tests dont run

FAIL app\components\Icons\IssueIcon\tests\index.test.js
● Test suite failed to run

C:\Workspace\github\react-redux-boilerplate\config\test-setup.js:3
import 'babel-polyfill';
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:31

6:17)

FAIL app\containers\NotFoundPage\tests\index.test.js
● Test suite failed to run

C:\Workspace\github\react-redux-boilerplate\config\test-setup.js:3
import 'babel-polyfill';
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:31

6:17)

Update README with code removal reasons

Include reason for removing github project rules, ngrok tunneling, shjs, service worker, webpack dll plugin, i18n, styled-components, code generators from the README would be very helpful to understand the complexity they bring.

Where routes and actions should go ?

Where routes and actions should go ?

Is there an even more simplified boilerplate without that confusing `reselect` stuff?

Hi,

so far I'm loving this boilerplate.
But in my oppinion for a "minimal boilerplate" there is still too much confusing stuff in it.

For example all these imports from reselect and the injection of reducers and sagas.

Is there another fork of this without the whole reselect part?

Just React + Redux + Saga with all the up to date developing features (like hot module replacement + persisting state while hot reloading, etc.).

It's now day 3 with this boilerplate and I'm still confused about a few parts.
For example look in the folder app/containers/HomePage/index.js

Wouldn't it be much simpler for beginners using this boilerplate to just do the export like this:

import { connect } from 'react-redux';
import HomePage from './HomePage';
import { loadRepos } from '../App/actions';
import { changeUsername } from './actions';
 
const mapDispatchToProps = (dispatch) => ({
  onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
  onSubmitForm: (evt) => {
    if (evt !== undefined && evt.preventDefault) evt.preventDefault();
    dispatch(loadRepos());
  }
});

const mapStateToProps = createStructuredSelector({
  repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError()
});

export default connect(mapStateToProps, mapDispatchToPops)(HomePage)

Right now I'm really struggling with it. All the other features it gives you are very much appreciated and very nice! Also I found out that the package react-router-redux has been deprecated and now lives under another package called connected-react-router. Not that it bothers me, just because I figured it while going through all the packages it uses :)

What is your oppinion on that? I'm asking because the project literally says:

A minimal, beginner friendly React-Redux boilerplate with all the industry best practices

But for me right now it's:

A React-Redux boilerplate with all the industry best practices

What do you guys think?

Npm start doesnt work

After running npm start i get this error. Tried a few steps to troubleshoot but didnt work, any idea why its happening?

webpack built 7d664c5b6b1056908397 in 4699ms
✖ ｢wdm｣:
ERROR in ./app/components/Header/images/banner.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
Referenced from: /Users/SatishK/IdeaProjects/movie-site2/node_modules/mozjpeg/vendor/cjpeg
Reason: image not found

at Promise.all.then.arr (/Users/SatishK/IdeaProjects/movie-site2/node_modules/execa/index.js:231:11)
at process._tickCallback (internal/process/next_tick.js:109:7)

@ ./app/components/Header/Header.js 12:0-41 34:44-50
@ ./app/components/Header/index.js
@ ./app/containers/App/App.js
@ ./app/containers/App/index.js
@ ./app/app.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true ./app/app.js
ℹ ｢wdm｣: Failed to compile.

Inject reducer arbitrarily rather than top level for redux store to replace reducer

Is it possible to inject the reducer to update the state of existing as well was one level below the current state using following doesnt works rather create a new item in state by name home.userData
const withReducer = injectReducer({ key: 'home.userData', reducer });

Is it possible that we can use key which is . separated to build nested object of asyncReducers ?

Having something like this will make this boilerplate viable for large scale applications , More context here

What is the purpose of export { mapDispatchToProps }

I wrote a comment here on the commit diff

What is the purpose of export { mapDispatchToProps };

As I can leave that line in another container

best regards

@flexdinesh

Redirect does not update Component

I've tried to use push history and Redirect but the effect is always the same, location is changed on browser, but expected Component is not rendered (render method of previous url is called instead). I've tried to use withRouter in compose but also no effect.

App.js:

HomePage:
if (toEquity === true) {
let whereTo = '/equities/' + selectedSuggestion;
return
}

EquityPage is not rendered and not even his methods (componentDidMount, componentWillReceiveProps, ...)

Thanks in advance.

Can this boiler plate be used for making API's?

I tried putting simple get request, which seems to work, but the server is not automatically restarted upon any code change.

Can anyone recommend me if it is good to use this also as an api and also solution to restart server upon change (used nodemon, but iseems to restart multiple times for 1 change which is weird).

Any help is much appreciated !

Thank you

Webpack route page not found

Hi guys,

I am using

npm run build

and It's routing Page not found components.

Can you help me?

Unable to start the boilerplate

Hi,
I encountered the following error when I'm trying to start the boilerplate right after cloning the repo:
Uncaught TypeError: Cannot read property 'get' of undefined
Here is the full error on the console.

Ecosystem:

OS: win 10
browser: chrome: Version 66.0.3359.139
extensions: adguard, ghostery, redux, react, onetab, boomerang, restlet client
node: 8.11.1
npm: 5.6.0

Setp to reproduce:

• git clone https://github.com/flexdinesh/react-redux-boilerplate.git
• cd react-redux-boilerplate
• npm install
• npm start
• open the browser on http://localhost:3000

disclaimer

I'm not a guru with react nor with redux

Regards

Reducer initialState is never set if it's dynamically injected

If I don't include a reducer in reducers.js:

export default function createReducer(injectedReducers) {
  return combineReducers({
    route: routeReducer,
    global: globalReducer,
    ...injectedReducers,
  });
}

And instead just inject it like so:

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'modules', reducer });
const withSaga = injectSaga({ key: 'modules', saga });

export default compose(withReducer, withSaga, withConnect)(App);

Then reducer never seems to set it's initialState - I assume because they don't seem to receive the @@INIT action that causes it to hit the default in it's case statement:

function myReducer(state = initialState, action) {
  switch (action.type) {
    case DO_SOMETHING:
      ...
    default:
      return state; <- never happens
  }
}

It looks like this is because it gets injected at componentWillMount, which is after @@INIT... how do I get the initialState set so that it can be referenced at componentDidMount?

npm audit found 97 high severity vulnerabilities

... can easily be fixed:

-    "lodash": "4.17.11",
+    "lodash": "^4.17.15",

Fresh Install Error

I just installed the app by using yarn.

My terminal showed this ..

warning " > [email protected]" has incorrect peer dependency "react@^15". [5/5] Building fresh packages... [-/6] ⠄ waiting... [-/6] ⠄ waiting... [6/6] ⠄ node-sass [4/6] ⠄ pngquant-bin error /home/haliib/aysaar/app1/node_modules/pngquant-bin: Command failed. Exit code: 1 Command: node lib/install.js Arguments: Directory: /home/haliib/aysaar/app1/node_modules/pngquant-bin Output: ⚠ The /home/haliib/aysaar/app1/node_modules/pngquant-bin/vendor/pngquantbinary doesn't seem to work correctly ⚠ pngquant pre-build test failed ℹ compiling from source ✔ pngquant pre-build test passed successfully ✖ Error: pngquant failed to build, make sure that libpng-dev is installed at Promise.all.then.arr (/home/haliib/aysaar/app1/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)

I tried to migrate my project using this boilerplate to your newest version without immutable.js - getting many errors

Hi,

I have this project: https://github.com/SelfDevTV/forum-creator/tree/noImmutable

I have migrated everything to the newest version of this boilerplate (the one without immutable).
But now when I start my app and I load it i see these errors in the browser console:

Errors: https://imgur.com/a/ilNGj2b (scroll down for more errors)

So I have now no clue what so ever what is going on.
I made exactly the same changes from the last commit.

The component that constantly shows up in the dev tools is the "Navbar" - this is a container.
Here are the files for this container:

https://github.com/SelfDevTV/forum-creator/tree/noImmutable/app/containers/Navbar

I think it has something to do with the newly added redux context.

When I console.log in the injectReducer the property this.context - I get back the context.
When I console.log in the injectSaga the property this.context - the console.log doesn't even run.

//EDIT: Just tried to just not render it, then the next container is in almost every error (Homepage).
So it has to do something with the changed config.
I would be very helpful if you can help me out here since it's big project I'm planning and I already have some code in it and I really don't want to use immutable :P

I also can't really ask this on stackoverflow since I can't relate it to any specific part or file of the codebase.

Adding in foundation-sites with scss?

Im having trouble adding in support for foundation, installing foundation-sites and following this guide seems to throw errors:
https://networksynapse.net/how-to-foundation-6-with-webpack-using-sass/

ℹ ｢wdm｣: Failed to compile from fresh clone

On Osx 10.14.
Node v8.12.0
NPM 6.4.1.

Just out of fresh clone:

Server started ! ✓

Access URLs:
-----------------------------------
Localhost: http://localhost:3000
      LAN: http://172.22.175.36:3000
-----------------------------------
Press CTRL-C to stop

webpack built b98cb75864bb6ea5e219 in 804ms
✖ ｢wdm｣:
ERROR in ./app/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (52:4)

  50 | const render = () => {
  51 |   ReactDOM.render(
> 52 |     <Provider store={store}>
     |     ^
  53 |       {/* <LanguageProvider messages={messages}> */}
  54 |       <ConnectedRouter history={history}>
  55 |         <App />

Need to do hard refresh on new updates.

Hi good day.. I would like to ask if you have a solution to not do hard refresh when I update. Right now I need to do ctrl + f5 to see the changes...

Application level logging

Currently, the frontend app is configured to log information on the server level (node). This makes debugging difficult.

How would you go about implementing application-level logging? There is logger already declared react-redux-boilerplate/server/util/logger.js. Should I add another lib (perhaps winston) or rework logger.js ?

@flexdinesh Could you share your thoughts about that?

How to deploy on subdirectory

How to build of the project in a subdirectory of a server. on the browser, it's not able to load bundles.

i have tried the add output.publicPath='./'

it's didn't work for me

Webpack compile error after fresh git clone, npm install, then npm start

I did a git clone, with no changes to the code.

I ran npm install, no problems. Then I started the server using npm start. The console shows the following error:

ERROR in ./app/components/Header/images/banner.jpg
Module build failed (from ./node_modules/image-webpack-loader/index.js):
Error: write EOF
    at _errnoException (util.js:992:11)
    at WriteWrap.afterWrite [as oncomplete] (net.js:864:14)
 @ ./app/components/Header/Header.js 11:0-41 33:44-50
 @ ./app/components/Header/index.js
 @ ./app/containers/App/App.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true ./app/app.js
i ｢wdm｣: Failed to compile.

Hope for some pointers.

Is It Server Side Rendering ? I think react-helmet doesn't work when changes page

Hi,

I tried your boilerplate and I used to see source page when changes page and it's not changed in the meta tag to support SEO

TypeScript version?

Hi,

It is great but would you mind to create version with TypeScript?

Create a new file called init.js to initialize some of modules

Sorry for my English first 🙇

Just another approach for app.js inside the app folder.
I strong recommend to split app.js code into a new file called init.js.
In init.js we can initialize some of modules, for example:

import FontFaceObserver from "fontfaceobserver";
import { otherModules } from "other-modules";

// Observe loading of Open Sans (to remove open sans, remove the <link> tag in
// the index.html file and this observer)
const openSansObserver = new FontFaceObserver("Open Sans", {});

const registerOpenSans = () => {
  // When Open Sans is loaded, add a font-family using Open Sans to the body
  return openSansObserver.load().then(
    () => {
      document.body.classList.add("fontLoaded");
    },
    () => {
      document.body.classList.remove("fontLoaded");
    }
  );
};

const registerOthers = () => {
  return otherModules();
};

export { registerOpenSans, registerOthers };

Then in app.js we just call like:

import { registerOpenSans, registerOthers }  from './init';

...

registerOpenSans();
registerOthers();

...

What do you think ?

Error on installing package

Hi guys, I got some trouble on installing packages (tried npm & yarn)

Here the output error on installing =>

Any help?

Thanks,
best regards