### API Request to Start a Backup Job

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

This is an example of a POST request to the /run/:cmd endpoint to initiate a long-running backup process.

```json
POST /plugin/raclette/plugin-cli-connector/run/backup-database
{
  "args": ["full", "production"]
}
```

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

### Create Example Service

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/snippets/wrappers/backendIndexDatatypeWrapper.md

Creates an example service instance using the initialized models.

```typescript
const exampleService = createExampleService(models.example)
```

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

### Example AI Prompt for Plugin Development

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/coding-with-ai/introduction.md

This prompt guides an AI to act as an expert Vue3 and racletteJS developer, utilizing a plugin boilerplate and Context7 documentation to build a new plugin. It specifies file structure, API call placement, and i18n key location.

```text
You are an expert vue3 and racletteJS developer with modern es6 approaches and vue3 best practices in mind:
I want to build a racletteJS plugin that [describes your feature].

I'm using the plugin boilerplate from
https://gitlab.com/raclettejs/core-dev/-/tree/main/@raclettejs/playground/plugins/raclette__boilerplate?ref_type=heads

Please reference the racletteJS documentation at
https://context7.com/gitlab_raclettejs/docs

Plese rewrite the backend files to fit the naming, model and schema structure discussed earlier. Locate all i18n keys in the index.ts of the frontend directory. Make sure that all $store and $data pluginApi calls stay in the *Widget.vue file. Provide all necessary contents to the respective child components.
```

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

### Refresh Lockfile and Install Dependencies

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/core-monorepo-for-maintainers.md

Use this command to refresh the lockfile and perform nested installs, similar to `:install`.

```bash
yarn :install:refresh-lockfile
```

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

### Create Example Payload

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/plugin/helpers/pluginHelper.md

Asynchronously creates a payload for 'example' type using the fastify instance. Requires plugin instance, an array of example items, and frontend request data.

```typescript
import {
  FrontendPayloadRequestData,
  PluginFastifyInstance,
} from "@raclettejs/core"
import { example } from "../example.schema"

export const createexamplePayload = async (
  fastify: PluginFastifyInstance,
  items: example[],
  requestData: FrontendPayloadRequestData,
) => {
  const res = await fastify.createPayload("example", items, requestData)
  return res
}
```

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

### Install Core Monorepo Dependencies

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/core-monorepo-for-maintainers.md

Run these commands sequentially to install all necessary dependencies for the monorepo. `yarn install` is required before `yarn :install`.

```bash
yarn install
yarn :install
yarn :build # optional for day-to-day dev; required before releases / :release:prepare
```

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

### Complete raclette.plugin.ts Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/metadata.md

A comprehensive example demonstrating the structure and usage of all metadata fields, options, and lifecycle hooks within a `raclette.plugin.ts` file.

```javascript
export default {
  name: "advanced-canvas",
  author: "Canvas Team",
  version: "1.2.0",
  description:
    "Advanced canvas plugin with collaborative features and real-time synchronization",
  repository: "https://github.com/canvas-team/advanced-canvas",
  license: "MIT",

  // Plugin dependencies
  dependencies: ["websocket-manager", "user-authentication"],

  // Plugin configuration
  options: {
    maxCanvasSize: { width: 5000, height: 5000 },
    enableRealTimeSync: true,
    defaultZoomLevel: 1.0,
    supportedFormats: ["png", "jpg", "svg"],
    collaboration: {
      maxUsers: 50,
      cursorsVisible: true,
      enableChat: true,
    },
  },

  // Lifecycle hooks
  hooks: {
    beforeMount: async (app) => {
      console.log("Setting up canvas environment...")

      // Initialize canvas utilities
      await initializeCanvasUtils()

      // Setup global styles
      injectCanvasStyles()
    },

    mounted: async (app) => {
      console.log("Canvas plugin mounted successfully")

      // Register global canvas components
      app.component("GlobalCanvas", CanvasComponent)

      // Start background services
      startCanvasServices()
    },

    beforeUnmount: async (app) => {
      console.log("Cleaning up canvas resources...")

      // Stop background services
      stopCanvasServices()

      // Clear canvas cache
      clearCanvasCache()
    },
  },
}
```

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

### Start Local Development Environment

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/cli-commands.md

Starts the local development environment using Docker Compose. Use the --filter option to specify services.

```bash
yarn dev --filter frontend
```

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

### $data.example.getAll

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/dataApi.md

Fetches all items from the example model with optional parameters and execution options.

