### Run StudioCMS Migration and Development Server

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Execute these commands during initial setup or after schema updates to prepare the database and start the local development environment.

```shell
<PackageManagers type="run" args="studiocms migrate --latest" />
<PackageManagers type="run" args="dev" />
```

--------------------------------

### Install Turso CLI

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays usage information for the Turso CLI installer.

```log
Usage: getTurso [options]

Turso CLI Installer

Options:
  -h, --help  display help for command
```

--------------------------------

### Install @studiocms/blog

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-blog.mdx

Use the package manager to add the blog plugin to your project.

```bash
npx studiocms add @studiocms/blog
```

--------------------------------

### Install CFetch automatically

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Use the Astro CLI to automatically install the integration.

```bash
npx astro add @studiocms/cfetch
```

--------------------------------

### Configure dbStartPage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/index.mdx

Controls the injection of the database initialization page during first-time setup.

```ts
export default defineStudioCMSConfig({
  dbStartPage: true, // DEFAULT - This injects a start page to setup your DB data.
})
```

--------------------------------

### Setup Kysely Client

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/kysely.mdx

Initialize the database client using the LibSQL driver and Effect-ts configuration.

```ts
import { getDBClientLive } from '@withstudiocms/kysely';
import type { StudioCMSDatabaseSchema } from '@withstudiocms/sdk/tables';
import { libsqlDriver } from '@withstudiocms/kysely/drivers/libsql';
import { ConfigProvider, Effect } from 'studiocms/effect';

export const getDbClient = Effect.gen(function* () {
	// Setup the LibSQL driver with a database URL from config
	const dialect = yield* libsqlDriver.pipe(
		Effect.withConfigProvider(
			ConfigProvider.fromJson({
				CMS_LIBSQL_URL: 'file:./test.db',
			})
		)
	);

	// Return the Kysely DB client with Effect helpers
	return yield* getDBClientLive<StudioCMSDatabaseSchema>(dialect);
});
```

--------------------------------

### Install @studiocms/markdoc

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-markdoc.mdx

Use the package manager command to add the integration to your project.

```bash
npx studiocms add @studiocms/markdoc
```

--------------------------------

### Install @studiocms/devapps via Astro CLI

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-devapps.mdx

Use the Astro CLI to automatically install and configure the package.

```bash
npx astro add @studiocms/devapps
```

--------------------------------

### Install @studiocms/devapps manually

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-devapps.mdx

Install the package via package manager and manually add it to the astro.config.mjs file.

```bash
npm install @studiocms/devapps
```

```ts
import { defineConfig } from 'astro/config';
import studiocms from 'studiocms';
import devApps from '@studiocms/devapps'; 

export default defineConfig({
   site: "https://example.com",
   integrations: [
       studiocms(), // REQUIRED
       devApps(), 
   ],
});
```

--------------------------------

### Install @studiocms/md

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-md.mdx

Use the package manager command to add the plugin to your project.

```bash
npx studio-cms add @studiocms/md
```

--------------------------------

### Start Docker Container

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/database/sqld-server.mdx

Launch the libSQL server container using Docker Compose.

```sh
docker compose up -d
```

--------------------------------

### Install @studiocms/mdx

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-mdx.mdx

Use the package manager command to add the MDX plugin to your project.

```bash
npx studiocms add @studiocms/mdx
```

--------------------------------

### Install CFetch manually

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Install the package manually using your preferred package manager.

```bash
npm install @studiocms/cfetch
```

--------------------------------

### Install @studiocms/wysiwyg

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-wysiwyg.mdx

Use the StudioCMS CLI to add the WYSIWYG plugin to your project.

```bash
npx studiocms add @studiocms/wysiwyg
```

--------------------------------

### Install StudioCMS Blog Plugin

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Install the official blog plugin to quickly add a frontend to your StudioCMS project.

```shell
<PackageManagers type="install" pkg="@studiocms/blog" />
```

--------------------------------

### Install peer dependencies

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Ensure the Effect library is installed as a peer dependency.

```bash
npm install effect
```

--------------------------------

### Start Astro Development Server

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Use this command to launch the local development server for your Astro project.

```shell
<PackageManagers type="run" args="dev" />
```

--------------------------------

### Setup Markdown Processor

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/markdown-remark.mdx

Initialize the processor using createMarkdownProcessor and export a render function for processing markdown strings.

```ts
import { createMarkdownProcessor } from '@studiocms/markdown-remark/core';
import type { MarkdownProcessorRenderOptions } from '@studiocms/markdown-remark/types';

const processor = await createMarkdownProcessor({
	/* 
    * Your Options here 
    * same as https://docs.astro.build/en/reference/configuration-reference/#markdown-options
    */
});

export async function render(
	content: string,
	options?: MarkdownProcessorRenderOptions
) {
	const result = await processor.render(content, options);

	return {
		html: result.astroHTML,
		meta: result.metadata,
	};
}
```

