How to build an app
Since Cal.com is open source we encourage developers to create new apps for others to use. This guide is to help you get started.
yarn app-store create
- Create the app using the
- The app can be installed now. But at this moment it isn't doing anything. It is just installed and ready to do what you want it to do.
- There is pretty much no restriction on what an App can do. Some of the examples are:
- Hooking into existing functionalities to enhance them - In all these cases you need to first check if the app is installed or not. There is
useApp(appSlug)react hook to do that. It gives you the app details if the app is installed.
- Apps that need to connect with third parties like Google Calendar, Apple Calendar, Google Meet.
| ├──config.json -> Autogenerated by cli. You are free to edit it.
| | ├──add.ts -> Autogenerated by cli. You would want to edit it if your app needs to connect with a third party
| ├──static -> Add all static assets here
| | ├──icon.svg -> This is used as the logo for your App.
| ├──.env.example -> Specify the environmental variables (ex. auth token, API secrets) that your app will need if it's applicable
| ├──README.mdx -> Customize your app description. You can add an image slider as well.
Deleting an app:
yarn app-store delete --slug APP_NAME
Editing an app:
yarn app-store edit --slug APP_NAME
- Make sure to have
yarn app-store:watchcommand running when developing an app so that autogenerated files are always up to date.
- If app-store cli fails at this step, try to run this command manually first. Solve that problem and then re-run cli. The command can fail because there are Prisma migrations that can't be applied automatically.
A sample failure in create command
- When you edit an app following things aren't updated.
- README.mdx - It would still have the old description. Feel free to edit it manually.