SolidJS

https://docs.solidjs.com
Admin
SolidJS is a modern JavaScript framework for building responsive and high-performing user interfaces...
Tokens:247,746
Snippets:2,499
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install dependencies and start dev server (bun)

Source: https://docs.solidjs.com/quick-start

After creating the project, navigate into the project directory, install dependencies, and start the development server using bun.

```shell
cd solid-project
bun install
bun run dev
```

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

### Install dependencies and start dev server (deno)

Source: https://docs.solidjs.com/quick-start

After creating the project, navigate into the project directory, install dependencies, and start the development server using deno.

```shell
cd solid-project
deno install
deno run dev
```

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

### Example app with MetaProvider, Title, Link, and Meta

Source: https://docs.solidjs.com/solid-meta/getting-started/installation-and-setup

Wrap your application with MetaProvider and use Title, Link, and Meta components to manage head tags. This example shows a basic setup after installation.

```js
import { MetaProvider, Title, Link, Meta } from "@solidjs/meta";

const App = () => (
	<MetaProvider>
		<div class="Home">
			<Title>Title of page</Title>
			<Link rel="canonical" href="http://solidjs.com/" />
			<Meta name="example" content="whatever" />
		</div>
	</MetaProvider>
);
```

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

### Install dependencies and start dev server (npm)

Source: https://docs.solidjs.com/quick-start

After creating the project, navigate into the project directory, install dependencies, and start the development server using npm.

```shell
cd solid-project
npm install
npm run dev
```

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

### Install dependencies and start dev server (pnpm)

Source: https://docs.solidjs.com/quick-start

After creating the project, navigate into the project directory, install dependencies, and start the development server using pnpm.

```shell
cd solid-project
pnpm install
pnpm dev
```

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

### Install dependencies and start dev server (yarn)

Source: https://docs.solidjs.com/quick-start

After creating the project, navigate into the project directory, install dependencies, and start the development server using yarn.

```shell
cd solid-project
yarn install
yarn dev
```

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

### Basic usage setup

Source: https://docs.solidjs.com/reference/reactive-utilities/batch

Initial signals and memo setup for the batch examples.

```ts
const [count, setCount] = createSignal(0);
const [total, setTotal] = createSignal(0);

const summary = createMemo(() => `${count()} / ${total()}`);
createEffect(() => console.log(summary())); // logs "0 / 0"
```

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

### Setup the Router component

Source: https://docs.solidjs.com/guides/routing-and-navigation

Renders the Router component to start the application. The Router matches the URL to display the desired page.

```jsx
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";

render(() => <Router />, document.getElementById("root"));
```

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

### Basic usage of GET

Source: https://docs.solidjs.com/solid-start/v2/reference/server/get

Example showing how to use GET with a function that has a GET property.

```tsx
import { GET } from "@solidjs/start";

const getMessage = Object.assign(async () => "hello", {
	GET: async () => "hello",
});

const handler = GET(getMessage);
```

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

### Set up user-event with fake timers and simulate interactions

Source: https://docs.solidjs.com/guides/testing

When using vi.useFakeTimers(), userEvent.setup must be configured with the advanceTimers option. This example shows setup and usage of click, keyboard, and pointer events from @testing-library/user-event.

```tsx
import { vi } from "vitest"

const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })

vi.useFakeTimers()

describe("pre-login: sign-in", () => {
  const { getByRole, getByLabelText } = render(() => <User />)
  const signUp = getByRole('button', { text: 'Sign-in' })
  // use convenience API click:
  user.click(signUp)
  const name = getByLabelText('Name')
  // use complex keyboard input:
  user.keyboard(name, "{Shift}test{Space}{Shift}user")
  const password = getByLabelText('Password')
  user.keyboard(name, "secret")
  const login = getByRole('button', { text: 'Login' })
  // use touch event
  user.pointer([
    { keys: "[TouchA]" target: login },
    { keys: "[/TouchA]", target: login }
  ])
});
```

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

### Install dependencies