--------------------------------

### Install @studiocms/html

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-html.mdx

Use the package manager to add the HTML plugin to your StudioCMS project.

```bash
npx studiocms add @studiocms/html
```

--------------------------------

### Migrate database client dependencies

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/upgrade/version-guides/0-1-0.mdx

Commands to remove the deprecated libsql client and install the new kysely-turso package.

```bash
<PackageManagers type="remove" pkg="@libsql/kysely-libsql" />
```

```bash
<PackageManagers type="add" pkg="kysely-turso" />
```

--------------------------------

### Install Cloudinary Plugin

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-cloudinary-js.mdx

Use the StudioCMS CLI to add the Cloudinary image service package to your project.

```bash
npx studiocms@latest add @studiocms/cloudinary-image-service
```

--------------------------------

### Create a Custom StudioCMS Plugin

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/plugins/index.mdx

Example implementation of a plugin using definePlugin, including an Astro Integration for custom logic.

```ts
import { definePlugin } from 'studiocms/plugins';
import { AstroIntegration } from 'astro';

// Define the options for the plugin and integration
interface Options {
    foo: string;
}

// Define the Astro integration
const myIntegration = (options: Options): AstroIntegration => ({
    name: 'my-astro-integration',
    hooks: {
        "astro:config:setup": () => {
            console.log('Hello from my Astro Integration!');
        }
    }
});

// Define the StudioCMS Plugin
export const myPlugin = (options: Options) => definePlugin({
    identifier: 'my-plugin',
    name: 'My Plugin',
    hooks: {
      'studiocms:astro-config': ({ addIntegrations }) => {
        addIntegrations(myIntegration(options)) // Optional, but recommended
      }
    }
});
```

--------------------------------

### cFetchText Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching text data using Promises.

```ts
const cFetchText: (
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<string>>
```

```ts
import { cFetchText } from "c:fetch"

const effect = await cFetchText(
  'https://example.com',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<string>
*/
```

--------------------------------

### Get a user by ID using withCodec

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/kysely.mdx

Demonstrates retrieving a user record by ID using the withCodec helper with defined encoder and decoder schemas.

```ts
import { getDBClientLive } from '@withstudiocms/kysely';
import type { StudioCMSDatabaseSchema } from '@withstudiocms/sdk/tables';
import { libsqlDriver } from '@withstudiocms/kysely/drivers/libsql';
import { ConfigProvider, Effect } from 'studiocms/effect';

export const getDbClient = Effect.gen(function* () {
	// Setup the LibSQL driver with a database URL from config
	const dialect = yield* libsqlDriver.pipe(
		Effect.withConfigProvider(
			ConfigProvider.fromJson({
				CMS_LIBSQL_URL: 'file:./test.db',
			})
		)
	);

	// Return the Kysely DB client with Effect helpers
	return yield* getDBClientLive<StudioCMSDatabaseSchema>(dialect);
});
// ---cut---
import { Schema } from 'studiocms/effect';
import { StudioCMSUsersTable } from '@withstudiocms/sdk/tables';

export const insertUser = Effect.gen(function* () {
    const { withCodec } = yield* getDbClient;

	const getUserById = withCodec({
		encoder: Schema.String,
		decoder: Schema.UndefinedOr(StudioCMSUsersTable.Select),
		callbackFn: (db, id) =>
			db((client) =>
				client.selectFrom('StudioCMSUsersTable')
				.selectAll()
				.where('id', '=', id)
				.executeTakeFirst()
			),
	});

	const user = yield* getUserById('some-user-id');
//        ^?
	console.log('User by ID:', user);
});
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Command to enter the newly created project folder.

```bash
cd my-project
```

--------------------------------

### Initialize StudioCMS project

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays usage information for the project initialization command.

```log
Usage: studiocms init [options]

Initialize the StudioCMS project after new installation.

Options:
  -d, --dry-run     Dry run mode
  --skip-banners    Skip all banners
  --debug           Enable debug mode
  -h, --help        Display help for command
```

--------------------------------

### View CLI Help and Options

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays the available commands and global options for the create-studiocms CLI.

```log
Usage: create-studiocms [options] [command]

Options:
  -V, --version  Output the current version of the CLI Toolkit.
  -h, --help     display help for command
  --color        force color output
  --no-color     disable color output

Commands:
  get-turso      Get the latest version of Turso.
  help           Show help for command
  interactive*   Start the interactive CLI.

  * Indicates the default command that is run when calling this CLI.
```

--------------------------------

### Initialize and Run StudioCMS Project

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/index.mdx

Use these commands to scaffold a new StudioCMS project and launch the local development server.

```sh
# Create a new Astro project
pnpm create studiocms@latest

