Pre-requisites for quick deploy:
- Optimizely SaaS CMS instance, with administrator access
- GitHub account
- Netlify or Vercel account
Deploy this project with one click:
Note: You'll need to configure the environment variables during deployment. See the Environment Setup section below for required values.
After deploying the project via one of the buttons above, your front-end will return a 404. Next, you need to configure an Application in the CMS (which will also require creating a site homepage -- be sure to publish it!). The Application hostname should match the front-end domain (for example: your-project-name.netlify.app / your-project-name.vercel.app), and the locale should be "en". After configuring the Application, re-run the Optimizely Graph Full Synchronization Scheduled Job, and your homepage should now appear.
Note: these instructions are for configuring the CMS, and setting up and running the front-end locally on your computer.
More in-depth setup and usage instructions will follow.
- Clone the repository
- CMS: import the content pack (and types) into your CMS instance
- CMS > Settings > Import Data
- Import the content pack file from the repo /contentpack/Astro - ContentTypes.episerverdata, selecting "Root" as the content destination.
- CMS: configure an Application (front-end)
- CMS > Settings > Applications > Create Application
- Hostnames > Add Hostname...
- Hostname: localhost:4321
- Use a secure connection (HTTPS): true
- Locale: en
- Environment Setup: Create your .env file based on the .env.template example
- Values can be found at: CMS > Settings > API Keys
- Note, you must create a new API key for managing styles (it does not exist by default)
- Configure DAM settings based on your CMS instance capabilities (see Environment Variables below)
- Install dependencies using Yarn (or your preferred package manager):
yarn install
- Run the codegen command to generate your local graphql files from the CMS content types
yarn codegen
- OPTIONAL: Pull the styles from the CMS (added via the content pack import)
yarn styles:pull
- Run the Astro front-end locally in dev mode
yarn run dev
Result: your frontend should now load at https://localhost:4321/ and inside the CMS for content preview.
The following environment variables are required for the application to function properly:
| Variable | Description | Where to find |
|---|---|---|
OPTIMIZELY_CMS_URL |
Your CMS instance URL | CMS domain (e.g., https://app-yourinstance.cms.optimizely.com) |
OPTIMIZELY_GRAPH_GATEWAY |
Optimizely Graph API endpoint | Usually https://cg.optimizely.com |
OPTIMIZELY_GRAPH_SINGLE_KEY |
Single-use API key for Graph | CMS > Settings > API Keys |
OPTIMIZELY_GRAPH_APP_KEY |
Application key for Graph | CMS > Settings > API Keys |
OPTIMIZELY_GRAPH_SECRET |
Secret key for Graph | CMS > Settings > API Keys |
OPTIMIZELY_CLIENT_ID |
API client ID for style management | CMS > Settings > API Keys (create new) |
OPTIMIZELY_CLIENT_SECRET |
API client secret for style management | CMS > Settings > API Keys (create new) |
| Variable | Description | Default | Usage |
|---|---|---|---|
PREVIEW_DELAY |
Delay in ms for content preview updates | 600 |
Increase if preview updates are unreliable |
OPTIMIZELY_DAM_ENABLED |
Enable DAM (Digital Asset Management) features | false |
Set to true if your CMS instance has DAM enabled |
OPTIMIZELY_FORMS_ENABLED |
Enable Optimizely Forms features | false |
Set to true if your CMS instance has Forms enabled |
EXTERNAL_PREVIEW_ENABLED |
Enable external preview feature | false |
Set to true to enable external preview links |
EXTERNAL_PREVIEW_TOKEN |
String token for external preview feature | OptiPreview123 |
Required to enable external preview links |
OPTIMIZELY_DEV_MODE |
Enable GraphQL debug panel in footer | false |
Set to true to show GraphQL queries being executed |
The OPTIMIZELY_DAM_ENABLED variable controls how GraphQL queries are generated:
false(default): Uses standard GraphQL fragments without DAM-specific fields likeitem.AltTexttrue: Uses enhanced GraphQL fragments that include DAM fields for richer media metadata
How to determine if DAM is enabled:
- Check if your CMS instance includes Digital Asset Management features
- Test GraphQL queries - if
ContentReference.itemfield exists in your schema, DAM is enabled - Contact your Optimizely administrator if unsure
Important: Setting this incorrectly will cause GraphQL compilation errors during yarn codegen.
Note: the Site Settings component currently allows you to update the site logo, header/top nav, footer, and social accounts, and set an Optimizely Web Project ID. Additional features may follow.
- Create a new Shared Block of type "Site Settings". If using the existing content pack, a Site Settings block is included in the "For This Page" for the imported homepage.
- Set the "Site Domain" field to match your domain, eg. "www.yoursite.com" -- for a local setup, it should be "localhost:4321". (Without this value defined, the site won't use the block.)
- Update the Site Settings as desired. Updates will be reflected on publish.
Note: the Site Styles component allows you to update the site colors, base font sizes, etc.
- Create a new Shared Block of type "Site Styles".
- Set the "Site Domain" field to match your domain, eg. "www.yoursite.com" -- for a local setup, it should be "localhost:4321". (Without this value defined, the site won't use the block.)
- Update the Site Styles as desired. Updates will be reflected on publish.
Note: the site is built using daisyUI. You can create a new theme via daisyUI's Theme Generator, and paste the full results (click the "CSS" button) into the "DaisyUI Theme" property text box.
Using the industry's leading testing and personalization platform? Set your Web Project ID in the Site Settings component, and the Web snippet will load on all pages.
Want to create content in additional languages?
You should be able to simply enable the language via the CMS Settings UI.
If the new language does not render, or you want the new language to fallback to English (when a page in the new language doesn't exist):
- Run the Optimizely Graph Full Sync scheduled job
- Redeploy your site frontend to dynamically update the astro.config.mjs file based on enabled languages.
- Grid Component - Flexible layout system with standard and Bento grid options
- ArticleList Component - Horizontally scrollable list of article cards
- Card Component - Versatile content display with multiple layout configurations
- Carousel Component - Infinite-scrolling image carousel with autoplay
- Collapse Component - Expandable/collapsible content sections
- Hero Component - Full-width banner with video/image backgrounds
- Paragraph Component - Rich text content rendering
- Image Component - Optimized images with configurable styling
- Video Component - Video content with aspect ratios and playback controls
- CallToAction Component - Collection of action buttons for user engagement
- Text Component - Configurable heading and text elements