Quick way to get up and started for prototyping with React, Redux and Express.
- React
- React Router
- Redux with redux-thunk
- Babel for ES6 awesomeness
- Webpack
- Express with Webpack HMRE
- Nodemon for server live-reload
- ESLint
The core app is structured to separate Redux containers and presentational components. Read more about it here. CSS modules is used by default to better scope and separate styles for each component, with a global CSS file for global styles.
app
- Core appactions
- Redux actionsapi
- External services integratedcomponents
- Presentational componentscontainers
- Data/State containersreducers
- Redux reducersstore
- Redux storeapp.global.css
- Global CSS fileindex.tpl.html
- Template HTML for rendering React Components. This will be injected with<style>
tags by Webpackindex.js
- Entry point to approutes.js
- Sample React Router implementation
server
- Server codeserver.js
- Simple Express server setup for Webpack HMRE. By default offloads routing to React Router but can still have REST endpoints setup.
static
- Static assets
git clone git@github.com:zweicoder/react-redux-express-boilerplate.git
cd <project-directory> && npm install
Start a hot dev server
npm run dev
When you're ready to push, first set a new remote
git remote set-url <new-origin>
Checkout branch with no history, then commit and push
git checkout --orphan <new-branch>
git commit -a -m 'Initial Commit'
git push <new-branch>:master
or if no one is working on the repo
git push -f origin orphan:master
Now you can track remote master with your local master. Alternatively delete your local master branch after creating orphan branch, rename it to master and push.
Consider linting and testing before build is allowed to happen, my personal opinion is it slows down prototyping so I only do it when the project gets bigger.
npm run build // This only builds for production
- Setup tests
- Server build