glenjamin / ultimate-hot-reloading-example

Hot reload all the things!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ultimate Hot Reloading Example

πŸ‘‰πŸ‘‰πŸ‘‰πŸ‘‰ This project is intended as an example of how to fit an application together, the idea is that you read the code and understand how it works - then apply the same approach in your own projects. πŸ‘ˆπŸ‘ˆπŸ‘ˆπŸ‘ˆ

This is NOT intended as a boilerplate or a starter kit, I don't recommend using it as a base for a project unless you're happy that you know how stuff fits together.

Goals

  • Only one running node process βœ…
  • Client-side Redux reducer hot reloading βœ…
  • Server-side Redux reducer hot reloading βœ…
  • Client-side React component hot reloading (preserving this.state) βœ…
  • Server-side React component hot reloading βœ…
  • Server-side express routes hot reloading βœ…
  • Client side css-modules hot reloading βœ…
  • Using mostly ES6 module syntax, except where dynamic loading is needed βœ…
  • Data fetching through a remote API
  • Multiple pages via Routing

Why?

Hot reloading & related techniques can be used to provide an ultra-fast feedback cycle. Watch this video if you'd like to hear more about why this is great.

Video: Confident User Interface Programming - CodeMesh 2016

Installing

Once cloned locally, run npm install. To start the server run npm start and visit http://localhost:3000/ in your browser.

Try it out

  • Change initial in reducers/index.js and hit refresh to see server redux reload
  • Change INC amount in reducers/index.js to and hit the button to see client redux reload
  • Change component in components/App.js to see client/server react reload
  • Change the responses in server/app.js to see the express routes reload
  • Change the CSS in client/common/layout.css to see imported CSS reload
  • Change the CSS in client/components/App.css to see the imported CSS reload

Demo

ultimate-reload-css

About

Hot reload all the things!


Languages

Language:JavaScript 93.3%Language:HTML 3.7%Language:CSS 3.0%