# Start the development server
cd my-studiocms-project
pnpm dev
```

--------------------------------

### Insert a new user using withCodec

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/kysely.mdx

Demonstrates initializing a database client and using the withCodec helper to insert a new user record into the StudioCMSUsersTable.

```ts
import { getDBClientLive } from '@withstudiocms/kysely';
import type { StudioCMSDatabaseSchema } from '@withstudiocms/sdk/tables';
import { libsqlDriver } from '@withstudiocms/kysely/drivers/libsql';
import { ConfigProvider, Effect } from 'studiocms/effect';

export const getDbClient = Effect.gen(function* () {
	// Setup the LibSQL driver with a database URL from config
	const dialect = yield* libsqlDriver.pipe(
		Effect.withConfigProvider(
			ConfigProvider.fromJson({
				CMS_LIBSQL_URL: 'file:./test.db',
			})
		)
	);

	// Return the Kysely DB client with Effect helpers
	return yield* getDBClientLive<StudioCMSDatabaseSchema>(dialect);
});
// ---cut---
import { Schema } from 'studiocms/effect';
import { StudioCMSUsersTable } from '@withstudiocms/sdk/tables';

export const insertUser = Effect.gen(function* () {
    const { withCodec } = yield* getDbClient;

	const insertNewUser = withCodec({
		encoder: StudioCMSUsersTable.Insert,
		decoder: StudioCMSUsersTable.Select,
		callbackFn: (db, newUser) =>
			db((client) =>
				client
					.insertInto('StudioCMSUsersTable')
					.values(newUser)
					.returningAll()
					.executeTakeFirstOrThrow()
			),
	});

	const data = {
		username: 'codec_user',
		email: 'codec_user@example.com',
		password: null,
		avatar: null,
		emailVerified: false,
		name: 'user',
		notifications: '',
		url: null,
		id: crypto.randomUUID(),
		updatedAt: new Date().toISOString(),
		createdAt: new Date().toISOString(),
	};

	const insertedUser = yield* insertNewUser(data);
//        ^?
	console.log('Inserted user with codec:', insertedUser);
});
```

--------------------------------

### Basic SDK Usage with Effect and JS

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/sdk.mdx

Demonstrates how to interact with the SDK using the Effect pattern or the direct JS wrapper.

```ts
/// <reference types="studiocms/v/types" />
// ---cut---
import { SDKCore, SDKCoreJs, runSDK } from 'studiocms:sdk';
import { Effect } from 'studiocms/effect';


// Create the Usable Effect
const pagesEffect = Effect.gen(function* () {
  const sdk = yield* SDKCore;

 // then do something with the SDK
 return yield* sdk.GET.pages()
});

// Convert the Effect into a JS/TS "program"
const pagesResult1 = await runSDK(pagesEffect);


