> ## Documentation Index
> Fetch the complete documentation index at: https://subframe-59800133-apg-edit-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vite

> Install Subframe in Vite projects.

<Note>
  This guide assumes that you have already setup React and Tailwind CSS in your Vite app. If you haven't, please follow
  the [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project) and [Tailwind
  CSS](https://v3.tailwindcss.com/docs/installation/using-postcss) installation guides.
</Note>

### Install Subframe

Run the following command in the root of your repository to install Subframe and configure your project:

<CodeGroup>
  ```bash npm theme={null}
  npx @subframe/cli@latest init
  ```

  ```bash yarn theme={null}
  yarn dlx @subframe/cli@latest init
  ```

  ```bash pnpm theme={null}
  pnpx @subframe/cli@latest init
  ```

  ```bash bun theme={null}
  bunx --bun @subframe/cli@latest init
  ```
</CodeGroup>

### Configure Vite to use import aliases

1. Configure the `compilerOptions` in the `tsconfig.app.json` file so Typescript understands your import aliases.

<CodeGroup>
  ```json tsconfig.app.json {3-8} theme={null}
  {
      "compilerOptions": {
          "baseUrl": "./",
          "paths": {
              "@/*": [
                  "./src/*"
              ]
          },
          "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
          "target": "ES2020",
          "useDefineForClassFields": true,
          "lib": ["ES2020", "DOM", "DOM.Iterable"],
          "module": "ESNext",
          "skipLibCheck": true,

          /* Bundler mode */
          "moduleResolution": "bundler",
          "allowImportingTsExtensions": true,
          "isolatedModules": true,
          "moduleDetection": "force",
          "noEmit": true,
          "jsx": "react-jsx",

          /* Linting */
          "strict": true,
          "noUnusedLocals": true,
          "noUnusedParameters": true,
          "noFallthroughCasesInSwitch": true,
          "noUncheckedSideEffectImports": true
      },
      "include": ["src"]

  }

  ```
</CodeGroup>

2. Run `npm install -D @types/node` and then update `vite.config.ts` so Vite can resolve paths without error:

<CodeGroup>
  ```tsx vite.config.ts {7-11} theme={null}
  import { defineConfig } from "vite"
  import react from "@vitejs/plugin-react"
  import { resolve } from "node:path"

  export default defineConfig({
      plugins: [react()],
      resolve: {
          alias: {
              "@": resolve(__dirname, "./src"),
          }
      }
  })
  ```
</CodeGroup>

### Troubleshooting

If you run into any issues with the installation, refer to the [manual installation guide](/frameworks/manual) for all of the steps needed to get Subframe working in your codebase.