Welcome to Optimizely Masterclass

Welcome to the Optimizely Masterclass! This comprehensive course is designed to help you master Optimizely SaaS CMS and build powerful, content-driven applications. Whether you're a beginner or an experienced developer, this course will guide you through the process of creating a modern web application using Optimizely's powerful features.

This course is completely free! If you have any questions, suggestions for improvements, or need help with the code, please don't hesitate to reach out to me. I'm committed to making this learning experience as valuable as possible for you.

Course Structure

This course combines both theory and practical coding exercises:

• Theory Steps: These sections explain concepts, architecture, and best practices in Optimizely SaaS CMS.
• Coding Steps: These practical sections include hands-on coding exercises. Each coding step has a "Step Code" section at the top of the page with a link to the specific branch containing all the code for that step.

Course Repositories

There are two GitHub repositories associated with this course:

1. Main Repository: Complete Project

Repository: https://github.com/szymonuryga/Optimizely-Masterclass

This is the quick starter repository that includes all features covered in the course. I built this project first and then documented the steps to recreate it in the course.

• Live Preview: https://optimizely-masterclass.vercel.app/
• Content Import File: You'll find the ExportedFile.episerverdata file with all the content and content types in this repository.

If you want to quickly start building your own project, clone this repository, configure the environment variables, and start coding. If you're curious about how specific features were implemented, refer to the course materials.

2. Step-by-Step Repository: Learning Journey

Repository: https://github.com/szymonuryga/optimizely-masterclass-step-by-step

This repository contains step-by-step instructions with code examples showing how to build the application from scratch. It's primarily designed for learning purposes, allowing you to see exactly how each feature was implemented.

Frequently Asked Questions

"Changes I publish in the CMS don't show up on localhost:3000"

This is a common issue because the project is configured for production, where all content is served from cache. In production, when content is published in the CMS, a webhook is triggered to revalidate the cache for that page.

For local development, you have two options:

1. Run npm run dev after each CMS change

This will restart the development server and fetch the latest content.

2. Disable caching for development

In the file lib/optimizely/fetch.ts, change:

cache = 'force-cache'

to:

cache = 'no-store'

A better solution might be to add an environment flag that determines the caching strategy:

• In production: force-cache for better performance
• In development: no-store for immediate visibility of changes

Getting Started

To make the most of this course:

1. Clone both repositories to have all the resources at your disposal
2. Follow the steps sequentially to build a solid understanding
3. Experiment with the code to deepen your learning
4. Import the provided content file to quickly set up your Optimizely environment

Let's begin our journey to mastering Optimizely SaaS CMS!