Super-Simple-Contentful-Studio

A simple Next.js server-side application that serves as a reference implementation for integrating the Contentful Studio product.

Disclaimer: This project is not created by or supported by Contentful. It is a community-driven reference implementation.

Getting Started

1. Clone the repository:

   git clone https://github.com/shanonplace/Super-Simple-Contentful-Studio.git
   cd Super-Simple-Contentful-Studio.git

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env.dev file in the root directory and add the following:

   IS_PREVIEW=true
   CONTENTFUL_PREVIEW_KEY=your_preview_api_key
   CONTENTFUL_DELIVERY_KEY=your_delivery_api_key
   CONTENTFUL_SPACE=your_space_id
   CONTENTFUL_ENVIRONMENT=your_environment_id
   CONTENTFUL_EXPERIENCE_TYPE=your_experience_type

   See env.sample for an example.

4. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

Multi-Environment Setup

This project demonstrates a multi-environment architecture for local development.

Environment Overview

Environment	Local URL	Port	Preview Mode
Local/Dev	http://dev.localhost:3000	3000	true
QA	http://qa.localhost:3001	3001	true
Staging	http://staging.localhost:3002	3002	true
Production	http://prod.localhost:3003	3003	false

How It Works

• Environment Files (.env.*) contain configuration for each environment
• npm scripts use env-cmd to load the correct environment file
• Different ports allow you to run all environments simultaneously
• Preview mode determines which Contentful API is used (Preview vs Delivery)

Running Different Environments

Run environments individually:

# Local development
npm run dev
# → http://localhost:3000 or http://dev.localhost:3000

# QA environment
npm run dev:qa
# → http://localhost:3001 or http://qa.localhost:3001

# Staging environment
npm run dev:staging
# → http://localhost:3002 or http://staging.localhost:3002

# Production environment
npm run dev:prod
# → http://localhost:3003 or http://prod.localhost:3003

Or run dev, QA, and prod all at once:

npm run dev:all

Using .localhost Subdomains

Modern browsers automatically resolve *.localhost to 127.0.0.1:

• http://dev.localhost:3000
• http://qa.localhost:3001
• http://staging.localhost:3002
• http://prod.localhost:3003

Environment Variables

Each environment uses its own .env file:

File	Purpose	Preview Mode
.env.dev	Local development	true
.env.qa	QA testing	true
.env.staging	Staging	true
.env.production	Production	false

Environment File Structure:

IS_PREVIEW=true
CONTENTFUL_PREVIEW_KEY=your_preview_api_key
CONTENTFUL_DELIVERY_KEY=your_delivery_api_key
CONTENTFUL_SPACE=your_space_id
CONTENTFUL_ENVIRONMENT=master
CONTENTFUL_EXPERIENCE_TYPE=your_experience_type

API Key Usage:

• IS_PREVIEW=true: Uses CONTENTFUL_PREVIEW_KEY and connects to preview.contentful.com (draft and unpublished content)
• IS_PREVIEW=false: Uses CONTENTFUL_DELIVERY_KEY and connects to cdn.contentful.com (published content only)

Setup:

1. Copy env.sample to create environment files
2. Update each file with your Contentful credentials
3. Never commit .env.* files to version control

License

This project is open-source and available under the MIT License.