### Install Dependencies and Start Dev Server Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/index.md After project creation, install dependencies and start the local development server. ```bash cd myproject npm install npm start ``` -------------------------------- ### Clone and Run Enhance Markdown Project Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-11-18-rendering-markdown-with-enhance.md Clone the example project, install dependencies, and start the development server to test markdown rendering. ```bash git clone git@github.com:macdonst/enhance-markdown.git cd enhance-markdown npm install begin dev ``` -------------------------------- ### Create and Start Enhance Project Source: https://context7.com/enhance-dev/enhance.dev/llms.txt Use the Enhance CLI to create a new project, install dependencies, and start the local development server. ```bash npx "@enhance/cli@latest" new ./myproject -y cd myproject npm install npm start # Dev server runs at http://localhost:3333 ``` -------------------------------- ### Install Begin CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/begin.md Install the Begin CLI globally using npm. ```bash npm i --global @begin/deploy ``` -------------------------------- ### Install Begin CLI on Windows Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-26-on-the-first-day-of-enhancing.md Execute this command in PowerShell to install the Begin CLI on Windows. It handles the download and execution of the installation script. ```powershell iwr https://dl.begin.com/install.ps1 -useb | iex ``` -------------------------------- ### Install and Start Enhance TodoMVC App Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-09-06-enhancing-todomvc.md Run these commands in your terminal to install dependencies and start the Enhance TodoMVC application. ```bash npm install npm start ``` -------------------------------- ### Preview Enhance Project Locally Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/architect.md Install project dependencies and start a local development server to preview your Enhance project in the browser. Ensure you are in the project directory. ```bash cd my-enhance-project npm install npm start ``` -------------------------------- ### Install Playwright CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/by-example/examples/browser-testing.md Use this command to initialize Playwright in your project. It guides you through setup questions. ```shell npm init playwright@latest ``` -------------------------------- ### Install Begin CLI on macOS/Linux Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-26-on-the-first-day-of-enhancing.md Use this command to download and install the Begin CLI on macOS or Linux systems. Follow the on-screen instructions to add it to your PATH. ```bash curl -sS https://dl.begin.com/install.sh | sh ``` -------------------------------- ### Start Enhance Development Server Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/cookbook/render-markdown.md Command to start the Enhance development server for testing. ```bash enhance dev ``` -------------------------------- ### Enhance SSR Setup Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/by-example/examples/standalone-enhance.md Imports the 'enhance-ssr' module and configures it with custom elements. This snippet shows the minimal setup required to start using Enhance. ```javascript import enhance from 'enhance-ssr' const html = enhance({ elements: { 'hello-world': HelloWorld } }) export default async function handler(request, reply) { } function HelloWorld({ html, state }) { } ``` -------------------------------- ### Start the Enhance Blog Development Server Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-17-introducing-the-enhance-blog-template.md This command starts the local development server, allowing you to preview your blog and see changes in real-time. ```bash npm start ``` -------------------------------- ### Project Structure Example Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/by-example/examples/browser-testing.md Illustrates the project directory structure after setting up the mock app. Pay attention to the paths for elements and pages. ```shell . ├── app │ ├── elements │ │ └── my-counter.mjs │ └── pages ├── ... └── tests ├── example.spec.js └── mock └── app ├── elements │ └── my-counter.mjs └── pages └── index.html ``` -------------------------------- ### Install Dependencies for Enhance Blog Template Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-17-introducing-the-enhance-blog-template.md After cloning the repository, navigate to the project directory and run this command to install all necessary npm dependencies. ```bash npm install ``` -------------------------------- ### Install Tiptap Editor Dependencies Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-16-enhance-browser-workflow.md Install the core Tiptap library and the starter-kit extension using npm. This is a prerequisite for using Tiptap in your Enhance project. ```bash npm install @tiptap/core @tiptap/starter-kit ``` -------------------------------- ### Start Local Development Server Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-26-on-the-first-day-of-enhancing.md Navigate to your project directory and run this command to start the local development server. Access your application at http://localhost:3333. Changes in the 'app' folder trigger hot reloads. ```bash cd 12-days begin dev ``` -------------------------------- ### Install Lit Component Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-15-using-lit-components-in-an-enhance-app.md Install the Lit library using npm. This is the first step to using Lit components in your project. ```bash npm install lit ``` -------------------------------- ### Install @enhance/image Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/enhance-ui/image.md Install the Enhance Image component using npm. ```shell npm install @enhance/image ``` -------------------------------- ### Install Custom Element Dependencies Source: https://context7.com/enhance-dev/enhance.dev/llms.txt Install the necessary packages for creating custom elements with Enhance.dev. ```bash npm install @enhance/custom-element @enhance/morphdom-mixin ``` -------------------------------- ### Complete Enhance SSR Example Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/by-example/examples/standalone-enhance.md Combines the request handler, Enhance setup, and custom element to render an HTML document. The handler returns an Enhance-rendered HTML string including the custom element and its slotted content. ```javascript import enhance from 'enhance-ssr' const html = enhance({ elements: { 'hello-world': HelloWorld } }) export default async function handler(request, reply) { const name = request.query?.name reply.statusCode = 200 return html`