```APIDOC
## GET $data.example.getAll

### Description
Fetches all items from the example model. This method is part of the Data Access & Mutation API and integrates with the backend, store, and caching layer.

### Method
GET

### Endpoint
$data.example.getAll

### Parameters
#### Query Parameters
- **params** (object) - Optional - The object you want to send to the backend.
- **id** (boolean) - Optional - If set, this will be used instead of the query instance nanoId.
- **options** (object) - Optional - Configuration for the request.
  - **immediate** (boolean) - If true, the action will be executed right away, defaults to false.
  - **cb** (function) - A function which will get called after the action is resolved. Receives the result object.
  - **notify** (boolean) - If false, will not write into the notification queue and snackbar, defaults to true.
  - **responseType** (string) - Only used if you want to explicitly receive an HTTP stream. Set to 'stream' in that case, defaults to 'json'.
  - **mode** (string) - If responseType is stream, you can set mode 'cors' here.
  - **useCache** (boolean) - If false, will bypass the global query cache. Defaults to true.
  - **useStore** (boolean) - If false, will not write the data to the redux store. Defaults to true.

### Request Example
```json
{
  "params": {},
  "id": false,
  "options": {
    "immediate": false,
    "cb": (result) => {},
    "notify": true,
    "responseType": "json",
    "mode": "none",
    "useCache": true,
    "useStore": true
  },
  "config": {}
}
```

### Response
#### Success Response (200)
- **data** - The result object.
- **dataArr** - The resultArray.
- **response** - The response from the server.
- **query** - The query object (only in reading queries).
- **execute** - An awaitable function to trigger the action call. The response and result returned from this function are not reactive! Use dataArr or data.
- **isLoading** - A boolean indicator for the loading/fetch state.
- **error** - Contains the error object if errors are caught.

#### Response Example
```json
{
  "data": {},
  "dataArr": [],
  "response": {},
  "query": {},
  "isLoading": false,
  "error": null
}
```
```

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

### Register Example Schemas

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/snippets/wrappers/backendIndexMinimalWrapper.md

Registers example schemas for the Fastify instance.

```typescript
registerExampleSchemas(fastify)
```

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

### Real-world Example with $data, $socket, and $eventbus

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/dataApi.md

A comprehensive example showcasing the integration of $data for initial fetch and mutations, $socket for real-time event handling, and $eventbus for UI notifications. It includes auto-fetching, refetching after mutations, and displaying snackbar messages.

```typescript
const { $data, $socket, $eventbus } = usePluginApi()

const { data, execute } = $data.todo.getAll({
  params: { isDeleted: false },
  options: { immediate: true },
})

const { execute: createTodo } = $data.todo.create({
  options: { cb: () => execute() },
})

$socket.on("todoDeleted", () => {
  $eventbus.global.emit("ui/addToSnackbar", {
    message: "Todo deleted",
    color: "yellow",
  })

  execute()
})
```

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

### Install CLI Connector Plugin

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Install the CLI Connector plugin using yarn. This is the first step to integrating command-line tools.

```bash
yarn add @raclettejs/plugin-cli-connector
```

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

### Register Example Service

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/snippets/wrappers/backendIndexDatatypeWrapper.md

Registers the created example service onto the Fastify instance's custom properties.

```typescript
fastify.custom.exampleService = exampleService
```

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

### Accessing Plugin API in Vue `setup()`

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/frontend/how-to/use-plugin-api.md

Call `usePluginApi()` inside your Vue component's `setup()` function to get access to the plugin's runtime API. This is the standard method for interacting with your plugin's core functionalities.

```typescript
const { $data, $store, $i18n, $socket, $log, $user } = usePluginApi()
```

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

### Troubleshooting Workbench Container Startup

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/README.md

If workbench containers do not start properly due to timing or network issues, run yarn :down followed by yarn :dev again. This issue is typically resolved after the initial build and image setup.

```sh
yarn :down
yarn :dev
```

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

### getAll Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/frontend/api/data.md

Demonstrates how to use the `getAll` method from the `$data.example` API to fetch data. It includes details on parameters, options, and returned values.

```APIDOC
## getAll

### Description
Fetches data using the `getAll` method. This method can be configured with various options to control its behavior, such as immediate execution, callback functions, caching, and response types.

### Method
`$data.example.getAll(config)`

### Parameters
#### Params
- **params** (object) - Required - The object you want to send to the backend.
- **id** (boolean) - Optional - If set, this will be used instead of the query instance nanoId.
- **options** (object) - Optional - Configuration options for the data fetch.
  - **immediate** (boolean) - Optional - If true, the action will be executed right away, defaults to false.
  - **cb** (function) - Optional - A function which will get called after the action is resolved. Receives the result object.
  - **useStore** (boolean) - Optional - If false, will not write the data to the redux store. Defaults to true.
  - **useCache** (boolean) - Optional - If false, will bypass the global query cache. Defaults to true.
  - **notify** (boolean) - Optional - If false, will not write into the notification queue and snackbar. Defaults to true.
  - **responseType** (string) - Optional - Set to 'stream' if you want to explicitly receive an HTTP stream, defaults to 'json'.
  - **mode** (string) - Optional - If responseType is 'stream', you can set mode to 'cors'.
- **config** (object) - Optional - Additional configuration object.

### Returns
- **data** - The result object.
- **dataArr** - The result array.
- **response** - The response from the server.
- **query** - The query object (only in reading queries).
- **execute** - An awaitable function to trigger the action call. The response and result returned from this function are not reactive! Use dataArr or data.
- **isLoading** - A boolean indicator for the loading/fetch state.
- **error** - Contains the error object if errors are caught.

### Request Example
```typescript
const { $data } = usePluginApi()
const {data, dataArr, response, query, execute, isLoading, error } = $data.example.getAll({
  params: { key: "value" },
  id: false,
  options: {
    immediate: false,
    cb: (result) => { console.log(result) },
    notify: true,
    responseType: "json",
    mode: "cors",
    useCache: true,
    useStore: true,
  },
  config: {}
})
```

### Response Example
```json
{
  "data": {},
  "dataArr": [],
  "response": {},
  "query": {},
  "isLoading": false,
  "error": null
}
```
```

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

