Configure JavaScript SDK

Configure Optimizely Content Management System (CMS) Command Line Interface (CLI) by creating API credentials, configuring required environment variables, validating the connection, and defining a configuration file so the CLI can discover and manage your content models.

Prerequisites

• An Optimizely CMS (SaaS) instance.
• Node.js installed.
• The Optimizely CMS CLI available through npx.

1. Create an API client in Optimizely CMS

The CLI authenticates with Optimizely CMS using an API client.

1. Sign in to your CMS instance at https://[your-instance].cms.optimizely.com.

2. Go to Settings > API Keys.

3. Click Create API key.

   

4. Enter a name for the API key.

   • Select Impersonation if you want to create a token with the role of another account.

5. Click Create API key.

   

The CMS displays a Client ID and Client Secret.

🚧

Important

Save the client secret securely. You cannot retrieve it again after closing the dialog.

2. Create environment variables

Create an .env file in the root of your project and add the following variables:

OPTIMIZELY_CMS_CLIENT_ID=<your-client-id>
OPTIMIZELY_CMS_CLIENT_SECRET=<your-client-secret>

📘

Note

Do not commit the .env file to source control. It contains sensitive credentials.

3. Verify the connection

Verify that the CLI can connect to your CMS instance.

npx @optimizely/cms-cli@latest login

If the connection succeeds, the CLI confirms that authentication is complete.

4. Create the CLI configuration file

Create an optimizely.config.mjs file in the root of your project. This file tells the CLI where to find your content type definitions.

Basic configuration

import { buildConfig } from '@optimizely/cms-sdk';

export default buildConfig({
  components: ['./src/components/**/*.tsx'],
});

Example project structure

.
├── src/
│   ├── app/
│   └── components/
│       └── Article.tsx
├── public/
├── .env
├── optimizely.config.mjs
└── …

Optional: Configure property groups

Property groups organize fields in the CMS editor. Use them to group related properties, such as SEO or metadata fields.

Example configuration

import { buildConfig } from '@optimizely/cms-sdk';

export default buildConfig({
  components: ['./src/components/**/*.tsx'],
  propertyGroups: [
    {
      key: 'seo',
      displayName: 'SEO',
      sortOrder: 1,
    },
    {
      key: 'meta',
      displayName: 'Metadata',
      sortOrder: 2,
    },
  ],
});

Property group fields

• key (required) – Unique identifier for the group.
• displayName (optional) – Label shown in the CMS editor.
• sortOrder (optional) – Display order in the editor.

Reference property groups in your content type definitions using the group field.

Optional: Use a non-production API environment

The CLI uses the production API endpoint by default:

https://api.cms.optimizely.com

To use a different environment, such as a test endpoint, set the following environment variable:

OPTIMIZELY_CMS_API_URL=https://api.cmstest.optimizely.com

Next steps

You are now ready to model content and synchronize your content types with Optimizely CMS.