react-isomorphic

  •        10

This is an experimental playground to try and find unobtrusive patterns that might help while building isomorphic web applications using Facebook React. It supports server-side and client-side rendering of react components. Render a page server-side and carry on client-side. Refresh a client-side route and have the server render the page. Deep link into your application at any point and have the server render the first page. Create your site from many 'single-page-applications', all seamlessly running side-by-side. Great for SEO, non-javascript environments and fast page loading with no app startup delay.

https://github.com/redbadger/react-isomorphic

Tags
Implementation
License
Platform

   




Related Projects

universal-redux - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering


Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) rendering server. You can either use its defaults and begin coding your project, or configure it to your liking with custom Webpack options and Express or Redux middleware. It's intended as both an easy starting point for developers new to React and Redux, as well as an extensible base by which advanced developers can augment with their own middleware and keep up to date with the fast-moving React ecosystem. The quickest way to get started is to clone the starter project. This gives you a base project that is set up with default configurations of Webpack and Express.

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate


A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.

react-engine - a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views


Pass in a JavaScript object as options to the react-engine's server engine create method. The options object should contain the mandatory routes property with the route definition.routesFilePath: <String> - path for the file that contains the react router routes. react-engine uses this behind the scenes to reload the routes file in cases where express's app property view cache is false, this way you don't need to restart the server every time a change is made in the view files or routes file.

newforms - Isomorphic form-handling for React


An isomorphic form-handling library for React. Newforms can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

morpheus - The next generation web publishing platform built with React.js


The idea is to create a new isomorphic web publishing platform, with the speed of a single page application, but server side rendered on the first load.Built with React, express and browserify.


react-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node


React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

universal-redux-template - A clean, extensible react + redux boilerplate with universal/isomorphic rendering, testing and more


To bootstrap a React app development environment is not an easy task, there are so many libraries to setup, including webpack, babel, testing stuff and others. I'd like this boilerplate to be a ready-to-use one with the essential tools and the simplest logic that just work to build a universal rendering React + Redux app. That's why there is no fancy stuff in this app, since it's a basis of your killer app rather than a showcase one.

flummox-isomorphic-demo - Demo of how to create isomorphic apps using Flummox and react-router


Demo of how to create isomorphic apps using Flummox and react-router

go-starter-kit - Golang isomorphic react/hot reloadable/redux/css-modules starter kit


This project contains a quick starter kit for Facebook React Single Page Apps with Golang server side render via goja javascript engine, implemented in pure Golang and also with a set of useful features for rapid development of efficient applications.Note that probably not works at windows.

universal-router - A simple middleware-style router for isomorphic JavaScript web apps


A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications (e.g. Node.js/Express, Koa).Play with an example on JSFiddle, CodePen, JS Bin in your browser or try RunKit node.js playground.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps


CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

react-dashboard - React Dashboard - isomorphic web dashboard template (React


built with React, Bootstrap, React Router (with Server Side Rendering!), Redux and GraphQL based on React Starter Kit and latest industry best practices.Demo. Use following credentials: user/password.

redux-auth - Complete token authentication system for react + redux that supports isomorphic rendering


You can see a complete working example here. The code for the demo is here.This project comes bundled with a test app. You can run the demo locally by following these instructions, or you can use it here in production.

isomorphic-webpack - Abstracts universal consumption of application code base using webpack.


isomorphic-webpack is a program that runs server-side and enables rendering of the same code base client- and server-side. Put it another way, it is a service for rendering webpack applications server-side. All that can be rendered client-side (e.g. React, Angular, etc. applications) will be processed server-side and served as static HTML.

react-gateway - Render React DOM into a new context (aka "Portal")


This can be used to implement various UI components such as modals. See react-modal2. It also works in universal (isomorphic) React applications without any additional setup and in React Native applications when used correctly.

razzle - ✨ Create server-rendered universal JavaScript applications with no configuration


Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly......whatever comes next.Below is a list of commands you will probably find useful.

react-server-routing-example - An example using universal client/server routing and data in React with AWS DynamoDB


A simple (no compile) example of how to do universal server/browser rendering, routing and data fetching with React and AWS DynamoDB for fast page loads, and search-engine-friendly progressively-enhanced pages.Also known as isomorphic, this approach shares as much browser and server code as possible and allows single-page apps to also render on the server. All React components, as well as router.js and db.js are shared (using browserify) and data fetching needs are declared statically on each component.

react-testing-mocha-jsdom - Unit testing React Components with Mocha + jsdom


This is Part 2 of the series "Modular Isomorphic React JS applications". See Part 1 and Part 3 for more. Unit testing React is traditionally done using Jest which dictates the use of the Jasmine testing framework, and enforces mocking of all require calls. For such an unopinionated rendering engine, this is a very opinionated setup, resulting in issues such as overly-verbose unmocking of requires, and being tied into Jasmine's limited framework.

react-app - Create React apps with server-side rendering and no build configuration


Then open http://localhost:3000/ to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.