// Just run the SDKCoreJS with the runSDK wrapper!
const pagesResult2 = await runSDK(SDKCoreJs.GET.pages());
```

--------------------------------

### cFetch Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for the generic Promise-based fetch function.

```ts
const cFetch: <T>(
  url: string | URL, 
  parser: (response: Response) => Promise<T>, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<T>>
```

```ts
import { cFetch } from "c:fetch"

const effect = await cFetch<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  (res) => res.json(),
  { method: "GET" }
);
/*
Return type:
  CachedResponse<{ foo: string; bar: number; }>
*/
```

--------------------------------

### cFetchEffect Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for the generic Effect-based fetch function.

```ts
const cFetchEffect: <T>(
  url: string | URL, 
  parser: (response: Response) => Promise<T>, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<T>, FetchError, never>
```

```ts
import { cFetchEffect, Duration } from "c:fetch"

const effect = cFetchEffect<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  (res) => res.json(),
  { method: "GET" },
  { 
    ttl: Duration.hours(1), 
    tags: ['example'], 
    key: "api-data-fetch", 
    verbose: false 
  }
);
/*
Return type:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/
```

--------------------------------

### cFetchBlob Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching Blob data using Promises.

```ts
const cFetchBlob: (
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<Blob>>
```

```ts
import { cFetchBlob } from "c:fetch"

const effect = await cFetchBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<Blob>
*/
```

--------------------------------

### cFetchJson Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching JSON data using Promises.

```ts
const cFetchJson: <T>(
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Promise<CachedResponse<T>>
```

```ts
import { cFetchJson } from "c:fetch"

const effect = await cFetchJson<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Return type:
  CachedResponse<{ foo: string; bar: number; }>
*/
```

--------------------------------

### View studiocms CLI help

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays the available options and commands for the main StudioCMS utility CLI.

```log
Usage: studiocms [options] [command]

Options:
  -V, --version  Output the current version of the CLI Toolkit.
  -h, --help     display help for command

COMMANDS
  - add               Add StudioCMS plugin(s) to your project
  - crypto            Crypto Utilities for StudioCMS Security
  - get-turso         Install the Turso CLI
  - init              Initialize the StudioCMS project after new installation.
  - users             Utilities for Tweaking Users in StudioCMS
  - migrate           Manage database migrations for StudioCMS.
```

--------------------------------

### cFetchEffectBlob Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching Blob data using Effects.

```ts
const cFetchEffectBlob: (
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<Blob>, FetchError, never>
```

```ts
import { cFetchEffectBlob } from "c:fetch"

const effect = cFetchEffectBlob(
  'https://example.com/image.png',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<Blob>, FetchError, never>
*/
```

--------------------------------

### cFetchEffectText Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching text data using Effects.

```ts
const cFetchEffectText: (
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<string>, FetchError, never>
```

```ts
import { cFetchEffectText } from "c:fetch"

const effect = cFetchEffectText(
  'https://example.com',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<string>, FetchError, never>
*/
```

--------------------------------

### cFetchEffectJson Interface and Usage

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Interface and example for fetching JSON data using Effects.

```ts
const cFetchEffectJson: <T>(
  url: string | URL, 
  options?: RequestInit | undefined, 
  cacheConfig?: CFetchConfig | undefined
) => Effect.Effect<CachedResponse<T>, FetchError, never>
```

```ts
import { cFetchEffectJson } from "c:fetch"

const effect = cFetchEffectJson<{ foo: string; bar: number; }>(
  'https://api.example.com/data',
  { method: "GET" }
);
/*
Return type:
  Effect.Effect<CachedResponse<{ foo: string; bar: number; }>, FetchError, never>
*/
```

--------------------------------

### Enable Demo Mode

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Configures demo mode with specific credentials for site access.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    developerConfig: {
      demoMode: {
        username: 'foo',
        password: 'bar'
      }
    }
  }
})
```

--------------------------------

### Interactive CLI Command Options

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Lists the specific flags available when running the interactive project creation command.

```log
Usage: create-studiocms interactive [options]

Start the interactive CLI. Powered by [clack](https://clack.cc).

This command will open an interactive CLI prompt to guide you through
the process of creating a new StudioCMS(or StudioCMS Ecosystem package)
project using one of the available templates.

Options:
  -t, --template <template>          The template to use.
  -r, --template-ref <template-ref>  The template reference to use.
  -p, --project-name <project-name>  The name of the project.
  -i, --install                      Install dependencies.
  -g, --git                          Initialize a git repository.
  -y, --yes                          Skip all prompts and use default values.
  -n, --no                           Skip all prompts and use default values.
  -q, --skip-banners                 Skip all banners and messages.
  -d, --dry-run                      Do not perform any actions.
  -h, --help                         display help for command
  --do-not-install                   Do not install dependencies.
  --do-not-init-git                  Do not initializing a git repository.
```

--------------------------------

### Configure preferredImageService

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Sets the identifier for the preferred image service. Requires an installed service like 'cloudinary-js'.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    preferredImageService: 'cloudinary-js'
  }
})
```

--------------------------------

### Configure StudioCMS Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/database/sqld-server.mdx

Set the libSQL URL and authentication token in your project's .env file.

```sh
CMS_LIBSQL_URL=http://localhost:8080 # This should point to your docker server/local system
CMS_LIBSQL_AUTH_TOKEN= # paste your Standard JWT auth token here
```

--------------------------------

### Configure PostgreSQL environment variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/environment-variables.mdx

Define database credentials and host information for PostgreSQL connections.

```bash
CMS_PG_DATABASE=<your-database-name>
CMS_PG_USER=<your-database-user>
CMS_PG_PASSWORD=<your-database-password>
CMS_PG_HOST=<your-database-host>
CMS_PG_PORT=<your-database-port>
# CMS_PG_CONNECTION_LIMIT=<number> (optional)
```

--------------------------------

### Configure libSQL environment variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/environment-variables.mdx

Set the connection URL and optional authentication or sync parameters for libSQL databases.

```bash
CMS_LIBSQL_URL=libsql://your-database.turso.io
# CMS_LIBSQL_URL=file:./path/to/your/database.db
CMS_LIBSQL_AUTH_TOKEN=<your-auth-token> (optional)
# CMS_LIBSQL_ENCRYPTION_KEY=<string> (optional)
# CMS_LIBSQL_SYNC_INTERVAL=<number> (optional)
# CMS_LIBSQL_SYNC_URL=<string> (optional)
# CMS_LIBSQL_READ_YOUR_WRITES=true/false (optional)
# CMS_LIBSQL_OFFLINE_MODE=true/false (optional)
# CMS_LIBSQL_TLS=true/false (optional) (helps to set false when working with local sqld instances)
# CMS_LIBSQL_CONCURRENCY=<number> (optional)
```

--------------------------------

### Define Required Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-discord.mdx

Set the necessary Discord OAuth credentials and redirect URI in your environment configuration file.

```sh
CMS_DISCORD_CLIENT_ID=<your-client-id>
CMS_DISCORD_CLIENT_SECRET=<your-client-secret>
CMS_DISCORD_REDIRECT_URI=<your-redirect-uri>
```

--------------------------------

### Define Required Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-google.mdx

Set the necessary Google OAuth credentials and redirect URI in your .env file.

```sh
CMS_GOOGLE_CLIENT_ID=<your-client-id>
CMS_GOOGLE_CLIENT_SECRET=<your-client-secret>
CMS_GOOGLE_REDIRECT_URI=<your-redirect-uri>
```

--------------------------------

### Configure MySQL environment variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/environment-variables.mdx

Define database credentials and host information for MySQL connections.

```bash
CMS_MYSQL_DATABASE=<your-database-name>
CMS_MYSQL_USER=<your-database-user>
CMS_MYSQL_PASSWORD=<your-database-password>
CMS_MYSQL_HOST=<your-database-host>
CMS_MYSQL_PORT=<your-database-port>
# CMS_MYSQL_CONNECTION_LIMIT=<number> (optional)
```

--------------------------------

### Define Required Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-auth0.mdx

Set the necessary Auth0 credentials and configuration in your .env file.

```sh
CMS_AUTH0_CLIENT_ID=<your-client-id>
CMS_AUTH0_CLIENT_SECRET=<your-client-secret>
CMS_AUTH0_DOMAIN=<your-domain>
CMS_AUTH0_REDIRECT_URI=<your-redirect-uri>
```

--------------------------------

### TemplateEngine Constructor

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/template-lang.mdx

Initializes a new instance of the TemplateEngine with optional configuration.

```APIDOC
## new TemplateEngine(options?: TemplateOptions)

### Description
Creates a new instance of the TemplateEngine. You can provide optional configuration to control strict mode or default values for missing variables.

### Parameters
- **options** (TemplateOptions) - Optional - Configuration object containing `strict` (boolean) and `defaultValue` (string).
```

--------------------------------

### Create a Custom Navigation Component

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/plugins/extended.mdx

Build a navigation menu using the frontendNavigation helper to dynamically render links based on site configuration.

```astro
---
import { frontendNavigation } from 'studiocms:plugin-helpers';

// Define the props for the Navigation component
interface Props {
	topLevelLinkCount?: number;
};

// Get the top level link count from the props
const { topLevelLinkCount = 3 } = Astro.props;

// Get the site config and page list
const config = Astro.locals.siteConfig.data;

// Get the site title from the config
const { title } = config || { title: 'StudioCMS' };

// Get the main site URL
const {
	mainLinks: { baseSiteURL },
} = Astro.locals.routeMap;

// Define the link props for the navigation
type LinkProps = {
	text: string;
	href: string;
};

// Define the links for the navigation
const links: LinkProps[] = await frontendNavigation();
---
{/* If no dropdown items */}
{ ( links.length < topLevelLinkCount || links.length === topLevelLinkCount ) && (
    <div class="navigation">
        <div class="title"><a href={baseSiteURL}>{title}</a></div>
        <div class="mini-nav">
            <button>Menu</button>
            <div class="mini-nav-content">
            { 
                links.map(({ text, href }) => (
                    <a {href}>{text}</a>
                )) 
            }
            </div>
        </div>
        { 
            links.map(({ text, href }) => (
                <a class="links" {href}>{text}</a>
            )) 
        }
    </div> 
) }

{/* If dropdown items */}
{ links.length > topLevelLinkCount && (
    <div class="navigation">
        <div class="title"><a href={baseSiteURL}>{title}</a></div>

        <div class="mini-nav">
            <button>Menu</button>
            <div class="mini-nav-content">
            { 
                links.map(({ text, href }) => (
                    <a {href}>{text}</a>
                )) 
            }
            </div>
        </div>
        { 
            links.slice(0, topLevelLinkCount).map(({ text, href }) => (
                    <a class="links" {href}>{text}</a>
            ))
        }
            <div class="dropdown">
                <button>More ▼</button>
                <div class="dropdown-content">
                    { links.slice(topLevelLinkCount).map(({ text, href }) => (
                        <a {href}>{text}</a>
                    )) }
                </div>
            </div>
    </div>
) }
```

--------------------------------

### Implement Gallery Component

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/gallery.mdx

Import the Gallery component and image assets to render a collection of images.

```astro
import Gallery from '~/components/Gallery.astro'
import { mainDemoGalleryImages } from "~/assets/index.ts"

<Gallery galleryImages={mainDemoGalleryImages} />
```

--------------------------------

### Configure injectQuickActionsMenu

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Toggle the visibility of the quick actions menu on non-dashboard pages.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    injectQuickActionsMenu: true
  }
})
```

--------------------------------

### Manage database migrations

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays usage information for database migration commands.

```log
usage: studiocms migrate [options]

Manage database migrations for StudioCMS.

Options:
  -h, --help      display help for command
  --debug         Enable debug mode
  -r, --rollback  Rollback the last migration
  -l, --latest    Migrate to the latest version
  --status        Show the current migration status
```

--------------------------------

### Set Authentication Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Define the required encryption key in the .env file for StudioCMS authentication.

```bash
# encryption key for username and password authentication
CMS_ENCRYPTION_KEY="wqR+w...sRcg=="
```

--------------------------------

### Configure developerConfig

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Initializes the developer options configuration block.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    developerConfig: {}
  }
})
```

--------------------------------

### Add StudioCMS plugins

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays usage information for adding plugins to a project.

```log
usage: studiocms add <plugins...>

