This is a starter template for Contentful Studio.
- Generate a Contentful CMA Token
- Grab your Contentful Organisation ID
- Clone the repository
- Run
npm install - Run
npm run setup - Run
npm run dev
Setup will ask you a few questions, and create a space for you as well as update your .env.local file. It may take a few minutes to import the assets.
Note
You may see some rate limit warnings during setup. You can safely ignore these and wait for the setup script to retry and finish.
Since the Studio root needs to be used as a client component there is a separate component that is used to wrap the Studio root. This is located in src/app/_studio/studio.tsx. This is the entry point for Studio.
Components used in Studio live in src/app/_studio. General components used for layouts and the like are in src/app/_components.
Each Studio component is contained in a directory. The component itself lives in the file [ComponentName]Component.tsx. The component's Studio definition lives in the same folder under the index.ts file.
The registration for studio components lives in src/lib/register-components.ts.
This project uses Tailwind CSS. You can find the configuration in tailwind.config.js. However the colors are located in studio.config.js. This is so we can use the colors in the Studio design tokens as well.
This project uses next-intl to do translations. You can find the manual translation files in the translations directory. Studio will pick up which language you are using and send it to Contentful.