Source: https://docs.solidjs.com/solid-start/v2/getting-started

Install the project dependencies after scaffolding. Use the package manager of your choice.

```sh
npm i
pnpm i
yarn i
bun i
deno i
```

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

### Create a Solid project with create-solid

Source: https://docs.solidjs.com/quick-start

Run one of these commands in your terminal to scaffold a new Solid project. The command installs and runs create-solid, the official project scaffolding tool. You will be guided through a series of prompts to choose options like starter templates and TypeScript support.

```shell
npm init solid
pnpm create solid
yarn create solid
bun create solid
deno init --npm solid
```

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

### Import GET from @solidjs/start

Source: https://docs.solidjs.com/solid-start/v2/reference/server/get

Import the GET function from the @solidjs/start package.

```tsx
import { GET } from "@solidjs/start";
```

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

### Install temporal-polyfill

Source: https://docs.solidjs.com/solid-start/v2/advanced/serialization

Install the temporal-polyfill package if your runtime does not provide native Temporal support.

```sh
pnpm add temporal-polyfill
```

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

### Install @solidjs/meta with various package managers

Source: https://docs.solidjs.com/solid-meta/getting-started/installation-and-setup

Install the @solidjs/meta package using npm, pnpm, yarn, bun, or deno. Choose the command for your preferred package manager.

```sh
npm i @solidjs/meta
pnpm i @solidjs/meta
yarn add @solidjs/meta
bun i @solidjs/meta
deno add npm:@solidjs/meta
```

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

### Basic usage example for entry-server.tsx

Source: https://docs.solidjs.com/solid-start/v2/reference/entrypoints/entry-server

Complete example of an `entry-server.tsx` file. It imports `createHandler` and `StartServer`, defines a `Document` component that renders the HTML shell with assets, children, and scripts, and exports the default handler.

```tsx
import { createHandler, StartServer } from "@solidjs/start/server";

function Document(props) {
	return (
		<html>
			<head>{props.assets}</head>
			<body>
				<div id="app">{props.children}</div>
				{props.scripts}
			</body>
		</html>
	);
}

export default createHandler((event) => <StartServer document={Document} />);
```

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

### Install Macaron packages

Source: https://docs.solidjs.com/guides/styling-components/macaron

Install the core and Solid packages using your preferred package manager. The commands are equivalent alternatives.

```sh
npm i @macaron-css/core @macaron-css/solid
```

```sh
pnpm i @macaron-css/core @macaron-css/solid
```

```sh
yarn add @macaron-css/core @macaron-css/solid
```

```sh
bun i @macaron-css/core @macaron-css/solid
```

```sh
deno add npm:@macaron-css/core @macaron-css/solid
```

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

### Install Netlify CLI with npm, pnpm, yarn, bun, or deno

Source: https://docs.solidjs.com/guides/deployment-options/netlify

Install the Netlify CLI globally using your preferred package manager. Ensure your Netlify account and team are fully set up before proceeding.

```sh
npm i netlify-cli -g
pnpm i netlify-cli -g
yarn add netlify-cli -g
bun i netlify-cli -g
deno add npm:netlify-cli -g
```

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

### Basic usage of useNavigate

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-navigate

Example showing how to initialize and use the navigate function to change routes.

```tsx
import { useNavigate } from "@solidjs/router";

const navigate = useNavigate();

navigate("/users/123");
```

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

### Install Zerops CLI on Windows

Source: https://docs.solidjs.com/guides/deployment-options/zerops

Downloads and installs the Zerops CLI (zCLI) using PowerShell.

```powershell
irm https://zerops.io/zcli/install.ps1 | iex
```

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

### Install @solidjs/router with multiple package managers

Source: https://docs.solidjs.com/guides/routing-and-navigation

Shows how to install the @solidjs/router package using npm, pnpm, yarn, bun, and deno. The package is not included by default.

```sh
npm i @solidjs/router
pnpm i @solidjs/router
yarn add @solidjs/router
bun i @solidjs/router
deno add npm:@solidjs/router
```

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