Adds StudioCMS plugin(s) to your project.

Arguments:
  plugins    Plugin(s) to install

Options:
  -h, --help  display help for command
```

--------------------------------

### Upgrade StudioCMS via CLI

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Executes the upgrade command using the preferred package manager.

```bash
<PackageManagers type="exec" pkg="@studiocms/upgrade" />
```

```bash
<PackageManagers type="exec" pkg="@studiocms/upgrade" args="beta" />
```

--------------------------------

### Define Required Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-github.mdx

Set the necessary GitHub OAuth credentials in your .env file.

```sh
CMS_GITHUB_CLIENT_ID=<your-client-id>
CMS_GITHUB_CLIENT_SECRET=<your-client-secret>
CMS_GITHUB_REDIRECT_URI=<your-redirect-uri>
```

--------------------------------

### Configure StudioCMS Blog

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-blog.mdx

Register the blog plugin within your studiocms.config.mjs file.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
import blog from '@studiocms/blog';

 export default defineStudioCMSConfig({
   plugins: [
     blog(/* Options */),
   ],
 });
```

--------------------------------

### Implement a Catch-all Route for Content Rendering

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/custom-frontend/rendering.mdx

Uses the StudioCMS SDK to fetch page data by slug and passes it to the StudioCMSRenderer component within an Astro layout.

