This starter boilerplate app uses the following technologies:
- Both client and server make calls to load data from separate API server
- React Router
- Babel for ES6 and ES7 magic
- Webpack for bundling
- Webpack Dev Middleware
- Webpack Hot Middleware
- Redux's futuristic Flux implementation
- Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
- Redux Router Keep your router state in your Redux store
- ESLint to maintain a consistent code style
- redux-form to manage form state in Redux
- multireducer combine several identical reducer states into one key-based reducer
- style-loader and sass-loader to allow import of stylesheets
- bootstrap-sass-loader and font-awesome-webpack to customize Bootstrap and FontAwesome
- socket.io for real-time communication
Features demonstrated in this project
- Multiple components subscribing to same redux store slice
App.jsthat wraps all the pages contains an
InfoBarcomponent that fetches data from the server initially, but allows for the user to refresh the data from the client.
MiniInfoBarthat displays the same data.
- Server-side data loading
- The Widgets page demonstrates how to fetch data asynchronously from some source that is needed to complete the server-side rendering.
fetchData()function is called before the widgets page is loaded, on either the server or the client, allowing all the widget data to be loaded and ready for the page to render.
- Data loading errors
- The Widgets page also demonstrates how to deal with data loading errors in Redux. The API endpoint that delivers the widget data intentionally fails 33% of the time to highlight this. The
clientMiddlewaresends an error action which the
widgetsreducer picks up and saves to the Redux state for presenting to the user.
- Session based login
- On the Login page you can submit a username which will be sent to the server and stored in the session. Subsequent refreshes will show that you are still logged in.
- Redirect after state change
- After you log in, you will be redirected to a Login Success page. This
magiclogic is performed in
App.js, but it could be done in any component that listens to the appropriate store slice, via Redux's
@connect, and pulls the router from the context.
- Auth-required views
- The aforementioned Login Success page is only visible to you if you are logged in. If you try to go there when you are not logged in, you will be forwarded back to this home page. This
magiclogic is performed by the
- The Survey page uses the still-experimental redux-form to manage form state inside the Redux store. This includes immediate client-side validation.
- WebSockets / socket.io
- The Chat uses the socket.io technology for real-time communication between clients. You need to login first.
From the author
I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too.
Thanks for taking the time to check this out.
– Erik Rasmussen