Skip to main content

Frontend Installation Guide

Prerequisites​

Before you begin, ensure your development environment meets the following requirements:

System Requirements​

  • Node.js: Version 20 or higher
  • React: Version 19 or higher
  • React DOM: Version 19 or higher
  • Git: Latest stable version
  • Yarn: Latest stable version
  • A modern code editor (VSCode recommended)

Required Knowledge​

  • Basic understanding of React, Tanstack and TypeScript
  • Familiarity with package managers (Yarn)
  • Basic Git knowledge

Installation Step Using Vite​

Step 1: Using Yarn​

yarn create vite

Step 2: Select a Framework​

After executing the create command, you'll be prompted to select a framework. Vite supports various frameworks including:

  • Vanilla
  • Vue
  • React
  • Preact
  • Lit
  • Svelte
  • Solid
  • Qwik
  • Angular
  • Others

For this guide, we're selecting React

Step 3: Select a Variant​

After selecting a framework, you'll need to choose a variant. For React, the options include:

  • TypeScript
  • TypeScript + SWC
  • JavaScript
  • JavaScript + SWC
  • React Router v7
  • TanStack Router

We're selecting TypeScript + SWC for this project, as it provides TypeScript support with faster compilation using SWC (a Rust-based compiler):

Step 4: Project Scaffolding​

Once you've made your selections, Vite will create a new project directory with the name you provided and scaffold the project structure.

Install Using GIT Repository​

# Clone the repository
git clone [email protected]:ox-projects/v3-ts-app.oxagry.com.git


# Navigate to the project directory
cd v3-ts-app.oxagry.com

Install Dependencies​

# Install all dependencies using Yarn
yarn install

# Start the development server
yarn run dev

The application should now be running on http://localhost:5173 (default Vite port)

Install Tanstack Router​

yarn add @tanstack/react-router @tanstack/react-router-devtools
yarn add -D @tanstack/router-plugin

Install Tanstack Form​

yarn add @tanstack/react-form

Install Tailwind CSS​

Refer: https://tailwindcss.com/docs/installation/using-vite​

Add Tailwind CSS​

yarn add tailwindcss @tailwindcss/vite

Edit vite.config.ts​

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})

Replace everything in src/index.css with the following:

@import "tailwindcss";

Adding shadcn Components​

To add a new shadcn/ui component: https://ui.shadcn.com/docs/installation/vite

Before installing Shadcn, remove the existing HTML tags styles in the index.css file

Edit tsconfig.json file​

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
}

Edit tsconfig.app.json file​

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Update vite.config.ts​

yarn add -D @types/node
# vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Run the CLI​

npx shadcn@latest init

Which color would you like to use as base color? › Slate

Create Vendor directory​

To keep the third party libraries in seperate dir we have created vendor dir: src/vendor

Add the below in components.json

  "aliases": {
    "components": "@/vendor/shadcn/components",
    "utils": "@/vendor/shadcn/lib/utils",
    "ui": "@/vendor/shadcn/components/ui",
    "lib": "@/vendor/shadcn/lib",
    "hooks": "@/vendor/shadcn/hooks"
  },
   And then manually drag and drop the src/lib directory inside /src/vendor/shadcn

# Installed components
npx shadcn@latest add button
npx shadcn@latest add dropdown-menu
npx shadcn@latest add scroll-area
npx shadcn@latest add sheet
npx shadcn@latest add input
npx shadcn@latest add form
npx shadcn@latest add card
npx shadcn@latest add table
npx shadcn@latest add avatar
npx shadcn@latest add dialog
npx shadcn@latest add tooltip
npx shadcn@latest add sidebar
npx shadcn@latest add collapsible

Install ApolloClient​

yarn add @apollo/client graphql

Install zod​

 yarn add zod

Troubleshooting​

Common Issues​

  1. Dependency Installation Errors

    • Clear yarn cache and retry
    yarn cache clean
    yarn install

Additional Resources​

Note: This documentation will be updated as the project evolves and new features are added.