English | 简体中文
- ☁️ Maximize productivity and developer experience, support fullstack development & API service
- ⚡️ Fullstack kit that supports React/Vue/Svelte... and more frameworks
- 🌈 "Zero" Api data layer, import functions from the backend to call the API directly, without the ajax glue layer
- ⛑️ Type safe, use the identical type definition from frontend to backend, detect errors in advance
- 🌍 Functional programming, using
Hooksfor frontend and backend - ⚙️ Support for
Webpack / Vitebased projects ✈️ Deploy to Server or Serverless- 🛡 Based on Midway, a powerful Node.js framework that supports enterprise-level application development
| Backend(Midway Hooks) | Frontend(React) |
|---|---|
// src/api/index.ts
import {
Api,
Get,
Post,
Validate,
Query,
useContext,
} from '@midwayjs/hooks';
import { z } from 'zod';
import db from './database';
export const getArticles = Api(
Get(),
Query<{ page: string; per_page: string }>(),
async () => {
const ctx = useContext();
const articles = await db.articles.find({
page: ctx.query.page,
per_page: ctx.query.per_page,
});
return articles;
}
);
const ArticleSchema = z.object({
title: z.string().min(3).max(16),
content: z.string().min(1),
});
export const createArticle = Api(
Post(),
Validate(ArticleSchema),
async (article: z.infer<typeof ArticleSchema>) => {
const newArticle = await db.articles.create(article);
return {
id: newArticle.id,
};
}
); |
// src/pages/articles.tsx
import { getArticles } from '../api';
import { useRequest } from 'ahooks';
import ArticleList from './components/ArticleList';
export default () => {
const { data } = useRequest(() =>
getArticles({
query: {
page: '1',
per_page: '10',
},
})
);
return <ArticleList articles={data} />;
};
// src/pages/new.tsx
import { createArticle } from '../api';
import Editor from './components/Editor';
import { useState } from 'react';
export default () => {
const [loading, setLoading] = useState(false);
const handleSubmit = async (article) => {
setLoading(true);
const { id } = await createArticle(article);
setLoading(false);
location.href = `/articles/${id}`;
};
return <Editor loading={loading} onSubmit={handleSubmit} />;
}; |
Midway Hooks currently provide the following templates:
- Fullstack
- Serverless
- Api Server
You can create applications quickly with templates:
npx degit https://github.com/midwayjs/hooks/examples/<name>For example, create a fullstack application with react:
npx degit https://github.com/midwayjs/hooks/examples/react- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
We use pnpm to manage the project.
- install dependencies
$ pnpm install- build
$ pnpm build- watch
$ pnpm watch- test
$ pnpm testThanks goes to these wonderful people (emoji key):
 Lxxyx 💻 🖋 🤔 👀 |
 Gao Yang 💻 🖋 |
 狼叔 📖 |
 Eward 💻 |
 Linbudu 📖 |
 rojer 💻 |
 Thetiso 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!