dimimikadze / express-react-redux-starter Goto Github PK
View Code? Open in Web Editor NEWStarter for Express, React, Redux, SCSS applications
Starter for Express, React, Redux, SCSS applications
package.json
. Add "pm2": "^2.1.6"
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.
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.
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!
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.