```astro
---
import { StudioCMSRenderer } from 'studiocms:renderer';
import { SDKCoreJs, runSDK } from 'studiocms:sdk';
import Layout from '../layouts/Layout.astro';

let { slug } = Astro.params;

if (!slug) {
	slug = 'index';
}

const { data: page } = await runSDK(SDKCoreJs.GET.page.bySlug(slug))

if (!page) {
	return new Response(null, { status: 404 });
}

const { title, description, heroImage } = page;
---

<Layout title={title} description={description} heroImage={heroImage}>
	<main>
		<StudioCMSRenderer data={page} />
	</main>
</Layout>
```

--------------------------------

### Define StudioCMSBlogOptions Type

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-blog.mdx

Reference the configuration schema for the blog plugin, including language, head tags, and routing options.

```ts
type StudioCMSBlogOptions = {
	/**
	 * HTML Default Language - The default language for the HTML tag
	 * @default 'en'
	 */
  htmlDefaultLanguage: string | undefined;
	/**
	 * HTML Default Header - The default head configuration for the Frontend
	 */
  htmlDefaultHead: {
    /** 
     * Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. 
     */
    tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
    /** 
     * Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. 
     */
    attrs?: Record<string, string | boolean | undefined> | undefined;
    /** 
     * Content to place inside the tag (optional). 
     */
    content?: string | undefined;
  }[] | undefined;
	/**
	 * Favicon Configuration - The default favicon configuration for the Frontend
	 */
  favicon: string | undefined;
	/**
	 * Enable sitemap generation
	 * @default true
	 */
  sitemap: boolean | undefined;
	/**
	 * Inject routes
	 * @default true
	 */
  injectRoutes: boolean | undefined;
	/**
	 * The configuration for the blog
	 */
  blog: {
		/**
		 * The title of the blog
		 */
    title: string | undefined;
		/**
		 * Enable RSS feed
		 */
    enableRSS: boolean | undefined;
		/**
		 * The route for the blog
		 * @default '/blog'
		 * @example '/news'
		 */
    route: string | undefined;
  } | undefined;
}
```

--------------------------------

### Initialize TemplateEngine

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/template-lang.mdx

Constructor for creating a new instance of the TemplateEngine.

```typescript
new TemplateEngine(options?: TemplateOptions)
```

--------------------------------

### Manage crypto utilities

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/cli.mdx

Displays usage information for security-related crypto commands.

```log
usage: studiocms crypto [command]

Crypto Utilities for Security

Options:
  -h, --help  display help for command

Commands:
  gen-jwt     Generate JWT token from a keyfile
```

--------------------------------

### Configure authConfig

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Initializes the authentication configuration block within the StudioCMS configuration.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    authConfig: {}
  }
})
```

--------------------------------

### Configure Turso Environment Variables

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Set the required environment variables for Turso database connectivity in your .env file.

```bash
CMS_LIBSQL_URL=libsql://studiocms-yourname.turso.io
```

```bash
CMS_LIBSQL_AUTH_TOKEN=eyJhbGciOiJF...3ahJpTkKDw
```

--------------------------------

### Render templates with TemplateEngine

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/template-lang.mdx

Initialize the engine and use the render method to process templates with provided data objects.

```ts
import TemplateEngine from '@withstudiocms/template-lang';
const engine = new TemplateEngine();

