Upscale Your React App Into Next Level - Reactive Radiation - @a4arpon.me
Tags: javascript, react, professional, projectsetup
Published: 2024-03-10 17:21:39

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    
- [TanStack](https://tanstack.com/router/latest)    
- [BiomeJS](https://biomejs.dev/)    
- [Lucide Icon](https://lucide.dev/icons/)    
- [@Nextui](https://nextui.org/docs/guide/introduction)    
   
   
   
## Initiate Project With Vite   
```
bunx create-vite
```
## Install Dep     
```
bun add lucide-react react-helmet-async appwrite @nextui-org/react framer-motion @tanstack/react-router

```
## Install Dev Dep   
```
bun add --dev tailwindcss postcss autoprefixer @tanstack/router-vite-plugin @types/bun @biomejs/biome
```
   
## 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'),
    },
  },
})
```
### TypeScript config file `tsconfig.json`    
```

{
	// .... 
	// Extra for aliases
	"paths": {
      "baseUrl": ["."],
      "@/*": ["./src/*"]
    }
}
```
### Setting up Tailwind CSS in a Vite project.    
```
bunx tailwindcss init -p

```
`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()],
}
```
`index.css`    
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
`Next Theme Provider`    
```
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
```
`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"]
  }
}

```