React Isomorphic Boilerplate
An universal React isomorphic boilerplate for building server-side render web app.
Introduction
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
- React
- React Router
- Redux
- Redux+
- Sass
- PostCSS
- CSS Modules
- Koa
- Koa+
- Webpack
- Webpack+
- Babel
- Babel+
- ESLint
- Hot Module Replacement
- Code Splitting
DatabaseTest Framework
Getting Started
- Require Node.js v6 or later.
npm installto install dependencies and devDependencies.npm run devto start up the development environment.npm run buildto compile and bundle the client and server files.npm startto deploy the production server.
What's included
react-isomorphic-boilerplate/ // root directory
βββ build/ // webpack config directory
β βββ webpack.dev.config.js // config for webpack when run development bundle
β βββ webpack.prod.config.js // 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
β βββ server.dev.js // entry file in development mode
β βββ server.prod.js // 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
βββ README.md // just what you see now
βββ yarn.lock // lock file autogenerated by yarn
Why Isomorphic
SEO
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.
Performance
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.
Maintainability
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
FOUC
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.
Mismatch
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.
Links
http://www.jianshu.com/p/0ecd727107bb