### Install Zerops CLI via Package Managers

Source: https://docs.solidjs.com/guides/deployment-options/zerops

Install the Zerops CLI globally using npm, pnpm, yarn, bun, or deno.

```sh
npm i @zerops/zcli -g
pnpm i @zerops/zcli -g
yarn add @zerops/zcli -g
bun i @zerops/zcli -g
deno add npm:@zerops/zcli -g
```

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

### Install testing dependencies with npm, pnpm, yarn, bun, or deno

Source: https://docs.solidjs.com/guides/testing

Install vitest, jsdom, @solidjs/testing-library, @testing-library/user-event, and @testing-library/jest-dom as development dependencies. The commands are shown for npm, pnpm, yarn, bun, and deno package managers.

```sh
npm i vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom -D
```

```sh
pnpm i vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom -D
```

```sh
yarn add vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom -D
```

```sh
bun i vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom -d
```

```sh
deno add npm:vitest jsdom @solidjs/testing-library @testing-library/user-event @testing-library/jest-dom -D
```

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

### Basic usage of render

Source: https://docs.solidjs.com/reference/rendering/render

A basic example that mounts an `<App />` component into the element with id 'app'.

```tsx
import { render } from "solid-js/web";

const dispose = render(() => <App />, document.getElementById("app")!);
```

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

### Basic usage of mount with StartClient

Source: https://docs.solidjs.com/solid-start/v2/reference/client/mount

Example of using `mount` to hydrate the `<StartClient />` component into the `#app` element.

```tsx
import { mount, StartClient } from "@solidjs/start/client";

mount(() => <StartClient />, document.getElementById("app")!);
```

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

### Basic createHandler Usage

Source: https://docs.solidjs.com/solid-start/v2/reference/server/create-handler

Basic usage example showing how to create a server handler that renders the StartServer component with a document.

```tsx
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler((event) => <StartServer document={Document} />);
```

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

### StartClient()

Source: https://docs.solidjs.com/solid-start/v2/reference/client/start-client

Renders the generated app inside the client error boundary. It takes no arguments and returns the client app element.

```APIDOC
## StartClient()

### Description
Renders the generated app inside the client error boundary. It takes no arguments and returns the client app element.

### Method
Component

### Signature
```tsx
function StartClient(): JSX.Element;
```

### Parameters
None.

### Return Value
- **Type:** `JSX.Element`
- Returns the client app element.

### Behavior
- Renders the generated `solid-start:app` module.
- Wraps the app in the shared `ErrorBoundary`.

### Example
```tsx
import { mount, StartClient } from "@solidjs/start/client";

mount(() => <StartClient />, document.getElementById("app")!);
```
```

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

### Configure TypeScript types for jest-dom in tsconfig.json

Source: https://docs.solidjs.com/guides/testing

Add '@testing-library/jest-dom' to the 'types' array in tsconfig.json compilerOptions. This is required when using TypeScript to get the custom matchers. The example also shows the necessary jsx settings for Solid.

```json
  "compilerOptions": {
    // ...
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client", "@testing-library/jest-dom"]
  }
```

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

### Start the development server

Source: https://docs.solidjs.com/solid-start/v2/getting-started

Run the development server for local development. The toolbar is added during development and not included in production builds.

```sh
npm run dev
pnpm dev
yarn dev
bun run dev
deno run dev
```

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

### Importing mount and StartClient

Source: https://docs.solidjs.com/solid-start/v2/reference/entrypoints/entry-client

The necessary imports for the client entry module.

```tsx
import { mount, StartClient } from "@solidjs/start/client";
```

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

### GET(fn)

Source: https://docs.solidjs.com/solid-start/v2/reference/server/get

Returns the .GET property from a function. This is used to extract a GET handler from a function that has a GET property, typically for data fetching.

