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
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"]
}
}
Top comments (0)