Your first SAAS Project -- Setup

Hey everyone,

When I first started Remko's StarterKit, I honestly had no idea what I was doing. After spending a couple of months working through it, I’ve learned quite a bit.

I’d like to share some insights and information that might help others who are just getting started. It may seem basic to some of you, but it could be really helpful for someone who’s completely new.

Hope this helps someone on their journey!

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js 18+ - Download from nodejs.org
• Yarn 4.5.0+ - Package manager (comes with Node.js or install separately)

• Optimizely CMS SaaS Instance - Sign up for the program
• GitHub Account - For repository access
• Vercel Account (optional) - For deployment and environment variable management

Quick Start

1. Clone the Repository

# Clone the repository
git clone https://github.com/remkoj/optimizely-saas-starter.git
cd optimizely-saas-velocity

2. Install Dependencies

# Install root dependencies
yarn install

# Install frontend dependencies
cd apps/frontend
yarn install

3. Environment Configuration

Create a .env.local file in the apps/frontend directory:

# Navigate to frontend directory
cd apps/frontend

# Create the sample environment file
 .env.local

Edit .env.local and fill in your actual values for each variable.

• All required environment variables
• Descriptions and examples for each variable
• Default values where applicable

4. Get Your Optimizely Credentials

1. CMS URL: Your Optimizely CMS instance URL
2. GraphQL Keys: From CMS Dashboard → Settings → Render Content
   • App Key
   • Secret
   • Single Key
3. REST API Credentials: From CMS Dashboard → Settings → Applications
   • Client ID
   • Client Secret

5. Start Development Server

# From the root directory
yarn dev

# Or from the frontend directory
cd apps/frontend
yarn dev

The development server will start at http://localhost:3000/

Available Development Commands

1. Create content type in CMS -  Define the new content type in Optimizely CMS SaaS (via Admin UI or API). 
2. Generate Next.js components 
        yarn opti-cms nextjs:components 
		1. Generates scaffolded Next.js components for the new content type. 
		2. <Component folder>/ index.ts 
3. Pull .Json from CMS 
         yarn opti-cms types:pull 
		1. Pulls the latest .JSON type definitions from the CMS into your project. 
4. Create GraphQL fragment 
        yarn opti-cms nextjs:fragments 
		1. Generates a GraphQL fragment file for querying the content type. 

                                                    OR

2. Instead of line 2 to 4 you can just run this command  Yarn opti-cms nextjs:create 

5. Compile project 
 yarn compile  - Compiles updated TypeScript and GraphQL code to ensure everything is synced. 
yarn run build  - build your solution
ran run dev - run your project

Note :- I’d recommend to use ‘yarn upgrade-interactive’ as that’ll show all packages that can be updated and allows you to select the ones that you want to update.

Regards,