https://github.com/idea2app/lark-next-bootstrap-ts
Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
https://github.com/idea2app/lark-next-bootstrap-ts
bootstrap lark nextjs pwa scaffold ssr
Last synced: 2 months ago
JSON representation
Lark project scaffold based on TypeScript, React, Next.js, Bootstrap & Workbox.
- Host: GitHub
- URL: https://github.com/idea2app/lark-next-bootstrap-ts
- Owner: idea2app
- Created: 2025-01-18T01:53:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-06T14:55:47.000Z (3 months ago)
- Last Synced: 2026-04-06T16:29:18.140Z (3 months ago)
- Topics: bootstrap, lark, nextjs, pwa, scaffold, ssr
- Language: TypeScript
- Homepage: https://lark-next-bootstrap-ts.vercel.app/
- Size: 559 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lark-Next-Bootstrap-ts
[Lark][0] project scaffold based on [TypeScript][2], [React][1], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
[][7]
[][8]
[][9]
## Technology stack
- Language: [TypeScript v5][2] + [MDX v3][10]
- Component engine: [Next.js v16][3]
- Component suite: [Bootstrap v5][4]
- PWA framework: [Workbox v6][5]
- State management: [MobX v6][11]
- API router: [Koa v3][12]
- CI / CD: GitHub [Actions][13] + [Vercel][14]
- Monitor service: [Sentry][15]
## Major examples
1. [Markdown articles](pages/article/)
2. [Lark wiki](pages/wiki/)
3. [Editor components](pages/component.tsx)
4. [Pagination table](pages/pagination.tsx)
5. [Scroll list](pages/scroll-list.tsx)
6. [Not Found page (NGO)](pages/_error.tsx)
- Global: https://notfound.org/
- Chinese: https://www.dnpw.org/cn/pa-notfound.html
## User cases
1. https://github.com/kaiyuanshe/kaiyuanshe.github.io
2. https://github.com/idea2app/idea2app.github.io
3. https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io
## Best practice
1. Install GitHub apps in your organization or account:
1. [Probot settings][16]: set up Issue labels & Pull Request rules
2. [PR badge][17]: set up Online [VS Code][18] editor entries in Pull Request description
2. Click the **[Use this template][19] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
3. Click the **[Open in GitHub codespaces][8] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
4. Set [Vercel variables][20] & [Lark chat bot URL][21] as [Repository secrets][22], then every commit will send a Lark message with an independent **Preview URL**
5. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][23] instead of IM messages or Mobile Phone calls
6. Collect all these issues into [Project kanbans][24], then create **Pull requests** & add `closes #issue_number` into its description for automation
## Getting Started
First, run the development server:
```bash
npm i pnpm -g
pnpm dev
```
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
[API routes][25] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as API routes instead of React pages.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation][26] - learn about Next.js features and API.
- [Learn Next.js][27] - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository][28] - your feedback and contributions are welcome!
## Deployment
### Environment variables
| name | file | description |
| :-------------------------: | :----------: | :---------------------------------------------: |
| `JWT_SECRET` | `.env.local` | Random String for **JSON Web Token** encryption |
| `SENTRY_AUTH_TOKEN` | `.env.local` | [Official document][29] |
| `SENTRY_ORG` | `.env` | [Official document][30] |
| `SENTRY_PROJECT` | `.env` | [Official document][30] |
| `NEXT_PUBLIC_SENTRY_DSN` | `.env` | [Official document][31] |
| `NEXT_PUBLIC_LARK_APP_ID` | `.env.local` | [Official document][32] |
| `LARK_APP_SECRET` | `.env.local` | [Official document][32] |
| `NEXT_PUBLIC_CACHE_HOST` | `.env` | Static files CDN for Lark |
| `CACHE_REPOSITORY` | `.env` | [GitHub repository for Lark file cache][33] |
| `NEXT_PUBLIC_LARK_WIKI_URL` | `.env` | Entry URL of a Lark wiki |
### Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform][14] from the creators of Next.js.
Check out our [Next.js deployment documentation][34] for more details.
### Docker
```shell
pnpm pack-image
pnpm container
```
### CDN
1. create & configure your own `CACHE_REPOSITORY` with https://github.com/idea2app/Web-file-cache
2. set the `NEXT_PUBLIC_CACHE_HOST` environment variable to your CDN URL
3. create an Automation Flow in your Lark BI Table to watch Attachment fields changing, then send an HTTP `POST` request to `https://api.github.com/repos/your-namespace/Web-file-cache/actions/workflows/crawler.yml/dispatches` with:
1. the [GitHub PAT][35] in the `Authorization` header
2. `https://your.next.js/api/Lark/file/attachment-id/file-name` as `url` body parameter
4. your Lark file attachments will be cached in your CDN and loaded by your Lark-Next.js service automatically
[0]: https://www.larksuite.com/
[1]: https://react.dev/
[2]: https://www.typescriptlang.org/
[3]: https://nextjs.org/
[4]: https://getbootstrap.com/
[5]: https://developers.google.com/web/tools/workbox
[6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
[7]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/actions/workflows/main.yml
[8]: https://codespaces.new/idea2app/Lark-Next-Bootstrap-ts
[9]: https://gitpod.io/?autostart=true#https://github.com/idea2app/Lark-Next-Bootstrap-ts
[10]: https://mdxjs.com/
[11]: https://mobx.js.org/
[12]: https://koajs.com/
[13]: https://github.com/features/actions
[14]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
[15]: https://sentry.io/
[16]: https://github.com/apps/settings
[17]: https://pullrequestbadge.com/
[18]: https://code.visualstudio.com/
[19]: https://github.com/new?template_name=Lark-Next-Bootstrap-ts&template_owner=idea2app
[20]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/afa51fad3b16e598bf3b10010b2dc47405b016a3/.github/workflows/main.yml#L9-L11
[21]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/363e023e5dd472c8ea53ec96eac25ec5122e667b/.github/workflows/Lark-notification.yml#L39
[22]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/settings/secrets/actions
[23]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/issues/new/choose
[24]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/projects
[25]: https://nextjs.org/docs/api-routes/introduction
[26]: https://nextjs.org/docs
[27]: https://nextjs.org/learn
[28]: https://github.com/vercel/next.js/
[29]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
[30]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
[31]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
[32]: https://open.larksuite.com/document/server-docs/getting-started/api-access-token/app-access-token-development-guide#1f8b587c
[33]: https://github.com/idea2app/Web-file-cache?tab=readme-ov-file
[34]: https://nextjs.org/docs/deployment
[35]: https://github.com/settings/tokens