All Projects → MartinCerny-awin → isomorphic-react-redux-saga-ssr

MartinCerny-awin / isomorphic-react-redux-saga-ssr

Licence: other
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting

Programming Languages

javascript
137323 projects - #8 most used programming language
CSS
34618 projects

Projects that are alternatives of or similar to isomorphic-react-redux-saga-ssr

Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (+131.58%)
Mutual labels:  isomorphic, redux-saga, ssr, react-redux, code-splitting, server-side-rendering
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (+131.58%)
Mutual labels:  isomorphic, redux-saga, ssr, react-redux, code-splitting, server-side-rendering
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (+673.68%)
Mutual labels:  react-redux, code-splitting, webpack2, server-side-rendering, react-router-v4
React Router Server
Server Side Rendering library for React Router v4.
Stars: ✭ 443 (+2231.58%)
Mutual labels:  ssr, code-splitting, webpack2, server-side-rendering
Koa React Universal
lightweight React-Koa2 universal boilerplate, only what is essential
Stars: ✭ 112 (+489.47%)
Mutual labels:  isomorphic, ssr, code-splitting, react-router-v4
React-Redux-Enterprise
A React-Redux boilerplate for enterprise/large scaled web applications
Stars: ✭ 77 (+305.26%)
Mutual labels:  eslint, react-redux, react-router-redux, react-router-v4
create-react-redux-app
React boilerplate based on create-react-app
Stars: ✭ 49 (+157.89%)
Mutual labels:  immutable, eslint, redux-saga, react-router-redux
Modern-Web-App
React PWA with SSR and Code splitting
Stars: ✭ 45 (+136.84%)
Mutual labels:  ssr, code-splitting, server-side-rendering, react-router-v4
movies
Real world isomorphic application for movies search, based on Webpack 5 / Express / React 17 + Redux-Saga / Bootstrap 4.6 + CSS Modules / i18next / SSR
Stars: ✭ 20 (+5.26%)
Mutual labels:  isomorphic, redux-saga, ssr, server-side-rendering
kaonjs
Kaon.js is a react isomorphic app solution. It contains webpack build, hot reloading, code splitting and server side rendering.
Stars: ✭ 21 (+10.53%)
Mutual labels:  isomorphic, code-splitting, server-side-rendering
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (+642.11%)
Mutual labels:  isomorphic, eslint, server-side-rendering
universal-react-redux-typescript-starter-kit
A minimal starter kit with React, Redux, server side rendering, hot reloading, and Webpack 2. 100% TypeScript.
Stars: ✭ 12 (-36.84%)
Mutual labels:  webpack2, server-side-rendering, react-router-v4
laravel-react-boilerplate
Laravel React Boilerplate with Ant Design, Route-Level Code Splitting, Redux, Sanctum Auth
Stars: ✭ 49 (+157.89%)
Mutual labels:  redux-saga, react-redux, code-splitting
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (+515.79%)
Mutual labels:  isomorphic, ssr, server-side-rendering
react-redux-starter-kit
Get started with React, Redux, Webpack and eslint
Stars: ✭ 29 (+52.63%)
Mutual labels:  eslint, react-redux, react-router-redux
Beidou
🌌 Isomorphic framework for server-rendered React apps
Stars: ✭ 2,726 (+14247.37%)
Mutual labels:  isomorphic, ssr, server-side-rendering
frontity-twentynineteen
🎨 A Frontity Twentynineteen theme Project
Stars: ✭ 54 (+184.21%)
Mutual labels:  hot-reloading, server-side-rendering, hot-module-replacement
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+6752.63%)
Mutual labels:  isomorphic, ssr, server-side-rendering
Use Ssr
☯️ React hook to determine if you are on the server, browser, or react native
Stars: ✭ 230 (+1110.53%)
Mutual labels:  isomorphic, ssr, server-side-rendering
Webpack Hot Server Middleware
🔥 Hot reload webpack bundles on the server
Stars: ✭ 319 (+1578.95%)
Mutual labels:  hot-reloading, isomorphic, ssr

OUTDATED PLEASE HAVE A LOOK FOR NEWER OPTIONS

Isomorphic JS - Server Side Rendering, Code Splitting and Hot Module Reloading

💭 What is it?

Isomorphic 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

Code Splitting: - Split code into bundles so that code is asynchronously loaded by the client.

The code is influenced by https://medium.com/@apostolos/server-side-rendering-code-splitting-and-hot-reloading-with-react-router-v4-87239cfc172c

How?

The Basic setup goes like this...

An express server handles a request, renders the that page on the server and sends it back to the client. The code is bundled into chunks on build time which are requested by the client when needed for that route.

When in development mode the express server handles a request and uses the webpack.config.development.js configuration as middleware to listen for file changes, build then and push them to the client.


Technologies

React

v 15.5.0 version is used in this project with PropTypes being inside its own library. The React code is using ES6 and dividing components into presentation components and container components.

Redux

Reducers, actions creators and action types are using customized duck structure. They are stored inside JavaScript file in modules folder .

React Router 4

The React Router 4 routes are just components, which define the composition of UI.

Webpack 2

Used for code splitting.

Hot Module Loader 3

Replace changed modules in the real time. React Hot Loader 3 is in beta, but fixes several issues and is needed in case React Router 4 is used. This projects does HMR of Components, Containers, Styles, Sagas and Reducers

Babel

Compiler that helps us to write ES6 JavaScript. React ES6 features such property initializers, arrow functions and spread attribute are used in the project. React on ES6+

Express

Manages initial render of the content (SSR)

webpack-dev-middleware

Middleware which can be mounted in an express server to serve the latest compilation of your bundle during development. This uses webpack's Node API in watch mode and instead of outputting to the file system it outputs to memory.

webpack-hot-middleware

Alternative to webpack-dev-server but instead of starting a server itself it allows you to mount it in an existing / custom express server alongside webpack-dev-middleware.

Redux Saga

The implementation of Redux Saga was made with the help of Universal React Saga. The axios library was replaced by fetch and sagas fitting into modules were moved there.

Good article https://wecodetheweb.com/2016/10/01/handling-async-in-redux-with-sagas/

🛠 Setup

First install the dependencies, in the root directory of this project run. npm install

🤖 Running

For Development run npm run development

This will start a development server on localhost:8080 that utilizes hot module reloading for both React components and redux reducers.

For Production run npm run build && npm run production.

This will build all your assets and write them to a /build file in the root directory of this project. The script will then start up a express server on localhost:8080 that will utilize server side rendering and route based code splitting.

hmr-ssr

🗒 Notes

Hot Module Reloading does not work with System.import, as such there are two route sources.

  • The first one src/universal/routes/sync.js is for static routes (no code splitting) that is for the development environment to work nicely with React Hot Loader 3
  • The second route source src/universal/routes/async.jsx is for asynchronous routes (Code splitting using System.import).
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]