We're happy you're here.

 ` } function HelloWorld({ html, state }) { const name = state.attrs?.name || 'world' return html`

Hello, ${name}

` } ``` -------------------------------- ### Preview Project Locally Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/begin.md Navigate into your project directory and start the development server to preview your Enhance project in the browser. ```bash cd my-enhance-project npx enhance dev ``` -------------------------------- ### Install @begin/validator Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/cookbook/validate-forms.md Install the validator package using npm. This is the first step to enable server-side form validation. ```bash npm i @begin/validator ``` -------------------------------- ### Install Multipart Parser Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-02-08-upload-files-in-forms-part-1.md Install the `lambda-multipart-parser` package to handle multipart form data on the server. This is typically done using npm. ```bash npm install lambda-multipart-parser ``` -------------------------------- ### Install @enhance/element Dependency Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/conventions/components.md Before using the @enhance/element package, ensure it is installed in your project. ```bash npm install @enhance/element ``` -------------------------------- ### Install Enhance Performance Budget Plugin Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-10-03-introducing-the-enhance-performance-budget-plugin.md Install the plugin using npm. This is the first step to enable performance budget monitoring in your Enhance project. ```bash npm i @enhance/enhance-plugin-performance-budget ``` -------------------------------- ### Start Local Development Server Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-10-14-web-components-server-side-rendering-and-progressive-enhancement.md Run this command in your terminal to start the local development server for your Enhance project. Access the application via the provided URL. ```bash begin dev ``` -------------------------------- ### Install @enhance/arc-plugin-posse Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-04-28-supporting-publish-own-site-syndicate-elsewhere.md Install the plugin using npm. This is the first step to enable content syndication. ```bash npm install @enhance/arc-plugin-posse ``` -------------------------------- ### Install and Bundle Web Component Locally Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-11-29-using-external-web-components-in-enhance.md Install a web component using npm and bundle it into your Enhance project for greater control. This approach avoids external dependencies and is compatible with Content Security Policies. ```bash npm install @vanillawc/wc-social-link ``` ```arc @bundles wc-social-link './node_modules/@vanillawc/wc-social-link/src/wc-social-link.js' ``` ```html ``` -------------------------------- ### File-Based Routing Examples Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/conventions/pages.md Demonstrates how file paths in the `app/pages/` directory correspond to URL routes in an Enhance project. ```text app/pages/index.html → https://yoursite.com/ app/pages/about.html → https://yoursite.com/about ``` -------------------------------- ### Basic Enhance Setup with Style Transform Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/features/transforms/style-transforms.md Configure the Enhance SSR handler to use the style transform. This setup processes styles for components, preparing them for optimized rendering. ```javascript import enhance from '@enhance/ssr' import styleTransform from '@enhance/enhance-style-transform' const html = enhance({ styleTransforms: [styleTransform] }) const myDoc = html`Something` ``` -------------------------------- ### Install Fast Components Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-01-20-using-fast-components-in-an-enhance-app.md Install the Fast components library using npm. This command adds the necessary package to your project's dependencies. ```bash npm install @microsoft/fast-components ``` -------------------------------- ### Old Enhance Styles Configuration Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-05-12-introduce-enhance-styles-5.md Example of the previous configuration structure for Enhance Styles. ```json { "base": 16, "scale": { "steps": 12, "ratio": "perfectFourth" } } ``` -------------------------------- ### Create a New Enhance Project Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/index.md Use the Enhance CLI to generate a new project. Ensure Node.js 16.x or higher is installed. ```bash npx "@enhance/cli@latest" new ./myproject -y ``` -------------------------------- ### File-Based Routing Example Source: https://context7.com/enhance-dev/enhance.dev/llms.txt Pages in `app/pages/` map directly to URL routes and are rendered server-side. ```html

