GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → technology-ebay-de → Universal React Router4

technology-ebay-de / Universal React Router4

Licence: mit
Demo app showing how to use react-router v4 for server- and client-side rendering

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactdemoreact-routerserver-side-renderingisomorphic

Projects that are alternatives of or similar to Universal React Router4

react-ssr-starter
🔥 ⚛️ A React boilerplate for a universal web app with a highly scalable, offline-first foundation and our focus on performance and best practices.
Stars: ✭ 40 (-81.48%)
Mutual labels:  isomorphic, react-router, server-side-rendering
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 (-76.85%)
Mutual labels:  isomorphic, demo, server-side-rendering
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-34.72%)
Mutual labels:  isomorphic, react-router, server-side-rendering
Marko
A declarative, HTML-based language that makes building web apps fun
Stars: ✭ 10,796 (+4898.15%)
Mutual labels:  isomorphic, server-side-rendering
React Imvc
An Isomorphic MVC Framework
Stars: ✭ 211 (-2.31%)
Mutual labels:  isomorphic, server-side-rendering
React Demo Gather
react demo合集，有自己写的，也有在学习过程中觉得很好的demo收集的，持续更新中
Stars: ✭ 97 (-55.09%)
Mutual labels:  demo, react-router
Starter Lapis
Cutting edge starter kit
Stars: ✭ 72 (-66.67%)
Mutual labels:  react-router, server-side-rendering
Universal React Tutorial
📓 How to build universal web apps with React.
Stars: ✭ 136 (-37.04%)
Mutual labels:  isomorphic, react-router
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-45.83%)
Mutual labels:  isomorphic, server-side-rendering
Redux React Session
🔑 Simple Session API storage for Redux and React
Stars: ✭ 140 (-35.19%)
Mutual labels:  react-router, server-side-rendering
Isomorphic Lab
Isomorphic React experimentation
Stars: ✭ 144 (-33.33%)
Mutual labels:  isomorphic, react-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+502.78%)
Mutual labels:  isomorphic, server-side-rendering
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: ✭ 86 (-60.19%)
Mutual labels:  react-router, server-side-rendering
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (-48.15%)
Mutual labels:  react-router, server-side-rendering
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: ✭ 85 (-60.65%)
Mutual labels:  isomorphic, react-router
Favesound Redux
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
Stars: ✭ 1,586 (+634.26%)
Mutual labels:  demo, react-router
Isomorphic Relay Router
Adds server side rendering support to react-router-relay
Stars: ✭ 141 (-34.72%)
Mutual labels:  isomorphic, react-router
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-32.87%)
Mutual labels:  react-router, server-side-rendering
React Cool Starter
😎 🐣 A starter boilerplate for a universal web app with the best development experience and a focus on performance and best practices.
Stars: ✭ 1,083 (+401.39%)
Mutual labels:  react-router, server-side-rendering
Ssr React
How to server-side render React, hydrate it on the client and combine client and server routes
Stars: ✭ 67 (-68.98%)
Mutual labels:  react-router, server-side-rendering
View All Similar Projects ➔

universal-react-router4

A Demo app showing how to use react-router v4 for server- and client-side rendering.

Similar to the demo app Ryan Florence shows in his introductory video for react-router 4, this app fetches data about Gists from the GitHub API and displays them. The difference is that in this demo, the markup of the page is initially rendered on the server side, and when the user clicks on one of the links, the Gist data is rendered on the client side without another request to the server, using the same React components and react-router link elements that the backend is using (hence “universal”).

How to Run

You should have a current version of Node.js installed. Version 6.9 is recommended.

Install the node modules used by the application:

npm install

Build JavaScript bundles for the server- and client-side code using webpack:

npm run build

Run the application:

npm start

You can then go to localhost:3000 in your favorite browser to see the Gists.

Local Development

To speed up local development when working on the source code, you can start the application in watch mode.

You need to run each of the following commands in a separate terminal.

To automatically rebuild the client JavaScript bundle when client source code changes:

npm run dev:client

To automatically rebuild the server JavaScript bundle when client source code changes:

npm run dev:server

To run the server and automatically restart it when the server bundle changes:

npm run dev:start

License

Published under the MIT License.

Copyright © 2017 mobile.de GmbH

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].