```APIDOC
## GET(fn)

### Description
Returns the `.GET` property from a function. This is used to extract a GET handler from a function that has a GET property, typically for data fetching.

### Method
Function call

### Endpoint
`GET` from `@solidjs/start`

### Parameters
#### `fn`
- **Type:** `T extends (...args: any[]) => any`
- **Required:** Yes
- Function with a `GET` property.

### Return Value
- **Type:** `(...args: Parameters<T>) => ReturnType<T>`
- Returns `fn.GET`.

### Example
```tsx
import { GET } from "@solidjs/start";

const getMessage = Object.assign(async () => "hello", {
	GET: async () => "hello",
});

const handler = GET(getMessage);
```
```

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

### LESS variables example

Source: https://docs.solidjs.com/guides/styling-components/less

LESS example showing variable declaration and usage.

```less
//styles.less
@plainred: red;
@plainblue: blue;
.foo {
	color: @plainred;
}
.bar {
	background-color: @plainblue;
}
```

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

### Complete task list example with createStore and produce

Source: https://docs.solidjs.com/guides/complex-state-management

Full App component demonstrating store creation, adding tasks, toggling completion with produce, and reactive count via createEffect. Includes JSX rendering with For and Show.

```jsx
import { For, createEffect, Show } from "solid-js";
import { createStore, produce } from "solid-js/store";

const App = () => {
	let input; // lets you target the input value
	const [state, setState] = createStore({
		tasks: [],
		numberOfTasks: 0,
	});

	const addTask = (text) => {
		setState("tasks", state.tasks.length, {
			id: state.tasks.length,
			text,
			completed: false,
		});
	};

	const toggleTask = (id) => {
		setState(
			"tasks",
			(task) => task.id === id,
			produce((task) => {
				task.completed = !task.completed;
			})
		);
	};

	createEffect(() => {
		setState("numberOfTasks", state.tasks.length);
	});

	return (
		<>
			<div>
				<h1>My Task List for Today</h1>
				<span>You have {state.numberOfTasks} task(s) for today!</span>
			</div>
			<input ref={input} />
			<button
				onClick={(e) => {
					if (!input.value.trim()) return;
					addTask(input.value);
					input.value = "";
				}}
			>
				Add Task
			</button>
			<For each={state.tasks}>
				{(task) => {
					const { id, text } = task;
					return (
						<div>
							<input
								type="checkbox"
								checked={task.completed}
								onChange={() => toggleTask(task.id)}
							/>
							<span>{text}</span>
						</div>
					);
				}}
			</For>
		</>
	);
};

export default App;
```

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

### Install Nitro

Source: https://docs.solidjs.com/solid-start/v2/guides/deployment-plugins

Install the Nitro package using your preferred package manager.

```sh
npm i nitro
pnpm i nitro
yarn add nitro
bun i nitro
deno add npm:nitro
```

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

### Import mount from @solidjs/start/client

Source: https://docs.solidjs.com/solid-start/v2/reference/client/mount

Import the `mount` function from the SolidStart client package.

```tsx
import { mount } from "@solidjs/start/client";
```

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

### Install Netlify Vite Plugin

Source: https://docs.solidjs.com/solid-start/v2/guides/deployment-plugins

Install the Netlify Vite plugin as a dev dependency.

```sh
npm i @netlify/vite-plugin -D
pnpm i @netlify/vite-plugin -D
yarn add @netlify/vite-plugin -D
bun i @netlify/vite-plugin -d
deno add npm:@netlify/vite-plugin -D
```

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

### Run one-time browser setup

Source: https://docs.solidjs.com/reference/lifecycle/on-mount

Shows how to use onMount to execute code that relies on browser-specific globals like window, as it does not run during server-side rendering.

```tsx
import { onMount } from "solid-js";

function Example() {
	onMount(() => {
		// Browser-only code
		console.log(window.location.pathname);
	});

	return <div>Mounted</div>;
}
```

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

### Basic GET API route in src/routes/api/ping.ts

Source: https://docs.solidjs.com/solid-start/v2/building-your-application/api-routes

Creates a simple API route that responds to GET requests with a plain text response. The file exports a GET function that returns a new Response with the body 'pong'.