### DataExporter Quick Start

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/exporterUsage.md

Basic setup for the DataExporter component within a Vue template. Ensure 'item-value' is correctly set to a unique key for proper row mapping.

```vue
<template>
  

```

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

### Install ESLint Dependencies

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/directory-structure/eslint-config.md

Install the necessary development dependencies for ESLint, including support for Prettier, Vue, and TypeScript.

```bash
yarn add -D @eslint/js eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prefer-arrow-functions eslint-plugin-prettier eslint-plugin-vue globals prettier typescript-eslint vue-eslint-parser
```

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

### Fetch All Example Data

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/frontend/api/data.md

Demonstrates how to use the $data.example.getAll method to fetch data. It shows how to configure immediate execution, callbacks, response types, and caching.

```typescript
const { $data, [...] } = usePluginApi()
const {data, dataArr, response, query, execute, isLoading, error } = $data.example.getAll({
  params: {},
  id: false,
  options: {
    immediate: false,
    cb: (result) => {},
    notify: true | false,
    responseType: "json" | "stream",
    mode: "none" | "cors",
    useCache: true | false,
    useStore: true | false,
  },
  config: {}
})
```

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

### Install racletteJS CLI

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/cli-commands.md

Run raclette CLI commands using yarn after installation and configuration.

```bash
yarn <command>
```

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

### Backend Todo Plugin Setup

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/recipes/settingUpATodoPlugin.md

Registers models, services, routes, and helpers for the Todo plugin on the backend.

```typescript
import type { PluginOptions, PluginFastifyInstance } from "@raclettejs/core"
import { createModels } from "./todo.model"
import { registerRoutes } from "./routes"
import { registerPayload } from "./helpers/todoHelper"
import { registerTodoSchemas } from "./todo.schema"
import { registerTodoCrud } from "./helpers/crud"
import { createTodoService } from "./todo.service"

const todoPlugin = async (
  fastify: PluginFastifyInstance,
  _opts: PluginOptions,
) => {
  /*
   * ---------------------------------------------------------------------*
   * CREATE AND REGISTER ALL YOUR MODELS
   * ---------------------------------------------------------------------*
   */
  const models = createModels(fastify)

  const todoService = createTodoService(models.todo)

  fastify.custom.todoService = todoService

  /*
   * ---------------------------------------------------------------------*
   * REGISTER ALL YOUR ROUTES
   * ---------------------------------------------------------------------*
   */

  try {
    await fastify.register((instance) => registerRoutes(instance))
  } catch (error) {
    fastify.log.error(`Failed to register routes.`, error)
    throw error // Let the application handle the error
  }
  registerPayload(fastify)
  registerTodoSchemas(fastify)
  registerTodoCrud(fastify)

  // registerForFrontendGeneration({}) is invoked by the plugin loader by default.
  // Call it explicitly only for entityMapping / customConfig, or pass false to opt out.
}
export default todoPlugin

```

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

### Start Local RacletteJS Application

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/how-raclette-works.md

The primary command to initiate the development server and prepare the runtime environment. This command generates the `.raclette` directory, starts Docker containers, and attaches to service logs.

```bash
yarn dev
```

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

### Example Query Action ID

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/storeApi.md

Provides a concrete example of a generated query action ID, showing its structure and components.

```plaintext
plugin-pacifico__example-todo-116-todo-getAll-sD9o
```

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

### Clone and Install Raclette Monorepo

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/README.md

Clone the repository, set up Yarn, and install dependencies. It's recommended to update Git index for package.json and .yarnrc.yml to avoid conflicts.

```sh
git clone git@gitlab.com:raclettejs/core-dev.git
cd core-dev
npm install --global yarn # if you don't have it yet globally
git update-index --assume-unchanged package.json .yarnrc.yml    # avoid hassle with yarn magick 
yarn set version stable   # set yarn version for project, does some installations and .yarnrc.yml editing
yarn install              # @raclettejs/* workspaces (root lockfile)
yarn :install             # other deps: core services, create-raclette-app, @docs
yarn :build               # optional before release; not required for :dev
yarn :dev                 # start playground dev stack; may need to be done twice
yarn :down                # stop dev server, delete containers, recommended to do before each yarn :dev
```

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

### Example Plugin Directory Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/directory-structure/plugins.md

Illustrates the expected file and folder organization for a Raclette plugin, including main configuration, frontend components, and backend logic.

```bash
exampleCreator__examplePlugin/
├── raclette.plugin.ts            # Main plugin configuration 
├── frontend/                     # Frontend-side code (if frontendDir specified)
│   ├── [...]                     # See plugin metadata for more
│   └── widgets/
│       ├── Example/           # Your custom Widget folder name 
│       │   ├── ExampleWidget.vue    # The widget File. Needs to follow this structure "[CustomName]Widget.vue"
│       │   ├── setup.ts          # Contains details and config for the widget
│       │   └── [...] 
│       └── [...] 
└── backend/                      # Server-side code (if backendDir specified)
    ├── index.ts                  # Server entry point
    ├── example.model.ts     # The model for your dataType. Currently mongoose
    ├── example.schema.ts    # The schema for your dataType. Fastify schema, validations etc
    ├── example.service.ts   # The services for your dataType ie the actuall backend business logic         
    ├── routes/                   # API routes
    └── helpers/                  # Business logic helpers and utils
```

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

