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

#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

hieunh1801 profile image

react-hook-form demo

Nguyễn Hữu Hiếu -

thisweekinjavascript profile image

TC39 JavaScript Updates, TypeScript 5.7 Beta, Node.js v20.18.0 and more

James -

prateek_kr profile image

How to download a file in Angular using document API

Prateek Kr -

prashant-ardeshana profile image

#3 How to fetch the store details and print to the fronted using react Next.

Prashant Ardeshana -