```tsx
export function GET() {
	return new Response("pong");
}
```

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

### Basic usage of MetaProvider

Source: https://docs.solidjs.com/solid-meta/reference/meta/metaprovider

An example showing how to wrap components with MetaProvider to manage document head tags like Title and Meta.

```tsx
import { MetaProvider, Title, Meta } from "@solidjs/meta";

export default function Root() {
	return (
		<MetaProvider>
			<Title>Solid Docs</Title>
			<Meta name="description" content="Solid documentation" />
		</MetaProvider>
	);
}
```

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

### Install SASS as a development dependency

Source: https://docs.solidjs.com/guides/styling-components/sass

Install the SASS preprocessor using your preferred package manager.

```sh
npm i sass -D
pnpm i sass -D
yarn add sass -D
bun i sass -d
deno add npm:sass -D
```

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

### Install Vercel CLI

Source: https://docs.solidjs.com/guides/deployment-options/vercel

Install the Vercel CLI globally using your preferred package manager.

```sh
npm i vercel -g
pnpm i vercel -g
yarn add vercel -g
bun i vercel -g
deno add npm:vercel -g
```

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

### solidStart(options?)

Source: https://docs.solidjs.com/solid-start/v2/reference/config/solid-start

The solidStart function returns Vite plugins for building and running a SolidStart application. It accepts optional SolidStartOptions and returns an array of Vite PluginOption objects.

```APIDOC
## solidStart(options?)

### Description
Returns the Vite plugins that build and run a SolidStart application with Vite's Environment API.

### Method
Function

### Signature
```tsx
function solidStart(options?: SolidStartOptions): PluginOption[];
```

### Parameters
- **options** (SolidStartOptions) - Optional - Configuration options for the SolidStart plugin.

### Return Value
- **PluginOption[]** - An array of Vite plugin options.

### Usage Example
```tsx
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { solidStart } from "@solidjs/start/config";

export default defineConfig({
	plugins: [solidStart(), nitro()],
});
```

### Notes
- Use `solidStart()` together with a server plugin such as Nitro v3.
- Nitro settings do not belong inside `solidStart()`. Configure them with the top-level `nitro` property. See [`vite.config.ts`](/solid-start/v2/reference/entrypoints/vite-config).
```

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

### Install Cloudflare Vite Plugin and Wrangler

Source: https://docs.solidjs.com/solid-start/v2/guides/deployment-plugins

Install the Cloudflare Vite plugin and Wrangler as dev dependencies.

```sh
npm i @cloudflare/vite-plugin wrangler -D
pnpm i @cloudflare/vite-plugin wrangler -D
yarn add @cloudflare/vite-plugin wrangler -D
bun i @cloudflare/vite-plugin wrangler -d
deno add npm:@cloudflare/vite-plugin wrangler -D
```

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

### Import createHandler and StartServer

Source: https://docs.solidjs.com/solid-start/v2/reference/entrypoints/entry-server

Imports the `createHandler` and `StartServer` functions from `@solidjs/start/server`.

```tsx
import { createHandler, StartServer } from "@solidjs/start/server";
```

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

### Install Wrangler CLI

Source: https://docs.solidjs.com/guides/deployment-options/cloudflare

Use your preferred package manager to install the Wrangler command-line tool globally.

```sh
npm i wrangler -g
pnpm i wrangler -g
yarn add wrangler -g
bun i wrangler -g
deno add npm:wrangler -g
```

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

### Install Zerops CLI on Linux/MacOS

Source: https://docs.solidjs.com/guides/deployment-options/zerops

Downloads and installs the Zerops CLI (zCLI) using a shell script.

```bash
curl -L https://zerops.io/zcli/install.sh | sh
```

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

### Example: createAsyncStore with reactive arguments

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async-store

Shows how to use createAsyncStore with a query that depends on a reactive signal. The store is initialized with an empty array and updates when the signal changes.

