universal-progressive-todos - A Todo list with universal JavaScript & Progressive Enhancement

  •        13

This is a simple example app that renders HTML on the server and on the client using “universal” / “isomorphic” JavaScript. It’s using Node.js, React, React-Router and Redux for the rendering and the UI logic. For storing the todos on the server, it uses the key-value database LevelDB. There’s also a Preact version available in the preact branch if you prefer that over React.

http://molily.de/single-page-apps/
https://github.com/molily/universal-progressive-todos

Dependencies:

babel-cli : ^6.24.1
babel-core : ^6.25.0
babel-eslint : ^7.2.3
babel-loader : ^7.1.0
babel-plugin-lodash : ^3.2.11
babel-plugin-react-transform : ^2.0.2
babel-plugin-transform-object-rest-spread : ^6.23.0
babel-plugin-transform-react-constant-elements : ^6.23.0
babel-plugin-transform-react-pure-class-to-function : ^1.0.1
babel-plugin-transform-runtime : ^6.23.0
babel-preset-env : ^1.5.2
babel-preset-react : ^6.24.1
babel-register : ^6.24.1
body-parser : ^1.17.2
classnames : ^2.2.5
compression : ^1.6.2
cross-env : ^5.0.1
css-loader : ^0.28.4
ejs : ^2.5.6
eslint : ^3.4.0
eslint-config-airbnb : ^15.0.1
eslint-loader : ^1.8.0
eslint-plugin-import : ^2.3.0
eslint-plugin-jsx-a11y : ^5.0.3
eslint-plugin-react : ^7.1.0
express : ^4.15.3
history : ^4.6.3
leveldown : ^1.7.2
levelup : ^1.3.8
lodash : ^4.17.4
mkdirp : ^0.5.1
node-sass : ^4.5.3
nodemon : ^1.11.0
prop-types : ^15.5.10
react : ^15.6.1
react-dom : ^15.6.1
react-redux : ^5.0.5
react-router-dom : ^4.1.1
react-transform-hmr : ^1.0.4
redux : ^3.7.0
rimraf : ^2.6.1
style-loader : ^0.18.2
uuid : ^3.1.0
webpack : 3.0.0
webpack-dev-middleware : ^1.10.2
webpack-hot-middleware : ^2.18.0

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

  •    Javascript

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.

Rax - A universal React-compatible render engine

  •    Javascript

A universal React-compatible render engine. Rax is a universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax. Its features include zero configuration, Progressive Web App(PWA), Server-Side Rendering(SSR) and Function as a service(FaaS) can be used out of the box.

react-isomorphic-video-game-search - An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API

  •    Javascript

An Isomorphic application demo powered by React, reflux, react-router-component, express, superagent and the Giant Bomb API. An excuse to share my research and get feedback as I prepare to launch a large React-powered app.

react-universally - A starter kit for universal react applications.

  •    Javascript

A starter kit for universal react applications. This starter kit contains all the build tooling and configuration you need to kick off your next universal React project, whilst containing a minimal "project" set up allowing you to make your own architecture decisions (Redux/MobX etc).

react-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

  •    Javascript

I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too. The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.


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

  •    Javascript

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.

catberry - Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering

  •    Javascript

Catberry was developed to help create "isomorphic/Universal" Web applications. Long story short, isomorphic/universal applications are apps that use the same codebase on both the server and client environments to render what the client would see as a "Single Page Application".

arc - React starter kit based on Atomic Design

  •    Javascript

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable. If you find this useful, please don't forget to star ⭐️ the repo, as this will help to promote the project. Follow me on Twitter and GitHub to keep updated about this project and others.

Razzle - Create server-rendered universal JavaScript applications with no configuration

  •    Javascript

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 what ever comes next.

react-redux-isomorphic-example - An isomorphic example built with react and redux , see readme for detailed instructions

  •    Javascript

