All Projects → Alex-ray → Universal Hmr Ssr React Redux

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 ⚡

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Universal Hmr Ssr React Redux

Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+2955%)
Mutual labels:  hot-reload, server-side-rendering
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (+86.67%)
Mutual labels:  hot-reload, server-side-rendering
easywebpack-vue
Vue Webpack Building Solution, Support Vue Server Side Render (SSR), Client Side Render (CSR) Building
Stars: ✭ 29 (-51.67%)
Mutual labels:  server-side-rendering, hot-reload
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (+145%)
Mutual labels:  hot-reload, server-side-rendering
ultimate-hot-boilerplate
🚀 node-react universal app boilerplate with everything on hot reload, SSR, GraphQL, Flow included
Stars: ✭ 35 (-41.67%)
Mutual labels:  server-side-rendering, hot-reload
vue-ssr-example
Ready for use Example for Vue + Vuex + TS + SSR + Jest
Stars: ✭ 23 (-61.67%)
Mutual labels:  server-side-rendering, hot-reload
Easywebpack
A Simple, Powerful Webpack Front-End Development Solution
Stars: ✭ 452 (+653.33%)
Mutual labels:  hot-reload, server-side-rendering
React Pwa Webpack Starter
Boilerplate to build a React PWA with Webpack + Workbox
Stars: ✭ 38 (-36.67%)
Mutual labels:  hot-reload
Boot Figreload
Boot task providing live-reload using Fighweel client
Stars: ✭ 50 (-16.67%)
Mutual labels:  hot-reload
Hot Reload.vim
A (Neo)vim plugin for Flutter to automatically hot reload the project every time a file is saved
Stars: ✭ 33 (-45%)
Mutual labels:  hot-reload
Got Reload
Reload Go code in a running process at function/method level granularity, using Yaegi
Stars: ✭ 29 (-51.67%)
Mutual labels:  hot-reload
Deku
⛄️ No-bundle Dev Server for ES modules with deno.
Stars: ✭ 43 (-28.33%)
Mutual labels:  hot-reload
Universal React Demo
ES6 demo of a simple but scalable React app with react-router, code splitting, server side rendering, and tree shaking.
Stars: ✭ 50 (-16.67%)
Mutual labels:  server-side-rendering
Onthefly
🔗 Generate TinySVG, HTML and CSS on the fly
Stars: ✭ 37 (-38.33%)
Mutual labels:  server-side-rendering
Next Pkg
Extended Next.js server with pkg support
Stars: ✭ 55 (-8.33%)
Mutual labels:  server-side-rendering
Citation
Citation is a new generation CMS merging ideas of: Headless / GraphQL, static site generation and JavaScript component pre-rendering
Stars: ✭ 31 (-48.33%)
Mutual labels:  server-side-rendering
Cloudflare Worker Preact Pwa
Cloudflare worker running a Preact Progressive Web App
Stars: ✭ 57 (-5%)
Mutual labels:  server-side-rendering
Ssr Window
Better handling for window object in SSR environment
Stars: ✭ 55 (-8.33%)
Mutual labels:  server-side-rendering
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-18.33%)
Mutual labels:  server-side-rendering
Vitaminjs
🍍 The build toolchain against JavaScript Fatigue
Stars: ✭ 48 (-20%)
Mutual labels:  server-side-rendering

⚡ 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].