@contentful/create-studio-experiences

@contentful/create-studio-experiences

This package is a CLI tool to bootstrap a React, Vite & TypeScript app that renders Studio Experiences.

Prerequisites

A Contentful Space that has Studio Experiences enabled. See: How to enable Experiences in a space.

Getting started

To create a Contentful Studio Experiences project, run this command and follow the prompts.

npm init @contentful/studio-experiences

Navigate to your project directory and start the server. After that, you can manage your Experiences in Contentful.

cd studio-experiences-react-app
npm run dev

Developing locally

Run npm run dev to start the dev server that will watch and recompile the apps on changes.

Once built, you can test the CLI locally by running npm run create, which will do the follow:

• Copy the templates to the local folder
• Run node dist/index.js -d to start the CLI in dev mode
• Clean up the templates folder after the CLI has finished

CLI Steps

• Project Type
• React Type
• Installation Path - The generated project will be installed here.
• Connect to Contentful Space (Optional) - Note: only spaces that have Studio Experiences enabled are eligible. See: How to enable Experiences in a space.
  • Select your Contentful Organization.
  • Select your Contentful Space.
  • Select your Environment (if your Space has multiple).
  • Select or Create an API key.
  • Content Type will be created for Experiences if needed.
  • Demo Experience Entry will be created (unless one exists).
  • Content Preview Settings will be configured if needed.
• Project Output - The React project will be created, incorporating the Studio Experiences SDK.

CLI Options

• Host - Specify the Contentful host. Defaults to contentful.com.

  node dist/index.js --host <my_host>
  

• Dev - Argument that is likely only applicable if you are actively developing this package. If --dev argument is passed, some basic cleanup operations will occur after the bulk of the executable has be run, namely the auth token will be revoked if it was generated by the CLI in that run. Additionally, the react project that was bootstrapped during execution will be deleted.

  node dist/index.js --dev
  

• Token - If you already have a valid API CLI token, you can optionally pass it as an argument. If you do not pass one, you will be prompted to create one at runtime.

  node dist/index.js --token <my_token>