DEV Community

Cover image for Upscale Your React App Into Next Level
Shahin Islam
Shahin Islam

Posted on • Updated on

Upscale Your React App Into Next Level

A Professional React Project Setup With BiomeJS, Bun and Vite

Intro

Like angular and vue react don't have any specific folder structure. But if you want to make a production grade web app with industry best practices. There are thousands of structures available online for react projects but today I'm teaching you another one. In this project we will choose our packages which are type safe and latest also. Listen carefully this is my own reactive project peradiam. I'm not arguing with anyone about why I use this instead of the sampler one or why I didn't use traditional packages to extend the react app. I am a huge performance freak. Every second of performance and memory byte is important for me. And I structure my project in the way that I can push updates in future without messing up with everything.

Technologies

Initiate Project With Vite

bunx create-vite
Enter fullscreen mode Exit fullscreen mode

Install Dep

bun add lucide-react react-helmet-async appwrite @nextui-org/react framer-motion @tanstack/react-router

Enter fullscreen mode Exit fullscreen mode

Install Dev Dep

bun add --dev tailwindcss postcss autoprefixer @tanstack/router-vite-plugin @types/bun @biomejs/biome
Enter fullscreen mode Exit fullscreen mode

Config Setup

Vite Config For Project vite.config.ts

// vite.config.ts

// ....
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...,
    // Split Vendor Chunk 
    splitVendorChunkPlugin(),
    // Tans Stack Router Config
    TanStackRouterVite()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

TypeScript config file tsconfig.json


{
    // Extra for aliases
    "paths": {
      "baseUrl": ["."],
      "@/*": ["./src/*"]
    }
}
Enter fullscreen mode Exit fullscreen mode

Setting up Tailwind CSS in a Vite project.

bunx tailwindcss init -p

Enter fullscreen mode Exit fullscreen mode

tailwind.config.js

const {nextui} = require("@nextui-org/react");

export default {
  content: [
    "./index.html",
    "./src/**/*.tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
}
Enter fullscreen mode Exit fullscreen mode

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Next Theme Provider

    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
Enter fullscreen mode Exit fullscreen mode

biome.json

{
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noVar": "error"
      },
      "correctness": {
        "noUnusedVariables": "warn"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentWidth": 2,
    "indentStyle": "space",
    "lineWidth": 80,
    "formatWithErrors": false
  },
  "javascript": {
    "formatter": {
      "semicolons": "asNeeded",
      "trailingComma": "es5",
      "jsxQuoteStyle": "double"
    }
  },
  "files": {
    "ignore": ["routeTree.gen.ts"]
  }
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)