Flotiq is a headless CMS designed for various frontends, such as static sites, mobile, and web applications. Developers and content creators manage and deliver content through REST and GraphQL-based APIs.
Integrating with Astro
Section titled “Integrating with Astro”This guide will use the Flotiq headless CMS API with an Astro project to display content on your website.
Prerequisites
Section titled “Prerequisites”To get started, you will need:
- An Astro project - You can create a new project using the
npm create astro@latestcommand. - A Flotiq account - If you don’t have an account, sign up for free.
- Flotiq read-only API key - Find out how to obtain your key.
Setting up the Environment variables
Section titled “Setting up the Environment variables”Add the read-only API key from your Flotiq account to the .env file in the root of your Astro project:
FLOTIQ_API_KEY=__YOUR_FLOTIQ_API_KEY__Defining a Content Type in Flotiq
Section titled “Defining a Content Type in Flotiq”First, you need to define an example Content Type Definition in Flotiq to store data.
Log in to your Flotiq account and create a custom Content Type Definition with the following example Blog Post configuration:
- Label: Blog Post
- API Name: blogpost
- Fields:
- Title: text, required
- Slug: text, required
- Content: rich text, required
Then, create one or more example Content Objects using this Blog Post type.
Installing the Flotiq TypeScript SDK
Section titled “Installing the Flotiq TypeScript SDK”To connect your project with Flotiq, install the Flotiq SDK using the package manager of your choice:
Next, configure the SDK using your credentials. Create a new file named flotiq.ts inside the src/lib directory of your project:
import { FlotiqApi } from "flotiq-api-ts";
export const flotiq = new FlotiqApi(import.meta.env.FLOTIQ_API_KEY);This configuration can now be used throughout your project.
Fetching and Displaying Data from Flotiq
Section titled “Fetching and Displaying Data from Flotiq”Generating Individual Pages
Section titled “Generating Individual Pages”Astro supports both prerendering all your pages ahead of time, or creating routes on demand when they are requested. Follow the instructions for either static site generation or on-demand rendering to build the page routes for your blog posts.
Static Site Generation
Section titled “Static Site Generation”In static site generation (SSG) mode, use the getStaticPaths() method to fetch all possible blog post paths from Flotiq.
On-demand Rendering
Section titled “On-demand Rendering”If you are using SSR mode, you will need to fetch a single post based on its slug.
Refreshing the SDK After Content Type Changes
Section titled “Refreshing the SDK After Content Type Changes”When using the Flotiq TypeScript SDK (flotiq-api-ts), all your data types are accurately mapped into the Astro project.
If you make changes to the structure of your content types (such as adding a new field or modifying an existing one), you’ll need to refresh the SDK to ensure that your project reflects the latest model updates.
To do this, run the rebuild command for your package manager:
This will update the SDK, aligning object types, fields, and API methods with your current data model.
Publishing Your Site
Section titled “Publishing Your Site”To deploy your website, visit Astro’s deployment guides and follow the instructions for your preferred hosting provider.
Redeploy on Flotiq Changes
Section titled “Redeploy on Flotiq Changes”To update your published site, configure Flotiq to send a webhook your hosting provider to trigger a rebuild whenever your content changes.
In Flotiq, you can define which Content Type and events it should trigger on, and configure it accordingly. See the Flotiq Webhooks documentation for more details.
Official Resources
Section titled “Official Resources”Community resources
Section titled “Community resources”- Flotiq x Astro by Maciek Palmowski