dimimikadze / express-react-redux-starter Goto Github PK

• It's missing the PM2 dependency for production in package.json. Add "pm2": "^2.1.6"
• Add the hook: "postinstall": "rm -rf dist && webpack --config ./webpack/webpack-prod.config.js --colors"
• Move most of the dev-dependencies to dependencies, as Heroku will need them to build the app

While working with Redux I've found it tremendously helpful to use the spread operator ... in my reducers as suggested by Dan Abramov in Getting Started with Redux. Adding it allows one to do the following:

return {
  ...state,
  currentTime: action.time,
}

Instead of:

return Object.assign({}, state, {
  currentTime: action.time,
});

Object.assign is called under the hood.

If you'd like to add to this kit just npm i -D transform-object-rest-spread eslint-plugin-prefer-object-spread and update the Babel config as such:

{
  "presets": ["react", "es2015", "stage-1"],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

And change your ESLint config file to:

{
  "extends": "airbnb",
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true
    }
  },
  "plugins": [
    "prefer-object-spread"
  ],
  "rules": {
    "prefer-object-spread/prefer-object-spread": "error"
  },
}

The ESLint plug-in and rule are optional.

Hello,

I just try this starter kit, when I run npm run start i got this error sh: 1: pm2: not found
any ide ?

Thanks before

This kit is good for getting started; I really appreciate the minimalism. Thanks for putting it together.

In my experience cheap-eval-source-map has never rendered source maps correctly, and I'm seeing the same behavior with this starter kit in Chrome 51. After updating the Webpack devool to source-map and restarting dev, source maps function as expected. And they're super helpful. Might be a good addition to the kit.

Debugging Redux can go in a few different directions. Right now I'm using the chrome extension to debug alongside remote devtools.

Here's how to get it going:

Install the Chrome extension and then npm i -D remote-redux-devtools. Then create a file called /store/configureStore.js in the src/app directory with the following contents:

import { createStore, applyMiddleware, compose } from 'redux'
import devTools from 'remote-redux-devtools'
import reducer from '../reducers'

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(),
    devTools()
  )
  return createStore(reducer, initialState, enhancer)
}

And finally update src/app/index.js to use the new configureStore method:

import configureStore from './store/configureStore'

import './components/bundle.scss'

const store = configureStore()

It might take a little more configuration (i.e. for react-router-redux), but that's the gist of it. Hope it's helpful!

Was curious why full page refresh hot loading (not that it is "bad") was chosen versus the HMR which would update components on the fly w/out a full page reload.

Hi Dimitri,

Thanks for this nice boilerplate. I have a question. Where would you put the images and SVGs to make them work for both environment, dev and production.

Thanks