Skip to main content
This guide assumes that you have already setup React and Tailwind CSS in your Vite app. If you haven’t, please follow the Vite and Tailwind CSS installation guides.

​
Install Subframe

Run the following command in the root of your repository to install Subframe and configure your project: 
npx @subframe/cli@latest init

​
Configure Vite to use import aliases

  1. Configure the compilerOptions in the tsconfig.app.json file so Typescript understands your import aliases.
{
    "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"]
}
  1. Run npm install -D @types/node and then update vite.config.ts so Vite can resolve paths without error:
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"),
        }
    }
})

​
Troubleshooting

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