Introduction
I am building a CLI tool that lets you add features into your project via CLI. This CLI tool currently only supports adding features in a Next.js based projects. The idea is to run a command like
pnpx thinkthroo@latest add supabase-auth or
pnpx thinkthroo@latest add s3-upload and this would add the files required.
I have broken down the process into parts and share the steps involved and write about my experience in setting up a CLI tool through this articles.
Create a project
I have referenced this article — How to write a TypeScript Library to set up this project but I had my own touch inspired by shadcn/ui CLI since what I am building is also a CLI tool.
Create folder
My project — Think Throo is a monorepo and has packages folder. Similar to Shadcn/ui, I created a folder name thinkthroo
Run npm init
I navigated to this folder and initialised by running the below command:
npm init You will be prompted with some questions, I answered them like shown below:
Setup tsconfig.json
I created a file named tsconfig.json and copied the contents from shadcn/ui’s tsconfig.json.
{ "$schema": "https://json.schemastore.org/tsconfig", "extends": "@repo/typescript-config/ts-library.json", "compilerOptions": { "isolatedModules": false, "resolveJsonModule": true, "baseUrl": ".", "paths": { "@/*": ["./*"] } }, "include": ["src/**/*.ts"], "exclude": ["node_modules", "test/fixtures"] } The difference is the way I am importing the extends . Since my setup is a monorepo, I would now have to add @repo/typescript-config as dependency in package.json. Read more about Turborepo.
"devDependencies": { "@repo/typescript-config": "*" } And run npm install. I did not use pnpm as my package manager, Shadcn uses pnpm as its package manager.
When you setup a monorepo using turbo, the basic template gives you 3 packages by default. This can be found in turborepo/examples/basic.
Finally, I created another file named ts-library.json in typescript-config that is imported in my CLI tool, thinkthroo and updated its code to what is shown below:
{ "$schema": "https://json.schemastore.org/tsconfig", "display": "Default", "compilerOptions": { "composite": false, "declaration": true, "declarationMap": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "inlineSources": false, "isolatedModules": true, "moduleResolution": "node", "noUnusedLocals": false, "noUnusedParameters": false, "preserveWatchOutput": true, "skipLibCheck": true, "strict": true }, "exclude": ["node_modules"] } I copied this content from shadcn-ui/tsconfig.json, the one you find at the root level.
You will find some other files in this typescript-config.
These are created at the time of setting up the monorepo. I might remove this package in the future releases if I do not see a need, but for now I am going to just leave it there.
Conclusion:
So far, we have created two files
package.json
tsconfig.json
You will find this code in this commit
The next part is to setup tsup to bundle your typescript.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects
Top comments (0)