const template = "Hello {{name}}! Welcome to {{company.name}}.";
const data = {
    name: "John Doe",
    company: {
        name: "Acme Corp"
    }
};

const result = engine.render(template, data);
console.log(result); // "Hello John Doe! Welcome to Acme Corp."
```

```ts
import TemplateEngine from '@withstudiocms/template-lang';
const engine = new TemplateEngine();

const emailTemplate = `
<!DOCTYPE html>
<html>
<head>
    <title>{{subject}}</title>
</head>
<body>
    <h1>Hello {{user.name}}!</h1>
    <p>Your order #{{order.id}} has been confirmed.</p>
    <p>Total: {{order.total}}</p>
</body>
</html>
`;

const data = {
    subject: "Order Confirmation",
    user: { name: "John Doe" },
    order: { id: "12345", total: "99.99" }
};

const html = engine.render(emailTemplate, data);
```

--------------------------------

### Use the Markdown component standalone

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/markdown-remark.mdx

Import the Markdown component directly from the package to use it without the full integration.

```astro
---
import { Markdown } from '@studiocms/markdown-remark/components';
import H1 from '../components/H1.astro';
---
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Example</title>
    </head>
    <body>
        <Markdown content={`# Hello world!`} components={{ h1: H1 }} />
    </body>
</html>
```

--------------------------------

### Configure package.json Scripts

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/start-here/getting-started.mdx

Add StudioCMS-specific commands to the project's package.json scripts for easier execution.

```json
{
    "name": "my-studiocms-project",
    "scripts": {
        "dev": "astro dev",
        "build": "astro check & astro build",
        "astro": "astro",
        "migrate": "studiocms migrate",
        "studiocms": "studiocms",
    }
}
```

--------------------------------

### Configure Web Vitals in studiocms.config.mjs

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/upgrade/version-guides/0-1-0-beta-31.mdx

Enable built-in web vitals tracking by adding the feature flag to your configuration file.

```ts
export default defineStudioCMSConfig({
  features: {
    webVitals: true,
  },
});
```

--------------------------------

### Initialize Dashboard Configuration

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Initializes the dashboard configuration object within the StudioCMS config.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    dashboardConfig: {}
  }
})
```

--------------------------------

### Import StudioCMS custom Effect utilities

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/effect.mdx

Access specialized logging and execution utilities provided by the StudioCMS Effect package.

```ts
import { runEffect, genLogger, pipeLogger, runtimeLogger } from 'studiocms/effect';
```

--------------------------------

### Configure Docker Compose for libSQL

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/database/sqld-server.mdx

Define the libSQL server service in docker-compose.yml using either a public key file or a JWT token for authentication.

```yml
services:
  libsql:
    image: ghcr.io/tursodatabase/libsql-server:latest
    platform: linux/amd64
    ports:
      - "8080:8080"
      - "5001:5001"
    environment:
      - SQLD_NODE=primary
      - SQLD_AUTH_JWT_KEY_FILE=/home/.ssh/libsql.pub
    volumes:
      - ./data/libsql:/var/lib/sqld
      - ./keys/libsql.pub:/home/.ssh/libsql.pub
```

```yml
services:
  libsql:
    image: ghcr.io/tursodatabase/libsql-server:latest
    platform: linux/amd64
    ports:
      - "8080:8080"
      - "5001:5001"
    environment:
      - SQLD_NODE=primary
      - SQLD_AUTH_JWT_KEY=paste your Base64URL Encoded JWT token here
    volumes:
      - ./data/libsql:/var/lib/sqld
```

--------------------------------

### Configure a Storage Manager

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/storage-api/index.mdx

Add a storage manager plugin to the storageManager property in the StudioCMS configuration file.

```ts
import { defineStudioCMSConfig } from "studiocms/config";
import s3Storage from '@studiocms/s3-storage';

export default defineStudioCMSConfig({
    storageManager: s3Storage(),
    // other configuration options
})
```

--------------------------------

### setOptions(options)

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/template-lang.mdx

Updates the configuration options for the engine instance.

```APIDOC
## setOptions(options: Partial<TemplateOptions>): void

### Description
Updates the engine's configuration settings dynamically.

### Parameters
- **options** (Partial<TemplateOptions>) - Required - The partial options object to update.
```

--------------------------------

### Configure buildkit scripts in package.json

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/buildkit.mdx

Add build and dev scripts to your package.json to utilize the buildkit CLI for processing project files.

```json
{
  "scripts": {
    "build": "buildkit build 'src/**/*.{ts,astro,css}'",
    "dev": "buildkit dev 'src/**/*.{ts,astro,css}'"
  }
}
```

--------------------------------