### getAll Operation

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/frontend/plugin/routeDeclaration.md

Retrieves data from the example plugin. This operation can be used for various data store actions like reading, updating, creating, deleting, or restoring data.

```APIDOC
## GET /example-plugin/getAll

### Description
Retrieves data using the specified HTTP method and interprets the response based on the store action type.

### Method
GET

### Endpoint
/example-plugin/getAll

### Parameters
#### Query Parameters
- **target** (string) - Required - The target URI.
- **method** (string) - Required - The HTTP method to use (e.g., GET, POST, PUT, DELETE, PATCH).
- **storeActionType** (string) - Required - Determines how a response from this endpoint is interpreted by the store. Possible values: "dataRead", "dataUpdate", "dataCreate", "dataDelete", "dataHardDelete", "dataMove", "dataRestore".

### Request Example
```json
{
  "target": "/example-plugin/getAll",
  "method": "get",
  "storeActionType": "dataRead"
}
```

### Response
#### Success Response (200)
- **data** (any) - The data returned from the operation.

#### Response Example
```json
{
  "data": [
    {
      "id": 1,
      "name": "Example Item"
    }
  ]
}
```
```

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

### POST Route Handler Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/backend.md

Handles the creation of a new todo item. It includes authentication, schema validation, and service interaction for creating the todo.

```typescript
import type { TodoCreate } from "../todo.schema"
import type { FastifyReply, FastifyRequest } from "fastify"
import { todoCreateSchema } from "../todo.schema"
import type { PluginFastifyInstance } from "@raclettejs/types"

export default (fastify: PluginFastifyInstance) => {
  const handler = async (
    req: FastifyRequest<{ Body: TodoCreate }>, 
    reply: FastifyReply,
  ) => {
    try {
      const todoData = {
        ...req.body,
        owner: req.user._id,
        lastEditor: req.user._id,
      }

      const payload = await fastify.todoService.createTodo(
        fastify,
        req.requestParams,
        todoData,
      )

      return reply.status(201).send(payload)
    } catch (err: any) {
      fastify.log.error(`Error creating todo: ${err.message}`)
      return reply.internalServerError(err.message)
    }
  }

  return {
    handler,
    onRequest: [fastify.authenticate],
    config: {
      type: "dataCreate",
    },
    schema: {
      summary: "Create a new todo",
      description: "Create a new todo",
      tags: ["core/todo"],
      body: todoCreateSchema,
    },
  }
}
```

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

### Start MongoDB Service with Docker Compose

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/mongo-migration.md

Build and start the MongoDB service using Docker Compose after updating the image tag. Ensure you use the correct service name if it differs from 'mongodb'.

```bash
$ docker compose up -d --build mongodb
```

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

### API Request to List Files

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

This is an example of a POST request to the /script/:cmd endpoint to execute a command and list files in a specified directory.

```json
POST /plugin/raclette/plugin-cli-connector/script/list-files
{
  "args": ["/home/user"]
}
```

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

### API Call for Database Backup Script

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Example API call to the '/run/db-backup' endpoint to initiate a database backup for a specific table.

```json
POST /run/db-backup
{
  "args": ["users"]
}
```

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

### Example Fully Controlled Query ID

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

An example of the final query ID generated when both actionId and id are specified.

```plaintext
plugin-pacifico__example-todo-todoList-archive
```

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

### Optional Plugin Dependencies

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/metadata.md

Lists other plugins or packages that must be installed before this plugin can function correctly.

```javascript
dependencies: ["core-ui", "data-manager"]
```

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

### Frontend Plugin Setup with i18n

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/recipes/settingUpATodoPlugin.md

Defines the frontend part of the Todo plugin, enabling internationalization (i18n) support.

```typescript
import { defineRaclettePluginFrontend } from "@raclettejs/core/frontend"

export default defineRaclettePluginFrontend({
  i18n: {
    de: {
      someText: "Etwas Text",
    },
    en: {
      someText: "Some Text",
    },
  },
})

```

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

### Example Plugin Directory Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/bestPractices/pluginStructure.md

Illustrates the recommended file and folder organization for a typical racletteJS plugin, including main configuration, frontend widgets, and backend services.

```tree
exampleCreator__examplePlugin/
├── raclette.plugin.ts            # Main plugin configuration 
├── frontend/                     # Frontend-side code (if frontendDir specified)
│   ├── [...]                     # See plugin metadata for more
│   └── widgets/                  # Plugin widgets
│       ├── Example/           # Your custom Widget folder name 
│       │   ├── ExampleWidget.vue    # The widget File. Needs to follow this structure "[CustomName]Widget.vue"
│       │   ├── setup.ts          # Contains details and config for the widget
│       │   └── [...] 
│       └── [...] 
└── backend/                      # Server-side code (if backendDir specified)
    ├── index.ts                  # Server entry point
    ├── example.model.ts     # The model for your dataType. Currently mongoose
    ├── example.schema.ts    # The schema for your dataType. Fastify schema, validations etc
    ├── example.service.ts   # The services for your dataType ie the actuall backend business logic         
    ├── routes/                   # API routes
    └── helpers/                  # Business logic helpers and utils
```

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

