Awesome Open Source
Awesome Open Source

React Isomorphic Boilerplate

An universal React isomorphic boilerplate for building server-side render web app.

dependencies Status devDependencies Status PRs Welcome npm


This repository is an universal React isomorphic boilerplate for developer to quickly build a super fast and powerful web app that can be rendered both on the client and on the server using the most cutting-edge technology. Compared to others, this boilerplate has more pithily and more elegant configuration file based on environment variables, one for development, one for production. In addition, the directory structure is organized corresponding to mvc principle aim at the best practice.

Technology Stack

Getting Started

  • Require Node.js v6 or later.
  • npm install to install dependencies and devDependencies.
  • npm run dev to start up the development environment.
  • npm run build to compile and bundle the client and server files.
  • npm start to deploy the production server.

What's included

react-isomorphic-boilerplate/                // root directory
β”œβ”€β”€ build/                                   // webpack config directory
β”‚     β”œβ”€β”€                 // config for webpack when run development bundle
β”‚     └──                // config for webpack when run production bundle
β”œβ”€β”€ client/                                  // client directory
β”‚     β”œβ”€β”€ about/                                // `about` module
β”‚     β”œβ”€β”€ common/                               // `common` module
β”‚     β”œβ”€β”€ home/                                 // `home` module
β”‚     β”œβ”€β”€ shared/                               // shared module
β”‚     β”œβ”€β”€ explore/                              // `explore` module
β”‚     β”œβ”€β”€ index.js                              // client entry file
β”‚     └── routes.js                             // client route config
β”œβ”€β”€ dist/                                    // bundle output directory
β”‚     β”œβ”€β”€ client/                               // the client side output directory
β”‚     └── server/                               // the server side output directory
β”œβ”€β”€ server/                                  // server directory
β”‚     β”œβ”€β”€ controllers/                          // controllers in server
β”‚     β”œβ”€β”€ middlewares/                          // custom middlewares in server
β”‚     β”œβ”€β”€ models/                               // models in server
β”‚     β”œβ”€β”€ routes/                               // routes in server
β”‚     β”œβ”€β”€ app.js                                // create koa instance in server
β”‚     β”œβ”€β”€                         // entry file in development mode
β”‚     └──                        // entry file in production mode
β”œβ”€β”€ views/                                   // views directory
β”‚     β”œβ”€β”€ dev/                                  // output files generated by tpl in development mode
β”‚     β”œβ”€β”€ prod/                                 // output files generated by tpl in production mode
β”‚     └── tpl                                   // templates injected by html-webpack-plugin
β”œβ”€β”€ .editorconfig                            // uniform the text editor behavior
β”œβ”€β”€ .eslintignore                            // which paths should be omitted from linting
β”œβ”€β”€ .eslintrc.json                           // specific rules for eslint
β”œβ”€β”€ .gitattributes                           // uniform the new line perform behavior
β”œβ”€β”€ .gitignore                               // ignore the specific files when using git
β”œβ”€β”€ LICENSE                                  // license information
β”œβ”€β”€ package.json                             // npm entry file
β”œβ”€β”€                                // just what you see now
└── yarn.lock                                // lock file autogenerated by yarn

Why Isomorphic


An application that can only run in the client-side cannot serve HTML to crawlers, so it will have poor SEO by default. Web crawlers function by making a request to a web server and interpreting the result. but if the server returns a blank page, it’s not of much value. There are workarounds, but not without jumping through some hoops.


By the same token, if the server doesn’t render a full page of HTML but instead waits for client-side JavaScript to do so, users will experience a few critical seconds of blank page or loading spinner before seeing the content on the page. There are plenty of studies showing the drastic effect a slow site has on users, and thus revenue.


While the ideal case can lead to a nice, clean separation of concerns, inevitably some bits of application logic or view logic end up duplicated between client and server, often in different languages. Common examples are date and currency formatting, form validations, and routing logic. This makes maintenance a nightmare, especially for more complex apps.

Problem exists yet


It happens when run in development mode. This is caused by deprecated using extract-text-webpack-plugin in development for getting a seamless hmr experience.(Why deprecated? See this Issue) If you are not an OCD, go ahead, ignore it.


It happens also when run in development mode. This is caused by when you update the react component code and reload the page, the markup generated mismatches that on server render. However, once you restart the server, the checksum will be valid. So it is harmless, ignore it also.




Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,541,393)Β 
Reactjs (70,913)Β 
Redux (13,040)Β 
Webpack (9,666)Β 
Boilerplate (5,604)Β 
Eslint (3,581)Β 
Babel (3,236)Β 
Koa2 (928)Β 
Server Side Rendering (819)Β 
Isomorphic (446)Β 
Related Projects
Advertising πŸ“¦Β 9
All Projects
Application Programming Interfaces πŸ“¦Β 120
Applications πŸ“¦Β 181
Artificial Intelligence πŸ“¦Β 72
Blockchain πŸ“¦Β 70
Build Tools πŸ“¦Β 111
Cloud Computing πŸ“¦Β 79
Code Quality πŸ“¦Β 28
Collaboration πŸ“¦Β 30
Command Line Interface πŸ“¦Β 48
Community πŸ“¦Β 81
Companies πŸ“¦Β 60
Compilers πŸ“¦Β 60
Computer Science πŸ“¦Β 74
Configuration Management πŸ“¦Β 39
Content Management πŸ“¦Β 167
Control Flow πŸ“¦Β 197
Data Formats πŸ“¦Β 77
Data Processing πŸ“¦Β 266
Data Storage πŸ“¦Β 132
Economics πŸ“¦Β 60
Frameworks πŸ“¦Β 198
Games πŸ“¦Β 122
Graphics πŸ“¦Β 103
Hardware πŸ“¦Β 148
Integrated Development Environments πŸ“¦Β 47
Learning Resources πŸ“¦Β 147
Legal πŸ“¦Β 28
Libraries πŸ“¦Β 119
Lists Of Projects πŸ“¦Β 21
Machine Learning πŸ“¦Β 336
Mapping πŸ“¦Β 61
Marketing πŸ“¦Β 15
Mathematics πŸ“¦Β 55
Media πŸ“¦Β 228
Messaging πŸ“¦Β 97
Networking πŸ“¦Β 304
Operating Systems πŸ“¦Β 84
Operations πŸ“¦Β 120
Package Managers πŸ“¦Β 52
Programming Languages πŸ“¦Β 229
Runtime Environments πŸ“¦Β 96
Science πŸ“¦Β 42
Security πŸ“¦Β 375
Social Media πŸ“¦Β 26
Software Architecture πŸ“¦Β 70
Software Development πŸ“¦Β 68
Software Performance πŸ“¦Β 57
Software Quality πŸ“¦Β 127
Text Editors πŸ“¦Β 45
Text Processing πŸ“¦Β 131
User Interface πŸ“¦Β 310
User Interface Components πŸ“¦Β 465
Version Control πŸ“¦Β 29
Virtualization πŸ“¦Β 68
Web Browsers πŸ“¦Β 38
Web Servers πŸ“¦Β 25
Web User Interface πŸ“¦Β 194