<<<<<<< HEAD # React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs) - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) ## React Compiler The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). ## Expanding the ESLint configuration If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Remove tseslint.configs.recommended and replace with this tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules tseslint.configs.stylisticTypeChecked, // Other configs... ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]) ``` ======= # Welcome to React Router! A modern, production-ready template for building full-stack React applications using React Router. [](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default) ## Features - 🚀 Server-side rendering - ⚡️ Hot Module Replacement (HMR) - 📦 Asset bundling and optimization - 🔄 Data loading and mutations - 🔒 TypeScript by default - 🎉 TailwindCSS for styling - 📖 [React Router docs](https://reactrouter.com/) ## Getting Started ### Installation Install the dependencies: ```bash npm install ``` ### Development Start the development server with HMR: ```bash npm run dev ``` Your application will be available at `http://localhost:5173`. ## Building for Production Create a production build: ```bash npm run build ``` ## Deployment ### Docker Deployment To build and run using Docker: ```bash docker build -t my-app . # Run the container docker run -p 3000:3000 my-app ``` The containerized application can be deployed to any platform that supports Docker, including: - AWS ECS - Google Cloud Run - Azure Container Apps - Digital Ocean App Platform - Fly.io - Railway ### DIY Deployment If you're familiar with deploying Node applications, the built-in app server is production-ready. Make sure to deploy the output of `npm run build` ``` ├── package.json ├── package-lock.json (or pnpm-lock.yaml, or bun.lockb) ├── build/ │ ├── client/ # Static assets │ └── server/ # Server-side code ``` ## Styling This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer. --- Built with ❤️ using React Router. >>>>>>> 22cf466e1d226ca3fee06d701059273548d3bbb0