Getting started with Content Cloud

Prerequisites

This is what you will need to get started:

A Content Sync account that you can create here.
One or more Drupal sites with the cms_content_sync module installed.

Set up Drupal as the source

Set up your site

If you’re not using Content Sync in Drupal yet, install the cms_content_sync module on your site, then register your Drupal site in the Content Sync settings and create a Flow to push content.

Push content to Content Sync

Once the configuration has been exported by the site, try pushing a couple of sample content items from the content management dashboard in Drupal.

Verify in the Content Sync dashboard that the content is shown under the Content section.

Set up Content Cloud for delivery

Create Content Cloud space

Create a new space in the Content Sync dashboard here and select Content Cloud as the space type from the drop down. Navigate to Sources and use the Add Source button to connect your Drupal site. Please note that:

The region, default locale and default environment cannot be changed later.
Most customers use en for the default locale and prod for the default space.

Once connected, Content Sync will start setting up the Content Model based on your Drupal content types and then start adding content that you pushed in Drupal. This may take a couple of minutes to complete.

Keep checking the Content Model and Content sections to watch the progress and verify everything’s arriving. Once the content model exists, you can also start pushing new content to the Content Cloud from Drupal.

That’s it! You can now use Content Cloud to serve your content. Keep reading to learn more about the integration and best practices.

Connect your frontend

Create authentication client

Navigate to the space settings of your Content Cloud project in the Content Sync backend. Go to the Authorization (clients) tab and Create a new client. Generate a secret and copy both the secret and the environment variable code example below it to somewhere save.

You can now start querying content using self-signed JWTs in the REST Delivery API or the GraphQL Content API or use the instructions below to use our auto-generated clients instead (recommended).

Optional: auto-generate clients

You will need a TypeScript-based frontend project before continuing. If you don’t have one, create a new, e.g., Next.js project using the TypeScript template.

If you’re building a frontend using TypeScript, our auto-generated clients will translate your whole content model into TypeScript for you and provide an easy to use fetch-client that you can use to make requests with auto-completes and full type safety.

Open the Client generation section of your Content Cloud space in the Content Sync backend. Follow the instructions at Generate schema by running the provided commands in your frontend project, e.g.:

Terminal

# This token is generated on-demand for you when opening the section. export CC_ACCESS_TOKEN="…" # The base URL depends on the region you selected when creating the space. export CC_BASE_URL="https://eu.publisher.cloud.content-sync.io" # Generate the schema and client for a TypeScript project using the REST API and place the code under `app/content-cloud` # If you haven’t installed the content-cloud CLI globally, you can also run: npx @content-sync/content-cloud-cli … # Note that if you’re using the src/ folder in Next.js, you’ll have to change the output directory fromn app/content-cloud to, e.g., src/content-cloud content-cloud generate rest typescript -o app/content-cloud

Copy the commands in the Use client section next to store your space ID CC_SPACE_ID, environment ID CC_ENVIRONMENT_ID, and base URL CC_SATELLITE_BASE_URL as environment variables in your CLI. You can add these to your bash config or project settings to have them persistent; please refer to the documentation of the frontend framework you’re using to learn more about the recommended way to provide environment variables.

Provide the CC_CLIENT_SECRET environment variable from earlier when you created the authorization client. If you haven’t saved this variable, you can also Destroy the secret of the client and Generate a new one.

Take a look at the Next.js/React example code to see how you can use the generated client in your project.

Optional: Create custom user data stores

To store user data like bookmarks or reading histories, create a new User Data type in the User Data section of your Content Cloud project in the Content Sync backend.

Once you have created the type, you’ll have to recreate the client code to make it aware of the new type definitions by running, e.g., content-cloud generate rest typescript -o app/content-cloud. You can then use the generated client to save and retrieve user data or query for content based on the user data associated with it.