```tsx
import { For, createSignal } from "solid-js";
import { createAsyncStore, query } from "@solidjs/router";

type Notification = {
	id: string;
	message: string;
	user: { name: string };
};

const getNotifications = query(async (unreadOnly: boolean) => {
	const response = await fetch(`/api/notifications?unread=${unreadOnly}`);
	return response.json() as Promise<Notification[]>;
}, "notifications");

function Notifications() {
	const [unreadOnly, setUnreadOnly] = createSignal(false);
	const notifications = createAsyncStore(() => getNotifications(unreadOnly()), {
		initialValue: [],
	});

	return (
		<>
			<button onClick={() => setUnreadOnly((value) => !value)}>
				Toggle unread
			</button>
			<ul>
				<For each={notifications()}>
					{(notification) => (
						<li>
							<div>{notification.message}</div>
							<div>{notification.user.name}</div>
						</li>
					)}
				</For>
			</ul>
		</>
	);
}
```

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

### Install LESS with various package managers

Source: https://docs.solidjs.com/guides/styling-components/less

Install LESS as a development dependency using the package manager of your choice.

```sh
npm i less -D
```

```sh
pnpm i less -D
```

```sh
yarn add less -D
```

```sh
bun i less -d
```

```sh
deno add npm:less -D
```

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

### Basic usage of startTransition

Source: https://docs.solidjs.com/reference/reactive-utilities/start-transition

Example showing how to use `startTransition` to update a signal within a transition, allowing Suspense to show fallback content while a resource loads.

```tsx
import {
	Suspense,
	createResource,
	createSignal,
	startTransition,
} from "solid-js";

function Example() {
	const [userId, setUserId] = createSignal(1);
	const [user] = createResource(userId, async (id) => {
		const response = await fetch(`/api/users/${id}`);
		return response.json();
	});

	async function showNextUser() {
		await startTransition(() => {
			setUserId(2);
		});
	}

	return (
		<>
			<button onClick={showNextUser}>Load next user</button>
			<Suspense fallback={<p>Loading user...</p>}>
				<pre>{JSON.stringify(user(), null, 2)}</pre>
			</Suspense>
		</>
	);
}
```

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

### Type signature of GET

Source: https://docs.solidjs.com/solid-start/v2/reference/server/get

The type signature of GET, showing it takes a function and returns a function with the same parameters and return type.

```tsx
function GET<T extends (...args: any[]) => any>(
	fn: T
): (...args: Parameters<T>) => ReturnType<T>;
```

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

### create-solid interactive prompts

Source: https://docs.solidjs.com/quick-start

Example of the interactive prompts shown by create-solid. You can choose project name, whether to use SolidStart, a starter template, and TypeScript support.

```shell
◆ Project Name
|  <solid-project>

◆ Is this a SolidStart project?
|  ● Yes / ○ No

◆ Which template would you like to use?
│  ● ts
│  ○ ts-vitest
│  ○ ts-uvu
│  ○ ts-unocss
│  ○ ts-tailwindcss

◆ Use TypeScript?
│  ● Yes / ○ No
```

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

### Install @vitest/coverage-v8

Source: https://docs.solidjs.com/guides/testing

Install the coverage package for Vitest using various package managers. The package is required to enable coverage collection.

```Shell
npm i @vitest/coverage-v8 -D
pnpm i @vitest/coverage-v8 -D
yarn add @vitest/coverage-v8 -D
bun i @vitest/coverage-v8 -d
deno add npm:@vitest/coverage-v8 -D
```

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

### Import StartServer

Source: https://docs.solidjs.com/solid-start/v2/reference/server/start-server

Import the StartServer component from the @solidjs/start/server package.

```tsx
import { StartServer } from "@solidjs/start/server";
```

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

### Install Tailwind CSS v3 and dependencies

Source: https://docs.solidjs.com/guides/styling-components/tailwind-v3

Install Tailwind CSS v3, PostCSS, and Autoprefixer as development dependencies using various package managers.