### Define Base Example Schema

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/plugin/schema.md

Defines common fields for all example operations, including name, content, tags, owner, last editor, and deletion status. Uses TypeBox for schema definition.

```typescript
import type { Static } from "@sinclair/typebox"
import type { Document } from "mongoose"
import { Type } from "@sinclair/typebox"
import { PluginFastifyInstance } from "@raclettejs/core"

/**
 * Base Example Schema - Fields common to all operations
 */
const baseExampleSchema = {
  name: Type.String(),
  content: Type.Optional(Type.String()),
  tags: Type.Optional(Type.Array(Type.String(), { default: [] })),
  owner: Type.String(),
  lastEditor: Type.Optional(Type.String()),
  isDeleted: Type.Optional(Type.Boolean({ default: false })),
}

/**
 * Full Example Schema - Used for response serialization and database model
 */
export const exampleSchema = Type.Object(
  {
    _id: Type.String(),
    ...baseExampleSchema,
    createdAt: Type.String({ format: "date-time" }),
    updatedAt: Type.String({ format: "date-time" }),
  },
  {
    $id: "#example/base",
    title: "core/example",
  },
)

/**
 * Example Create Schema - For POST operations
 */
export const exampleCreateSchema = Type.Object(
  {
    _id: Type.Optional(Type.String()),
    ...baseExampleSchema,
  },
  {
    $id: "#example/create",
    title: "core/example-create",
  },
)

/**
 * Example Update Schema - For PATCH operations
 */
export const exampleUpdateSchema = Type.Object(
  {
    name: Type.Optional(Type.String()),
    tags: Type.Optional(Type.Array(Type.String())),
    lastEditor: Type.Optional(Type.String()),
    isDeleted: Type.Optional(Type.Boolean()),
  },
  {
    $id: "#example/update",
    title: "core/example-update",
  },
)

/**
 * Type Utilities
 */

type DateTimeFields = {
  createdAt: Date
  updatedAt: Date
}

type RawExample = Static<typeof exampleSchema>
export type Example = Omit<RawExample, keyof DateTimeFields> & DateTimeFields

type RawExampleCreate = Static<typeof exampleCreateSchema>
export type ExampleCreate = RawExampleCreate

type RawExampleUpdate = Static<typeof exampleUpdateSchema>
export type ExampleUpdate = RawExampleUpdate

export interface ExampleDoc
  extends Document<string, unknown, Example>, Example {
  _id: string
}
export type AnyExample = Example | ExampleDoc

/**
 * Register Schema/Type Generation for Shared Folder
 */
export const registerExampleSchemas = (fastify: PluginFastifyInstance) => {
  fastify.registerSchema({
    schema: exampleSchema,
    name: "Example",
  })

  fastify.registerSchema({
    schema: exampleCreateSchema,
    name: "ExampleCreate",
  })

  fastify.registerSchema({
    schema: exampleUpdateSchema,
    name: "ExampleUpdate",
  })
}

```

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

### Registering Routes, Payload Handlers, and Schemas in a Plugin

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/golden-path/backend/overview.md

This example demonstrates how to register routes, payload handlers, and example schemas within a RacletteJS backend plugin. It shows the typical structure for a plugin's main entry point.

```typescript
import type {
  PluginFastifyInstance,
  PluginOptions,
} from "@raclettejs/core/backend"
import { registerRoutes } from "./routes"
import { registerPayload } from "./helpers/payload"
import { registerExampleSchemas } from "./example.schema"

const examplePlugin = async (
  fastify: PluginFastifyInstance,
  _opts: PluginOptions,
) => {
  await fastify.register((instance) => registerRoutes(instance))

  registerPayload(fastify)

  registerExampleSchemas(fastify)
}

export default examplePlugin

```

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

### Plugin Lifecycle Hook: beforeMount

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/metadata.md

Executes asynchronous tasks before the plugin is integrated into the application. Useful for pre-mount setup.

```javascript
hooks: {
  beforeMount: async (app) => {
    console.log("Plugin is about to be mounted")
    // Perform pre-mount setup
  }
}
```

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

### API Call for File Listing Script

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Example API call to the '/script/safe-ls' endpoint with arguments to list files.

```json
POST /script/safe-ls
{
  "args": ["documents"]
}
```

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

### Generated Commands for Service Control

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

These examples show the generated commands for the 'service-control' script when called with different arguments for restarting and checking service status.

```bash
# When called with args: ["restart", "nginx"]
/usr/bin/systemctl restart nginx

# When called with args: ["status", "mysql"]
/usr/bin/systemctl status mysql
```

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

### Reactivity Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/storeApi.md

Demonstrates how changes made via mutations automatically update reactive state references obtained through getters.

```typescript
const uiState = $store.getUiState()

$store.setUiState({ navigationOpen: true })

// uiState.value.navigationOpen updates automatically
```

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

### Core Getter Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/storeApi.md