This is an isomorphic/universal example built with react and Redux which utilizes the same codebase on server and browser to correctly handle multiple requests at the same time. This example was previously built with alt and now fully migrated to redux, you might as well compare the two and see the differences.

universal-react - A universal react starter, with routing, meta, title, and data features

  •    Javascript

This boilerplate aims at solving the MVP (Minimal Viable Product) of a universal app while trying to keep the base unopinionated elsewhere and simple to read and extend. Since there are so many opinions on how to use css (vanilla, sass, less, react css modules etc) I've left it up to you.

apollo-universal-starter-kit - Apollo 2 Universal Starter Kit — GraphQL React JavaScript app boilerplate for Mobile, Server and Web where code for all platforms built with Webpack to enable max code reuse, stack: Apollo, GraphQL, React 16, React Native, Expo, Express, Knex, SQLite, Twitter Bootstrap, Babel, Webpack

  •    Javascript

Apollo Universal Starter Kit is a SEO friendly boilerplate for Universal Mobile and Web app development built on top of Apollo, GraphQL, React 16, React Native, Expo, Redux, Express with SQL storage support, for styling Twitter Bootstrap, NativeBase and Ant Design integration. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement to reflect your changes instantly and help you stay productive. This starter kit adds full React Native integration, with Webpack as a packager and Expo. No native code compilation tools are needed in order to develop native mobile applications with this kit. You are able to run both web and mobile versions of your app at the same time connected to the same backend.

preact-pwa - Super fast progressive web app with small footprint & minimal dependancies

  •    Javascript

A Super fast progressive web app with a small footprint & minimal dependencies. Features universal rendering, redux, state-driven routing, preact, & service workers. Crunched & optimized with rollup, buble, optimize-js, & purify-css.

suicrux - 🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]

  •    Javascript

Ultimate universal starter with lazy-loading, SSR and i18n. /static folder + url-loader. Everything in /static/public/ is copied to /dist/client with copy-webpack-plugin.

3ree - An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express

  •    Javascript

An example universal JS application written with the 3REE stack, React + Redux + RethinkDB + Express. A stack for building apps, front and back end, with just Javascript. This project was initially conceived to experiment with using these technologies in conjunction with one-another. I have written a blog that relates to this codebase.

symfony-react-sandbox - Example of integration with React and Webpack (Webpack Encore) for universal (isomorphic) React rendering, using Limenius/ReactBundle and Limenius/LiformBundle

  •    Javascript

This sandbox provides an example of usage of ReactBundle with server and client-side React rendering (universal/isomorphical) and its integration with a fitting Webpack Encore setup. It also provides an example of the usage of LiformBundle to generate a json-schema from Symfony forms and a forms and validation in React from that schema. -Note: If you are new to React.js, please note that this sandbox or the bundle are not by any means required to use React with Symfony. This shocases how to do some advanced features such as Server Side Rendering, a better integration with forms, injecting components directly from Twig tags, that may be difficult.

react-universal - React, redux, react-router, graphql, postgres, koa, universal starter-kit

  •    Javascript

A react starter kit that handles universal rendering as well as a bunch of another neat things. This is sort of a living spec for how I build web applications. react-relay, though the tools are included to get started with Relay, including the graphql backend, I've decided to not include the start of a Relay based front end until server-side rendering hooks are exposed [facebook/relay#136].

redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React

  •    Javascript

How do you usually request data and store it to redux state? You create actions that do async jobs to load data, create reducer to save this data to redux state, then connect data to your component or container. Usually it's very similar routine tasks.

react_on_rails - Integration of React + Webpack + Rails using rails/webpacker to build Universal (Isomorphic) Apps (aka Server Rendering)

  •    Ruby

React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

marvin - Universal React and Redux, Webpack boilerplate

  •    Javascript

Universal React and Redux, Webpack boilerplate. Marvin is internal project by Work & Co. We love React and use it a lot. So Marvin is meant to be a starting point for our React projects. But as we love open source too, it is publicly available for anyone interested in using it.