A template for creating T3 apps and Plasmo browser extensions using Turborepo
T3 Plasmo Turbo
This is a template for creating T3 apps and Plasmo browser extensions using Turborepo. With Turborepo + TRPC Api, you can easily manage web app and browser extension projects in one repository. It’s obviously been derived from the create-t3-turbo. Styling is not yet configured.
Folder Structure
apps
├─ plasmo
| ├─ Plasmo .69
| ├─ React 18 & /src
| ├─ Clerk Authentication
| ├─ Navigation using Expo Router
| └─ Typesafe API calls using tRPC
└─ next.js
├─ Next.js 13
├─ React 18
| ├─ Clerk Authentication
└─ E2E Typesafe API Server & Client
packages
├─ api
| └─ tRPC v10 router definition
├─ db
| └─ typesafe db-calls using Prisma
├─ ui
| └─ its been there by default (maybe we can add component library in this)
├─ eslint-config-custom
| └─ its been there by default
└─ tsconfig
└─ shared tsconfig (to be extended from)
Quick Started
cp .env.example .env
# get clerk secret and publishable key
# change db reference (optional)
yarn install
yarn db:push
yarn dev
View Chrome Extension
- Head over to
chrome://extensionsand enable Developer Mode. - Click on “Load Unpacked” and navigate to your extension’s
/apps/plasmo/build/chrome-mv3-dev(or/apps/plasmo/build/chrome-mv3-prod) directory. - Pin the extension & login. Note that, social login is not fully functioning, so it’s best to stick with password or sending codes to mail
Migrate Prisma
yarn workspace db db:migrate
Deployment
TBC
Todos
- Add Clerk to Project
- Unify environment variables
- Figure out styling library
- Plasmo folder structure improvement
- Plasmo state management
- Fix Landing Page Appearance
- Deployment
Contributing, Suggestions, Bug Reports and Feedback
I’m no expert and most of the stuff aren’t finished, so, any contributions & feedbacks are welcomed! Just open an Issues or a PR!
If you encounter any bugs or issues while using this template, please report them in the Issues section of this repository.
References
The stack originates from create-t3-turbo.