About Us

``` -------------------------------- ### Test API Route with Sandbox Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/cookbook/write-unit-tests.md Tests an API route by starting a local sandbox server, making a GET request, and asserting the response body. Includes setup and teardown for the sandbox. ```javascript const { get } = require('tiny-json-http') const test = require('tape') const sandbox = require('@architect/sandbox') const url = (path) => `http://localhost:3333${path}` test(`Start local server`, async t => { await sandbox.start({ quiet: true }) t.pass('local server started') t.end() }) test('Api should return expected result', async t => { const response = await get({ url: url('/') }) const actual = response.body const expected = { count: 1 } t.equal(actual, expected, 'API returned expected result') t.end() }) test('Shut down local server', async t => { await sandbox.end() t.pass('Shut down Sandbox') t.end() }) ``` -------------------------------- ### Begin CLI Deployment Commands Source: https://context7.com/enhance-dev/enhance.dev/llms.txt Commands for installing the Begin CLI, creating a new project, running local development, generating scaffolds, logging in, and deploying to production. ```bash # Install Begin CLI npm i --global @begin/deploy # Create a new project npx "@enhance/cli@latest" new my-app # Local dev cd my-app && npx enhance dev # Generate scaffold (CRUDL + DynamoDB) npx enhance generate scaffold Product name:string price:number # Login (GitHub OAuth) npx begin login # Deploy to production npx begin deploy ``` -------------------------------- ### Create New Begin App and Staging Environment Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-17-introducing-the-enhance-blog-template.md Creates a new Begin application and its initial staging environment based on the current project. Follow the interactive prompts to name your app and environment. ```bash begin create This project doesn't appear to be associated with a Begin app ? Would you like to create a Begin app based on this project? (Y/n) · true ? What would you like to name your app? · blog-template ? What would you like to name your first environment? · staging Archiving and uploading project to Begin... Project uploaded, you can now exit this process and check its status with: begin deploy --status Beginning deployment of 'staging' Packaging build for deployment Publishing build to Begin Build completed! Deployed 'staging' to: https://blog-template.begin.app ``` -------------------------------- ### GET Request Handler Example Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/routing/api-routes/index.md An example of an async GET request handler for an API route. It returns a JSON object which can be accessed by Enhance Elements via state.store during server-side rendering. ```APIDOC ## GET /api/index.mjs ### Description Handles GET requests for the index API route, returning a JSON object with favorite items. ### Method GET ### Endpoint /api/index.mjs ### Request Example ```javascript export async function get (req) { return { json: { favorites: ['coffee crisp', 'smarties'] } } } ``` ### Response #### Success Response (200) - **json** (object) - An object containing the response data, e.g., `{ favorites: ['coffee crisp', 'smarties'] }`. ``` -------------------------------- ### Basic API Route Example Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/routing/index.md This is a basic example of an API route that returns JSON data. It is defined in `api/index.mjs` and handles GET requests. ```javascript export async function get (req) { return { json: { favorites: ['coffee crisp', 'smarties'] } } } ``` -------------------------------- ### Enhance TypeScript API Example Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2024-05-17-introducing-the-enhance-typescript-starter.md Example of an API endpoint written in TypeScript. It defines a 'Todo' type and handles a GET request to return a list of todos. Includes logging for request handling. ```typescript import type { EnhanceApiFn, EnhanceApiReq, EnhanceApiRes, } from "@enhance/types"; type Todo = { title: string; completed?: boolean; }; export const get: EnhanceApiFn = async function ( request: EnhanceApiReq, ): Promise { console.log(`Handling ${request.path}...`); const todos: Todo[] = [ { title: "todo 1", completed: false }, { title: "todo 2", completed: true }, { title: "todo 3" }, ]; const response: EnhanceApiRes = { json: { todos }, }; return response; }; ``` -------------------------------- ### Create a New Begin App Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-01-04-on-the-tenth-day-of-enhancing.md Use this command to create a new Begin app for your project. It will prompt you for the app name and the first environment name. This command also initiates the first deployment. ```bash begin create This project doesn't appear to be associated with a Begin app ? Would you like to create a Begin app based on this project? (Y/n) · true ? What would you like to name your app? · 12-days ? What would you like to name your first environment? · staging Added appID 'NOTREALS' to project, be sure to commit this change! App '12-days' + environment 'staging' created at https://shiny-b27.begin.app ? Would you like to deploy your app? (Y/n) · true Archiving and uploading project to Begin... Project uploaded, you can now exit this process and check its status with: begin deploy --status Beginning deployment of 'staging' Packaging build for deployment Publishing build to Begin Build completed! Deployed 'staging' to: https://shiny-b27.begin.app ``` -------------------------------- ### Log in to Begin CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-01-04-on-the-tenth-day-of-enhancing.md Execute this command to log in to the Begin platform. You may need to authenticate via GitHub. ```bash begin login Please authenticate by visiting: https://api.begin.com/auth?user_code=NOT_A_REAL_CODE ``` ```bash begin login Found incomplete login, trying again Please authenticate by visiting: https://api.begin.com/auth?user_code=NOT_A_REAL_CODE Awaiting authentication... Successfully logged in! ``` -------------------------------- ### Log in to Begin Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/begin.md Log in to your Begin account by running this command and authorizing with GitHub. ```bash npx begin login ``` -------------------------------- ### Install arc-plugin-tailwind Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-09-22-using-tailwind-with-enhance.md Install the Tailwind CSS plugin for Enhance as a development dependency. ```bash npm i -D arc-plugin-tailwindcss ``` -------------------------------- ### Install Sass Node Module Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/enhance-styles/alternatives/sass.md Install the Sass node module as a development dependency. ```bash npm install -D sass ``` -------------------------------- ### Login to Begin CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-17-introducing-the-enhance-blog-template.md Logs you into the Begin CLI. This is the first step before creating or managing applications. ```bash begin login ``` -------------------------------- ### Install @enhance/custom-element Dependency Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/conventions/components.md Install the necessary dependency for creating Enhance components using npm. ```bash npm install @enhance/custom-element ``` -------------------------------- ### Create New Enhance Application Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-08-enhance-api-routes-and-openapi.md Use the Begin CLI to create a new Enhance application and navigate into its directory. ```bash begin new book-tracker cd book-tracker ``` -------------------------------- ### Add and Deploy to Production Environment Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-01-04-on-the-tenth-day-of-enhancing.md Create a separate production environment and deploy your application to it using these commands. This is recommended for testing changes in staging before going live. ```bash begin create --env production begin deploy --env production ``` -------------------------------- ### Install TypeScript for Dev Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-12-15-using-lit-components-in-an-enhance-app.md Install TypeScript as a development dependency. This is required for using TypeScript-based Lit components. ```bash npm install typescript –save-dev ``` -------------------------------- ### GET and POST API Routes Source: https://context7.com/enhance-dev/enhance.dev/llms.txt Defines GET and POST handlers for a product API route. The GET handler fetches a product by ID and returns it with caching headers. The POST handler creates a new product and returns a redirect location. ```javascript // app/api/products/$id.mjs // GET /products/widget-42 → req.params = { id: 'widget-42' } export async function get(req) { const { id } = req.params const { q } = req.query // e.g. /products/widget-42?q=details const product = await fetchProduct(id) if (!product) { return { statusCode: 404, json: { error: 'Not found' } } } return { json: { product }, cacheControl: 'max-age=300' } } export async function post(req) { const { name, price } = req.body const newProduct = await createProduct({ name, price }) return { location: `/products/${newProduct.id}`, session: { lastCreated: newProduct.id } } } ``` -------------------------------- ### Create New Enhance Project and Element Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-10-14-web-components-server-side-rendering-and-progressive-enhancement.md Use the Begin CLI to create a new Enhance project and a custom element. Navigate into the project directory after creation. ```bash begin new project --path ./counter-project cd counter-project ``` -------------------------------- ### Installing Morphdom Mixin Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/conventions/components.md Install the `@enhance/morphdom-mixin` dependency using npm to enable DOM diffing for your Enhance components. ```bash npm install @enhance/morphdom-mixin ``` -------------------------------- ### Deploy Project Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/begin.md Deploy your Enhance project to a new environment using the Begin CLI. ```bash npx begin deploy ``` -------------------------------- ### Create New Enhance Project with TypeScript Starter Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2024-05-17-introducing-the-enhance-typescript-starter.md Use this command to initialize a new Enhance project using the TypeScript starter template. ```bash npx "@enhance/cli@latest" new ./myproject \ --template https://github.com/enhance-dev/enhance-starter-typescript -y ``` -------------------------------- ### Install @enhance/arc-plugin-block-bots Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2024-07-31-block-the-bots-in-enhance-projects.md Install the bot blocking plugin using npm. This command adds the package to your project's dependencies. ```bash npm i @enhance/arc-plugin-block-bots ``` -------------------------------- ### Simplified Authoring with Enhance Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-12-13-web-component-therapy.md This example shows how to author an Enhance component with minimal markup, relying on the server-side rendering to expand the full structure. ```html ``` -------------------------------- ### Example Enhance component with Tailwind classes Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-09-22-using-tailwind-with-enhance.md An example of an Enhance component that utilizes Tailwind CSS utility classes for styling. ```javascript export default function MyButton({ html }) { return html` ` } ``` -------------------------------- ### Install Arcdown Package Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/cookbook/render-markdown.md Install the Arcdown package using npm. This is the first step to enable Markdown rendering in your Enhance project. ```bash npm install arcdown ``` -------------------------------- ### Generate Page and Element with Begin CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-11-18-rendering-markdown-with-enhance.md Use the Begin CLI to generate a new catch-all page and a web component for displaying markdown. ```bash begin gen page --path 'markdown/$$' \ begin gen element --name doc-content ``` -------------------------------- ### Install Architect CLI Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/deployment/architect.md Install the Architect CLI globally using npm. This command is required before using Architect for project management and deployment. ```bash npm i -g @architect/architect ``` -------------------------------- ### Create Production Environment Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-17-introducing-the-enhance-blog-template.md Creates a production environment for your Begin application. This is an optional step, typically used for CI/CD pipelines. ```bash begin create --env production App environment 'production' created at https://blog-template-prod.begin.app ``` -------------------------------- ### Run Enhance Application Locally Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2023-03-08-enhance-api-routes-and-openapi.md Execute this command in your project directory to start the Enhance development server. Access your application at http://localhost:3333. ```bash begin dev ``` -------------------------------- ### Clone and Run Enhance TodoMVC Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/blog/posts/2022-09-15-styling-todomvc-with-enhance-styles.md Clone the Enhance TodoMVC repository and checkout the styles branch to run the application locally. Navigate to http://localhost:3333/todos to view the styled app. ```bash git clone git@github.com:macdonst/enhance-todomvc.git cd enhance-todomvc git checkout styles npm install npm start ``` -------------------------------- ### Inset Inline Start Utility Class Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/enhance-styles/logical-properties.md Apply the `.inset-is-0` class to set inset-inline-start to 0. This is equivalent to setting left to 0 in LTR writing modes. ```css .inset-is-0 { inset-inline-start: 0 } ``` -------------------------------- ### API Route to Get Current Count Source: https://github.com/enhance-dev/enhance.dev/blob/main/app/docs/md/routing/api-routes/tutorial.md An API route that handles GET requests to retrieve the current count from the user's session. If no count exists, it defaults to 0. ```javascript export async function get (req) { const count = req.session.count || 0 return { json: { count } } } ```