Universal React

A universal react starter, with routing, meta, title, and data features
Alternatives To Universal React
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Navigation22,7435,26198519 hours ago204June 22, 2023682TypeScript
Routing and navigation for your React Native apps
Ice17,6531,27519 hours ago90August 26, 2022301mitTypeScript
🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Umi14,4361,69014 hours ago443July 27, 2023199mitTypeScript
A framework in react community ✨
Awesome Nextjs9,033
2 months ago61
:notebook_with_decorative_cover: :books: A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications)
Wouter5,5087612 days ago49May 17, 202322JavaScript
🥢 A minimalist-friendly ~1.5KB routing for React and Preact. Nothing else but HOOKS.
Inertia5,316176014 days ago50September 30, 202241mitPHP
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Router5,130136 days ago15March 21, 202217mitTypeScript
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
After.js4,1134472 months ago34November 01, 202119mitTypeScript
Next.js-like framework for server-rendered React apps built with React Router
Next Routes2,439686818 months ago46May 21, 2018mitJavaScript
Universal dynamic routes for Next.js
React Most Wanted2,4157a month ago98October 18, 202218mitJavaScript
React starter kit with "Most Wanted" application features
Alternatives To Universal React
Select To Compare

Alternative Project Comparisons

Universal React

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.

Universal React on NPM Dependency Status


  • Universal routing react-router
  • Redux
  • Hot reloading
  • Title, meta, css, and scripts overridable by each component react-helmet
  • Universal data fetching/rehydration on the client cross-fetch
  • No other templating engines - React from root down
  • 404 and redirect handling
  • Shared app config
  • Webpack and Babel

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.

##Install & run

npm i && npm start

Go to http://localhost:3000/.


npm run build

This will create a dist/ folder with a app.min.js which will be used on any environment which isn't undefined (i.e. not local).

npm run start-prod

This will build and then run your app with environment set to production, so that app.min.js and config/production.js are used.

Adding routes

Add your routes in Routes.js.

<Route path="users" component={Users} />

Title and Meta

The parent App.js defines the base title and meta in a Helmet component. Any sub-component can override/add properties (even adding scripts and css). See the react-helmet docs for more info.


You can store app settings under app/config/. A file matching process.env.NODE_ENV will be loaded, for example app/config/production.js. If process.env.NODE_ENV is undefined it will fallback to app/config/default.js. You can access the correct config with:

import config from './config';

Data fetching and client hydration

Read the Redux guide if you are new to redux. Write Redux actions and stores as normal, and if the action creator is asynchronous then it should return a Promise (or a Promise.all) in the inner function.

You should write dispatches for actions that must be called for the container to be ready:

static readyOnActions(dispatch, params) {
  return Promise.all([

You should also invoke the actions in componentDidMount. This ensures that if the component is reached on the client, then the same actions will be invoked. It's up to the action to figure out if fetches for data need to be made or not:

componentDidMount() {
  User.readyOnActions(this.props.dispatch, this.props.params);
Popular Routing Projects
Popular Reactjs Projects
Popular Networking Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Server Side Rendering