Demonstrates the fundamental usage of the $store.get method for accessing nested state dynamically and reactively.

```typescript
const state = $store.get(["queries", actionId])
```

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

### ExampleService Class Definition

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/plugin/service.md

Defines the ExampleService class, which handles business logic related to examples. It requires a Mongoose model for data operations.

```typescript
import type { Example, Example as ExampleType } from "./example.schema"
import type { QueryOptions } from "@_/types/service"
import { v4 as uuidv4, validate } from "uuid"
import { createTodoPayload } from "./helpers/exampleHelper"
import type {
  PluginFastifyInstance,
  FrontendPayload,
  FrontendPayloadRequestData,
} from "@raclettejs/core/types"
import { Model } from "mongoose"

export class ExampleService {
  private exampleModel: Model<Todo>

  constructor(model: Model<Example>) {
    this.exampleModel = model
  }
  // [...] 
  /* YOUR BUSINESS LOGIC */
  // [...] 
}
```

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

### Stable Query ID Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

Demonstrates how to create stable query identifiers for predictable store entries and easier debugging.

```typescript
const { $data } = usePluginApi({
  actionId: "todoList",
})

$data.todo.getAll({
  id: "main",
})
```

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

### Enable Raclette ESLint Configuration

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/directory-structure/eslint-config.md

Create an `eslint.config.mjs` file in your project root to activate Raclette's ESLint setup. This wraps your custom rules with Raclette's defaults.

```javascript
// eslint.config.mjs
import { withRaclette } from "./.raclette/eslint.config.mjs"

export default withRaclette({
  // Custom rules or overrides
  rules: {
    "no-console": "off",
  },
})
```

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

### Fully Controlled Query ID Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

Demonstrates how to achieve a fully controlled query ID by combining actionId with the id parameter in a $data call.

```typescript
const { $data } = usePluginApi({
  actionId: "todoList",
})

$data.todo.getAll({
  params: { isDeleted: true },
  id: "archive",
})
```

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

### Initialize CLI Commands with Fastify

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Set up the Fastify instance and register CLI commands using 'registerScriptByConfig'. This function should be called during application startup.

```typescript
import type { PluginFastifyInstance } from "@raclettejs/core"
import {
  registerScriptByConfig,
  setupFastify,
} from "@raclettejs/plugin-cli-connector"

export const initializeCliCommands = (fastify: PluginFastifyInstance) => {
  // Initialize the plugin with the Fastify instance
  setupFastify(fastify)

  // Register your CLI commands here
  try {
    registerScriptByConfig("system-info", {
      exe: "/usr/bin/uname",
      args: ["-a"],
    })

    fastify.log.info("CLI commands registered successfully")
  } catch (error) {
    fastify.log.error("Failed to register CLI commands:", error)
    throw error
  }
}
```

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

### Readable Debugging Identifier Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

An example of a readable and meaningful query identifier for improved debugging.

```plaintext
plugin-myPlugin-todoList-main
```

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

### Example Default Query ID

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

An example of a default query ID generated for the raclette__core plugin.

```plaintext
plugin-raclette__core-116-tag-getAll-U5Rs
```

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

### Plugin Entry Point (index.ts)

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/backend.md

The main plugin file orchestrates components, registers database models, initializes the service layer, and registers routes with error handling.

```typescript
import type { PluginOptions, PluginFastifyInstance } from "@_/types/plugins"
import { createModels } from "./todo.model"
import { registerRoutes } from "./routes"
import { registerPayload } from "./helpers/todoHelper"
import { registerTodoSchemas } from "./todo.schema"
import { registerTodoCrud } from "./helpers/crud"
import { createTodoService } from "./todo.service"

const todoPlugin = async (
  fastify: PluginFastifyInstance,
  opts: PluginOptions,
) => {
  // Create and register database models
  const models = createModels(fastify)

  // Initialize service layer
  const todoService = createTodoService(models.todo)
  fastify.todoService = todoService

  // Register routes with error handling
  try {
    await fastify.register((instance) => registerRoutes(instance, models, opts))
  } catch (error) {
    fastify.log.error(`Failed to register routes.`, error)
    throw error
  }

  // Register additional components
  registerPayload(fastify)
  registerTodoSchemas(fastify)
  registerTodoCrud(fastify)
}

export default todoPlugin
```

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

### Registering a Single GET Route

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/plugin/singleRoute.md

This snippet shows how to define and register a GET route with authentication, custom configuration, and a schema using RacletteJS and Fastify.

```typescript
import type { PluginFastifyInstance } from "@raclettejs/core"
import type { FastifyRequest, FastifyReply } from "fastify"
import payloadHelper from "./payloadHelper"

export const registerRoutes = async (fastify: PluginFastifyInstance) => {
  fastify.get("/example/get", {
    handler: async (req: FastifyRequest, reply: FastifyReply) => {
      /* YOUR BUSINESS LOGIC */
    },
    onRequest: [fastify.authenticate],
    config: {
      type: dataUpdate,
      broadcastChannels: ["exampleUpdated"],
    },
    schema: {
      summary: "Example example get Route",
      description: "Example example get Route",
      tags: ["myApp/example"],
      body: exampleBaseSchema,
    },
  })
}
```

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

