Alex-ray / universal-hmr-ssr-react-redux

⚡A Universal Javascript App Utilizing Express, Webpack, React, Redux and React Router with Server Side Rendering and Hot Module Reloading ⚡

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

⚡ Universal JS, HMR and SSR ⚡

🚧🚧🚧 attention: This project has been updated and upgraded for React Router 4 and Hot Module Reloading 3 over here

Use this project if your still using React Router 3 or below.

🗒 Note:

This project is intended as an example app for using Hot Module Reloading and Server Sider rendering with Express, React, Redux and React Router.

Video walkthrough here: https://www.dropbox.com/s/1vrlqqkridz2jew/zoom_0.mp4

Setup

npm install

For Development (HMR)

npm run dev

For Production (SSR)

npm run build && npm run prod

What is it?

Universal JS: - JavaScript that can run on both the server and client (or any other JS platform for that matter) !

Hot Module Reloading: - Replaces modules that have been changed in real time while preserving the state.

Server Side Rendering: - Renders Pages on the initial for fast page loads and search engine optimization

Why?

Incredibly Productive

Extremely Flexible

Blazing Fast

... And its just plain cool 😎

How?

The Basic setup goes like this...

An express server to handle requests, render the page and handle all our file requests.

Webpack to bundle everything up listen for files changes and hot reload them to the client.

We will be using React, Redux and React Router to match url requests, and render the state to html that we can then send back to the client.

hmr-ssr

Useful Links

About

⚡A Universal Javascript App Utilizing Express, Webpack, React, Redux and React Router with Server Side Rendering and Hot Module Reloading ⚡


Languages

Language:JavaScript 90.1%Language:CSS 9.9%