Developer fundamentals guide

Set up your project

Your first step in preparing your headless CMS for development is setting up your project. To start your project set up the right environments in the CMS for development, testing and production. During this setup you'll add users and choose the languages that you need in every environment.

Once this is in place, you can then model the content structure for your project. Check out how to set up your project in Prepr.

Model content

Once your project has been set up, you need to model the structure of the content that will be created by content editors. How you model your content, will also define how you retrieve the data from the API.

Check out our content modeling resources to equip yourself with the best practices and tips on how to model content optimally for a headless CMS.

Retrieve data from the API

After you’ve set up the content structure in your headless CMS, content editors need to create the required content. Once the content is ready, you can start fetching the content in the front end. Use the API to retrieve the content and display it in your web app.

Check out our GraphQL API reference docs on how to retrieve different kinds of content. Our Mutation API (REST) reference docs show you how to add, update or delete content with backend scripts, if needed.

Connect a front-end framework

Once you understand how to retrieve data from your headless CMS using the GraphQL API, it’s time to build your web app with your preferred front-end framework. Check out our quickstarts and complete guides for your chosen framework like one of these listed below:

• Next.js
• Nuxt
• Laravel
• React
• Vue
• Astro
• Svelte

Follow best practices

As a developer, you know it’s not just about mastering code syntax. It's equally important to follow best practices to ensure your code is performant, streamlined, and optimized.

Check out our best practice resources below:

• CSR/SSR/SSG Rendering strategies
• Setting up content item previews
• Working with assets
• Handling redirects
• Handling SEO in a headless CMS
• Using TypeScript with the GraphQL API
• Using webhooks

Include Prepr in your CI/CD workflow

CI/CD is a set of practices that allow for more frequent and reliable website releases. Continuous Integration (CI) involves integrating code changes from multiple developers into a shared repository. While, Continuous Deployment (CD) deploys these tested code changes to a production environment.

CI/CD is important for faster development cycles, improved collaboration, scalability and flexibility. So, as a developer you want the headless CMS to blend in seamlessly with your CI/CD workflow. Check out the Prepr CMS features that support your CI/CD process.

Make your website adaptive

An adaptive website is a website that changes its content in real time based on each visitor’s preferences, behavior, location, and more. It personalizes your visitors' experiences making them more relevant. An adaptive website results in boosted engagement, increased conversions, and overall satisfaction.

Prepr CMS comes with a set of features that makes it very easy to develop an adaptive website. To make your website adaptive, follow the setting up personalization guide to use built-in features in Prepr CMS. It's vital that you collaborate with the editors or marketers who will manage the customer segments and manage their adaptive content for the adaptive website.

Integrate external systems

In a lot of web app implementations, data or services are needed from systems other than the headless CMS, for example to perform search or authentication. So, it's also essential to understand how to integrate the CMS with external systems. Check out the integrations available in Prepr CMS or learn how to create a custom integration with a custom remote source or by using webhooks.