aemoe / Fairy
一个能够支持前后端分离并支持中间层同构的完整框架
Stars: ✭ 131
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Fairy
Koa Mobx React Starter
A straightforward starter for Node javascript web projects. Using Koa, MobX and ReactJS (with universal / isomorphic server rendering)
Stars: ✭ 102 (-22.14%)
Mutual labels: webpack, koa2, react-router
React Koa Login
koa2 + react + react-router(4.0) + redux + webpack + antd
Stars: ✭ 109 (-16.79%)
Mutual labels: webpack, koa2, react-router
Ghchat
📱A chat application for GitHub. React + PWA + Node(koa2) + Typescripts + Mysql + Socket.io
Stars: ✭ 791 (+503.82%)
Mutual labels: webpack, koa2, react-router
Webpack Core Usage
webpack2完整系列课程，欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-28.24%)
Mutual labels: webpack, react-router
React Atomic Structure
Basic Structure for React app following Atomic Design
Stars: ✭ 89 (-32.06%)
Mutual labels: webpack, react-router
Molecule
⚛️ – :atom: – ⚛️ Boilerplate for cross platform web/native react apps with electron.
Stars: ✭ 95 (-27.48%)
Mutual labels: webpack, react-router
Redux Cnode
react+react-router+redux+es6+antd-mobile+webpack版本的Cnode
Stars: ✭ 96 (-26.72%)
Mutual labels: webpack, react-router
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-3.05%)
Mutual labels: webpack, react-router
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (-14.5%)
Mutual labels: webpack, react-router
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-12.21%)
Mutual labels: webpack, react-router
React Dashboard
🔥React Dashboard - isomorphic admin dashboard template (React.js, Bootstrap, Node.js, GraphQL, React Router, Babel, Webpack, Browsersync) 🔥
Stars: ✭ 1,268 (+867.94%)
Mutual labels: webpack, react-router
React Router Animation Examples
An example using React Router and React's Animations
Stars: ✭ 80 (-38.93%)
Mutual labels: webpack, react-router
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+902.29%)
Mutual labels: webpack, react-router
Reeakt
A modern React boilerplate to awesome web applications
Stars: ✭ 116 (-11.45%)
Mutual labels: webpack, react-router
Egg React Typescript Boilerplate
Egg React TypeScript Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 56 (-57.25%)
Mutual labels: webpack, react-router
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-50.38%)
Mutual labels: webpack, react-router
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-21.37%)
Mutual labels: webpack, react-router
Fairy - 一个前后端分离框架
一个能够支持前后端分离并支持中间层同构的完整框架,或许现在它还不够完善,但是我会把构建该框架中遇到的问题都列出来,以方便其他人遇到问题不在需要去到处搜索问题,希望为自己搭建框架的人有一些帮助,文档也会不断更新和优化,你可以watch项目随时看到文档的更新,也希望最后成为一个完整而又完美的框架,如果这些问题对你有帮助,请点个star吧,感谢~ ~
怎么安装
开启本地数据库Mysql,并使用phpmyadmin类似的工具在mysql中创建数据库(名字随意之后要填写),之后将mysql中的文件夹sql文件导入数据库, 最后在server/config/db.json中配置mysql的数据库名称和用户名密码即可
在./clent/中执行, 客户端开发,默认端口5000
npm i
npm start
在根目录,客户端开发及部署,默认开启端口3000
npm i pm2 -g
npm i
npm start
框架优势
- 路由同步(前后端共用一套路由)
- 模板同步(前后端共用一套模板)
- 数据同步(前后端公用一套数据状态机)
同构对比之前非同构加载对比, 可以明显看到白屏时间更少, 页面总计加载速度更快
非同构 VS 同构
前端开发中也支持react,react-router,样式及Redux的动态更新
开发BUG日记
当开发中遇到的问题,我会列在下面,以方便自己查询和其他人进行相同问题的修改和修复如何搭建这样一个框架
协议
MITNote 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].