```sh
npm i tailwindcss@3 postcss autoprefixer -D
pnpm i tailwindcss@3 postcss autoprefixer -D
yarn add tailwindcss@3 postcss autoprefixer -D
bun i tailwindcss@3 postcss autoprefixer -d
deno add npm:tailwindcss@3 postcss autoprefixer -D
```

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

### Mounting the application

Source: https://docs.solidjs.com/solid-start/v2/reference/entrypoints/entry-client

The standard way to mount the StartClient component to a DOM element.

```tsx
mount(() => <StartClient />, element);
```

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

### Initialize Tailwind CSS configuration

Source: https://docs.solidjs.com/guides/styling-components/tailwind-v3

Run the init command to generate tailwind.config.js and postcss.config.js files.

```sh
npx tailwindcss init -p
pnpx tailwindcss init -p
yarn dlx tailwindcss init -p
bunx tailwindcss init -p
dpx tailwindcss init -p
```

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

### Install Tailwind CSS dependencies

Source: https://docs.solidjs.com/guides/styling-components/tailwind

Install tailwindcss, @tailwindcss/postcss, and postcss as development dependencies. Multiple package managers are shown: npm, pnpm, yarn, bun, and deno.

```sh
npm i tailwindcss @tailwindcss/postcss postcss -D
pnpm i tailwindcss @tailwindcss/postcss postcss -D
yarn add tailwindcss @tailwindcss/postcss postcss -D
bun i tailwindcss @tailwindcss/postcss postcss -d
deno add npm:tailwindcss @tailwindcss/postcss postcss -D
```

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

### Install Firebase CLI with various package managers

Source: https://docs.solidjs.com/guides/deployment-options/firebase

Use one of these commands to install the Firebase CLI globally. Choose the command that matches your preferred package manager.

```sh
npm i firebase-tools -g
```

```sh
pnpm i firebase-tools -g
```

```sh
yarn add firebase-tools -g
```

```sh
bun i firebase-tools -g
```

```sh
deno add npm:firebase-tools -g
```

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

### Basic usage of unwrap

Source: https://docs.solidjs.com/reference/store-utilities/unwrap

Demonstrates how to unwrap a subtree from a store created with createStore.

```ts
import { createStore, unwrap } from "solid-js/store";

const [state] = createStore({ user: { name: "John" } });
const user = unwrap(state.user);

user.name = "Jane";
```

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

### Install TypeScript with various package managers

Source: https://docs.solidjs.com/configuration/typescript

Install TypeScript as a dev dependency using npm, pnpm, yarn, bun, or deno. Choose the command matching your package manager.

```sh
npm i typescript -D
pnpm i typescript -D
yarn add typescript -D
bun i typescript -d
deno add npm:typescript -D
```

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

### Basic usage of Style

Source: https://docs.solidjs.com/solid-meta/reference/meta/style

Example showing how to use the Style component within a MetaProvider to apply CSS rules.

```tsx
import { MetaProvider, Style } from "@solidjs/meta";

export default function Root() {
	return (
		<MetaProvider>
			<Style>{`
          p {
            color: #26b72b;
          }
        `}</Style>
		</MetaProvider>
	);
}
```

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

### Dynamic component example

Source: https://docs.solidjs.com/reference/components/dynamic

Example showing how to use Dynamic to render different components based on a signal. The component prop is set to views[selected()], and the label prop is forwarded to the rendered component.

```tsx
import { createSignal } from "solid-js";

const views = {
	red: (props: { label: string }) => (
		<p style={{ color: "red" }}>{props.label}</p>
	),
	blue: (props: { label: string }) => (
		<p style={{ color: "blue" }}>{props.label}</p>
	),
};

function App() {
	const [selected, setSelected] = createSignal<keyof typeof views>("red");

	return (
		<>
			<button onClick={() => setSelected("red")}>Red</button>
			<button onClick={() => setSelected("blue")}>Blue</button>

			<Dynamic component={views[selected()]} label="Selected view" />
		</>
	);
}
```
Tokens:
Raw