Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/secundant/product-template
Detailed fully featured template for long-term projects
https://github.com/secundant/product-template
changeset docusaurus example monorepo nx template tutorial typescript yarn
Last synced: 2 months ago
JSON representation
Detailed fully featured template for long-term projects
- Host: GitHub
- URL: https://github.com/secundant/product-template
- Owner: secundant
- License: mit
- Created: 2022-07-17T20:23:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T13:31:19.000Z (8 months ago)
- Last Synced: 2024-10-12T22:49:37.094Z (3 months ago)
- Topics: changeset, docusaurus, example, monorepo, nx, template, tutorial, typescript, yarn
- Language: TypeScript
- Homepage: https://product-template.pages.dev/
- Size: 2.86 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🏗 Product template
Detailed fully featured template for long-term projects
> Project is in early development phase and contains some dirty moments
[Visit our documentation](https://product-template.pages.dev/repo/intro) to get detailed information and
see like-a-real-world example of [apps/docs](./apps/docs) in one đź‘Ź
- [Yarn 4](https://yarnpkg.com/getting-started/usage), a flexible package manager
- [Corepack](https://nodejs.org/api/corepack.html) for seamless package manager switching
- Monorepo powered by [NX](https://nx.dev/)
- [lefthook](https://github.com/evilmartians/lefthook/) for git hooks
- [commitlint](https://commitlint.js.org/) on commit-msg
- [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) on pre-commit
- Tests, type checking and linting on pre-push
- [Vitest](https://vitest.dev/) for unit tests
- Preconfigured [TypeScript](https://www.typescriptlang.org/) with strict rules
- [Vitepress](https://vitepress.vuejs.org/) for [own documentation application](./apps/docs) with its rationale, explanation and self-documented recipes
- **not implemented** Group of ready-to-use examples of UI Kit libraries (self-made / radix)
- **not implemented** Multiple applications examples (NextJS / Vite / Razzel)
## Setup
```shell
corepack enable
yarn
```
## Details
### Preconfigured TypeScript
[Global tsconfig.base.json](./tsconfig.base.json) is a well-designed
configuration preset with strict rules and monorepo packages paths.
It should be used in all modules in workspace for consistency purpose.
Of course, you can reconfigure it as you wish :)
### NX and monorepo
#### Benefits
- Cache
- Consistency
- Scalability
- Shared anything (code, configs, tools, etc.)
- Transparent **source code** relations
> It sounds not so important, but it changes the way you think about your code and significantly boosts your productivity in certain cases (it literally could be 1 day vs 30 minutes)
- Zero overhead for new and existing projects
- Code structuring and easy reuse—we're able to extract all common logic
to shared libraries and use it without any painful actions (build/publish/install/update/etc.)
- Collaboration across a team and tools
#### Drawbacks
- Repository size—this is a potential problem with scaling up (**TODO - research it**)
## Development quick tips
### New library creation
Unfortunately, we still can't provide better way then just copy-paste one of libraries.
> **Help wanted** If you know really well worked way to generate libs with NX - let me know.
1. Copy library and rename it
2. Add path to tsconfig.base.json
### Testing
By default, unit tests is powered by [Vitest](https://vitest.dev/),
in our [root package.json](./package.json) already added `vite` and `vite-tsconfig-paths`,
so you don't need to add them in every package.
So, if you want to add unit tests:
1. `yarn add -D vitest` in target library folder or `yarn workspace @my-org/NAME add -D vitest` anywhere else
2. Add `vite.config.ts` - you can take configuration in [local "std" library](libs/std/vite.config.ts)
or make it yourself as it shown [in vitest documentation](https://vitest.dev/config/)
3. Add `"test": "vitest run"` to your library `package.json`
Of course, you can change choose `jest` or something else instead of `vitest` if you want :)
### CSS
In all packages we use [TailwindCSS](https://tailwindcss.com/),
### Project graph
This command will show a graph of the dependencies and tasks.
```sh
yarn nx graph
```
### TODO Describe details
- `tsconfig.base.json`
- lefthook
- Root-level package.json and no dependencies in packages
- Docs
- Tailwind
- React-aria
- Nx shared config
-