### Enable API documentation

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Toggles the availability of the API Docs route, which provides an OpenAPI specification.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    api: {
      apiDocs: true
    }
  }
})
```

--------------------------------

### Configure Plugins

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/index.mdx

Registers an array of plugins to extend StudioCMS functionality.

```ts
import blog from '@studiocms/blog';
export default defineStudioCMSConfig({
  plugins: [
    blog(),
  ],
})
```

--------------------------------

### Configure Security Settings

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/config-reference/features.mdx

Initializes the security configuration object for the dashboard.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
// ---cut---
export default defineStudioCMSConfig({
  features: {
    dashboardConfig: {
      security: {}
    }
  }
})
```

--------------------------------

### Implement a No-Op Storage Service

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/storage-api/index.mdx

This class implements the StorageApiBuilderDefinition interface to provide placeholder storage functionality that returns a 501 Not Implemented response.

```ts
import type {
	AuthorizationType,
	ContextDriverDefinition,
	StorageAPIEndpointFn,
	StorageApiBuilderDefinition,
	UrlMappingServiceDefinition,
} from 'studiocms/storage-manager/definitions';

/**
 * A No-Op Storage Service that implements the StorageApiBuilderDefinition interface.
 *
 * This service provides placeholder implementations for storage API endpoints,
 * returning a 501 Not Implemented response for both POST and PUT requests.
 *
 * @typeParam C - The context type.
 * @typeParam R - The response type.
 */
export default class NoOpStorageService<C, R> implements 
  StorageApiBuilderDefinition<C, R> {
    driver: ContextDriverDefinition<C, R>;
    urlMappingService: UrlMappingServiceDefinition;

    constructor(
      driver: ContextDriverDefinition<C, R>,
      urlMappingService: UrlMappingServiceDefinition
    ) {
      this.driver = driver;
      this.urlMappingService = urlMappingService;
    }

    #sharedResponse() {
      return { data: { error: 'noStorageConfigured' }, status: 501 };
    }

    getPOST(_?: AuthorizationType): StorageAPIEndpointFn<C, R> {
      return this.driver.handleEndpoint(async () => this.#sharedResponse());
    }

    getPUT(_?: AuthorizationType): StorageAPIEndpointFn<C, R> {
      return this.driver.handleEndpoint(async () => this.#sharedResponse());
    }
}
```

--------------------------------

### Perform storage actions via POST

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/storage-api/api-endpoint.mdx

Execute various storage management actions by sending a JSON payload to the POST endpoint.

```http
POST /studiocms_api/storage/manager HTTP/1.1
Host: example.com
Content-Type: application/json
Accept: application/json

{
  "action": "resolveUrl | publicUrl | upload | list | delete | rename | download | cleanup | mappings | test",
  ...additional parameters based on action...
}
```

--------------------------------

### Import StudioCMS Effect tools

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/how-it-works/effect.mdx

Use this import to access base Effect exports along with additional utilities provided by StudioCMS.

```ts
import { Effect, Context, Schema, Data } from 'studiocms/effect';
```

--------------------------------

### Configure StudioCMS for MarkDoc

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-markdoc.mdx

Register the markdoc plugin within the StudioCMS configuration file.

```ts
import { defineStudioCMSConfig } from 'studiocms/config';
import markdoc from '@studiocms/markdoc';

 export default defineStudioCMSConfig({
   plugins: [
     markdoc(),
   ],
 });
```

--------------------------------

### Configure astro.config.mts

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/cfetch.mdx

Register the cFetch integration in your Astro configuration file.

```typescript
import { defineConfig } from 'astro/config';
import cFetch from "@studiocms/cfetch";

export default defineConfig({
  integrations: [
    cFetch(),
  ],
});
```

--------------------------------

### Render Markdown in Astro

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/ecosystem/packages/markdown-remark.mdx

Import the render utility to process markdown content and inject the resulting HTML into an Astro component.

```astro
---
import { render } from '../utils/render';

const content = `# Hello world!`

const { html } = await render(content)
---
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Example</title>
    </head>
    <body>
        {html}
    </body>
</html>
```

--------------------------------

### Migrate site configuration and language locals

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/guides/upgrade/version-guides/0-1-0-beta-26.mdx

Update access to site configuration and default language from the top-level locals to the StudioCMS object.

```ts
const { siteConfig, defaultLang } = Astro.locals;
```

```ts
const { siteConfig, defaultLang } = Astro.locals.StudioCMS;
```

--------------------------------

### Set devApps integration options

Source: https://github.com/withstudiocms/docs/blob/main/src/content/docs/en/package-catalog/studiocms-plugins/studiocms-devapps.mdx

Define optional configuration settings for the devApps integration.

```ts
import devApps from '@studiocms/devapps';
devApps({
// ---cut---
endpoint: '_studiocms-devapps',
verbose: false,
appsConfig: {
  wpImporter: true,
},
// ---cut-after---
})
```