### Create a new racletteJS app with npm

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/getting-started.md

Use this command to quickly scaffold a new racletteJS project with default configurations and plugins.

```sh
npx create-raclette-app
```

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

### Start Long-Running Process

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Starts a long-running command-line process asynchronously and returns a job ID for subsequent interaction. This is suitable for commands that may exceed the default timeout.

```APIDOC
## POST /run/:cmd

### Description
Starts a long-running process and returns a job ID for interaction. Use this for commands that take longer than a few seconds.

### Method
POST

### Endpoint
/run/:cmd

### Parameters
#### Path Parameters
- **cmd** (string) - Required - The name of the command to execute.

#### Request Body
- **args** (string[]) - Optional - An array of string arguments to pass to the command.

### Response
#### Success Response (201)
- **(string)** - A job ID representing the started process.

### Status Codes
- 201: Job created successfully
- 404: Script not found
- 409: Too many jobs running
- 500: Server error

### Request Example
```json
{
  "args": ["full", "production"]
}
```
```

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

### $data.todo.getAll

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/dataApi.md

Fetches all todo items, optionally with parameters and immediate execution.

```APIDOC
## GET $data.todo.getAll

### Description
Fetches all todo items. This method can be configured to execute immediately upon component mount or be triggered manually.

### Method
GET

### Endpoint
$data.todo.getAll

### Parameters
#### Query Parameters
- **params** (object) - Optional - The object you want to send to the backend (e.g., `{ isDeleted: false }`).
- **options** (object) - Optional - Configuration for the request.
  - **immediate** (boolean) - If true, the action will be executed right away, defaults to false.
  - **cb** (function) - A function which will get called after the action is resolved. Receives the result object.

### Request Example
```json
{
  "params": { "isDeleted": false },
  "options": { "immediate": true }
}
```

### Response
#### Success Response (200)
- **data** - The result object containing todo items.
- **execute** - A function to manually trigger the fetch operation.
```

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

### Recommended Backend Plugin Directory Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/golden-path/backend/overview.md

Illustrates the recommended datatype-oriented folder structure for backend plugins. This organization helps in managing complexity as plugins grow.

```directory structure
plugins/
└── your_plugin_name/
    └── backend/
        ├── index.ts                    # wires datatypes (only required backend file)
        └── datatypes/
            └── example/
                ├── index.ts          # optional: register this datatype in one place
                ├── example.model.ts
                ├── example.schema.ts
                ├── example.service.ts
                ├── helpers/
                │   └── payload.ts
                └── routes/
                    ├── index.ts
                    └── route.example.*.ts
```

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

### Create Models

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/snippets/wrappers/backendIndexDatatypeWrapper.md

Initializes models using the provided Fastify instance.

```typescript
const models = createModels(fastify)
```

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

### Day-to-day Commands for Monorepo Development

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/core-monorepo-for-maintainers.md

Common scripts for setting up, building, and running the development environment within the monorepo. These are run from the repository root.

```bash
:install
```

```bash
:build:workspaces
```

```bash
:build
```

```bash
:release:prepare
```

```bash
:dev
```

```bash
:down
```

```bash
:clean
```

```bash
:install:refresh-lockfile
```

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

### Clone RacletteJS Monorepo

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cookbook.md

Clone the RacletteJS monorepo to access and test the cookbook examples locally.

```bash
git clone https://gitlab.com/raclettejs/core-dev.git
```

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

### Frontend Plugin Folder Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/golden-path/frontend/overview.md

Illustrates the recommended directory layout for a frontend plugin following the Golden Path. It includes the main entry point, generated configuration, widgets, and shared components/composables.

```tree
frontend/
├── index.ts
├── generated-config.ts      # from backend
├── widgets/
│   └── TodoList/
│       ├── TodoListWidget.vue   # entry only — keep thin
│       └── setup.ts
├── components/                # shared across widgets (recommended)
└── composables/

```

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

### API Call for Git Status Script

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Example API call to the '/script/git-status' endpoint. This script does not require any arguments.

```json
POST /script/git-status
{}
```

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

### Initialize Plugin API

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/storeApi.md

Access the $store object from the plugin API. This is the entry point for interacting with the store.

```typescript
const { $store } = usePluginApi()
```

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

### Basic Usage of $data API

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/dataApi.md

Demonstrates how to use the $data API to fetch data, including parameters for backend requests and options for execution control. It shows how to access reactive state and execution functions.

```typescript
const { $data, [...] } = usePluginApi()
const {data, dataArr, response, query, execute, isLoading, error } = $data.example.getAll({
  params: {},
  id: false,
  options: {
    immediate: false,
    cb: (result) => {},
    notify: true | false,
    responseType: "json" | "stream",
    mode: "none" | "cors",
    useCache: true | false,
    useStore: true | false,
  },
  config: {}
})
```

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

### Factory Function for ExampleService

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/backend/plugin/service.md

Provides a factory function `createExampleService` to instantiate the ExampleService with a given Mongoose model.

```typescript
export const createExampleService = (model: Model<Example>) => {
  return new ExampleService(model)
}
```

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

### API Call for File Permissions Script

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Example API call to the '/script/chmod-files' endpoint with arguments to set file permissions.

