Skip to content

gautamnaik1994/ultimate-hot-reloading-example

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 ✅
  • 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

Installing

Once cloned locally, run npm install. To start the server run npm start and visit http:https://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!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.0%
  • HTML 3.9%
  • CSS 3.1%