DEV Community

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

Posted on • Edited on

Upscale Your React App Into Next Level

#javascript #react #professional #projectsetup

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)

Read next

keploy profile image

JSON Diff: Comparing JSON Data Effectively

keploy -

husniddin6939 profile image

Vue JS props

Husniddin6939 -

stroiman profile image

Go-DOM - 1st major milestone

Peter Strøiman -

prince_beec5ccde00b7c6c73 profile image

Smart Screen Animation using html css and javascript

Prince -