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
-
Database -
Test 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
License
-
错误环境 新版本存在不兼容，在运行 react-native run-android [备注：红色的字体是小写的哦] 的时候，发生的错误分析： $ react-native -v : react-native-cli: 2.0.1 react-native: 0.47.1 $node -v : v7.8.0 $ npm -v : 4.4.4 babel-preset-react-native v
-
/** * ------------------ The Life-Cycle of a Composite Component ------------------ * * - constructor: Initialization of state. The instance is now retained. * - componentWillMount * - render
-
一、问题 现象 如果你依照RN官方文档或者RN中文网创建工程，你会遇到以下报错： ![bundling failed: "TransformError: /Users/eduardo/Desktop/rn_reproduce_transform_error/index.ios.js: Unexpected token ) (While processing preset: "/Users/edua
-
初始化项目时的问题 $ create-react-native-app AwesomeProject 通过上面的命令出现下面的错误： [1/4] Resolving packages... warning react-native-scripts > xdl > auth0 > rest-facade > superagent-proxy > proxy-agent > socks-proxy
-
当react-native项目编译时遇到react-native-community/masked-view 错 react-navigation问题 例如： Error: undefined Unable to resolve module @react-native-community/ masked-view from 'node modules\react-naviqation-stack
-
轻烤 React 核心机制：React Fiber 与 Reconciliation
-
boilerplate by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) 完整的React Boilerplate教程-从零到英雄 (A Complete React Boilerplate Tutorial — From Zero to Hero) When we’re starting learn React, to make our p
-
React and Koa boilerplate (deprecated. New project available at https://github.com/hung-phan/micro-nextjs) The idea of this repository is to implement all new concepts and libraries which work great f
-
React Isomorphic Starterkit Isomorphic starterkit with server-side React rendering usingnpm,koa,webpack,babel,react,react-router,react-transform-hmr,react-transmit,react-inline-css Features Fully auto
-
React Redux Universal (isomorphic) bundle ================= Learning from isomorphic-flux-boilerplate but use Redux. DEMO Demo site (iisnode): eventtest.oursweb.net Installation $ npm uninstall -g bab
-
前言 由于可能有些读者没听过 Isomorphic JavaScript 。因此在进到开发 React Redux Sever Rendering 应用程式的主题之前我们先来聊聊 Isomorphic JavaScript 这个议题。 根据 Isomorphic JavaScript 这个网站的说明： Isomorphic JavaScript Isomorphic JavaScript apps
-
Isomorphic Strings 描述 Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the characters in s can be replaced to get t. All occurrences of a character must be re
-
isomorphic-redux-forum About 基于React->Node->Mongo技术栈的类CNode社区同构单页Web应用,关于此项目开发过程中的经验总结移步我的技术博客相关文章:使用React SSR构建Isomorphic应用 用到的技术栈 React 构建Web组件 React-router 客户端路由及ssr路由 redux 管理应用state react服务端渲染 实现