```json
POST /script/chmod-files
{
  "args": ["rw", "document.txt"]
}
```

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

### API Call for Service Control Script

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/official-plugins/cli-connector.md

Example API call to the '/script/service-control' endpoint with arguments to restart the nginx service.

```json
POST /script/service-control
{
  "args": ["restart", "nginx"]
}
```

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

### Recommended Vue Project Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/golden-path/frontend/vue-structure.md

Illustrates a recommended directory structure for Vue.js projects, including widget organization, shared components, and composables. This structure facilitates code reuse across different widgets.

```tree
frontend/
├── index.ts
├── widgets/
│   ├── TodoList/
│   │   ├── TodoListWidget.vue
│   │   └── setup.ts
│   └── TodoChart/
│       ├── TodoChartWidget.vue
│       └── setup.ts
├── components/
│   └── TodoRow.vue          # used by both widgets
└── composables/
    └── useTodoItems.ts
```

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

### Get UI State

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/storeApi.md

Retrieve the reactive UI state using the getUiState getter. This internally resolves to the path ['ui'].

```typescript
const uiState = $store.getUiState()
```

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

### Create a new racletteJS app with yarn

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/getting-started.md

Use this command to quickly scaffold a new racletteJS project with default configurations and plugins.

```sh
yarn create raclette-app
```

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

### Todo Service Implementation

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/recipes/interpolationAbstract.md

Implementation of the TodoService class, including type imports and helper functions. This is a building block for recipe examples.

```typescript
import type { Todo, Todo as TodoType } from "./todo.schema"
import type { QueryOptions } from "@_/types/service"
import { v4 as uuidv4, validate } from "uuid"
import { createTodoPayload } from "./helpers/todoHelper"
import type {
  PluginFastifyInstance,
  FrontendPayload,
  FrontendPayloadRequestData,
} from "@raclettejs/core/types"
import { Model } from "mongoose"

export class TodoService {
  private todoModel: Model<Todo>

  constructor(model: Model<Todo>) {
    this.todoModel = model
  }
  // [...]
  /* YOUR BUSINESS LOGIC */
  // [...]
}

export const createTodoService = (model: Model<Todo>) => {
  return new TodoService(model)
}
```

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

### Minimal Frontend File Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/plugin-development/frontend/overview.md

Illustrates the basic directory and file layout for a RacletteJS plugin's frontend.

```tree
frontend/
├── index.ts
└── widgets/MyThing/MyThingWidget.vue
```

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

### Read Operation: Get All Entities

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/generatedConfig.md

Configuration for fetching a full collection of entities. This operation uses a static target and does not emit any channels.

```typescript
target: "/todo/all"
method: "get"
storeActionType: "dataRead"
```

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

### Cross-plugin with Query Control

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/usePluginApi.md

Example of accessing another plugin's API with controlled query identification for shared queries and cache management.

```typescript
const { $data } = usePluginApi({
  pluginKey: "raclette__core",
  actionId: "coreTags",
})

$data.tag.getAll({
  id: "all",
})
```

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

### Define and Export Widget

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/examples/cooking-steps/frontend/plugin/widgets/setup.md

This snippet shows how to define widget details like title, color, icon, images, and description, and then export the widget configuration along with its details. Ensure all paths for icons and images are correctly resolved using `import.meta.url`.

```typescript
import type { WidgetDeclaration } from "@raclettejs/core"

export const details = {
  title: "My Example Widget",
  color: "#6CB5D1",
  icon: new URL("./icon.svg", import.meta.url).href,
  images: [new URL("./screenshot.png", import.meta.url).href],
  description: "An example widget",
} satisfies WidgetDeclaration
const config = {}

export default {
  config,
  details,
}
```

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

### Custom Operation Example

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/generatedConfig.md

Illustrates custom backend endpoints like 'updateCheckTask' and 'deleteHard', which function identically to standard operations but have custom names.

```typescript
updateCheckTask
deleteHard
```

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

### Listen for 'todoCreated' Event

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/guides/howto/FAQ/socketApi.md

This basic example demonstrates how to use the $socket.on() method to listen for a 'todoCreated' event and log the received payload to the console.

```typescript
$socket.on("todoCreated", (payload) => {
  console.log("Todo created:", payload)
})
```

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

### Create a Changeset for Release

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/README.md

Use this command to create a new changeset file, which is used for automating versioning and changelog updates. Follow the prompts to select packages, choose a bump type, and provide a summary.

```sh
yarn :changeset
```

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

### Typical RacletteJS App Structure

Source: https://gitlab.com/raclettejs/core-dev/-/blob/main/@docs/compiled-docs/docs/introduction/how-raclette-works.md

Illustrates the standard directory layout for a racletteJS application created with `create-raclette-app`. This structure helps organize core configuration, plugins, service overrides, and shared code.

```text
my-raclettejs-app/
├── package.json
├── packages.json
├── raclette.config.yaml
├── plugins/
│   └── my-plugin/
│       ├── raclette.plugin.ts
│       ├── backend/
│       └── frontend/
├── services/                  # optional overrides
│   ├── backend/
│   └── frontend/
├── shared/                    # optional shared app code
├── i18n/                      # optional app i18n
└── .raclette/                 # generated runtime output
```