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 uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
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...
},
},
])This project includes a frontend chat UI (src/pages/components/GeminiChat.tsx) that expects a backend proxy endpoint at /api/gemini.
Important: do NOT put your Gemini (Google) API key in the frontend. Create a simple server route that takes a POST with { prompt } and calls the Gemini API server-side using your secret key. The server should return a JSON object like { text: "assistant response" }.
Example (Node/Express) minimal proxy:
// server.js (example)
// npm install express node-fetch
const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.json());
app.post('/api/gemini', async (req, res) => {
const { prompt } = req.body;
try {
const resp = await fetch('https://api.example.gemini', {
method: 'POST',
headers: { 'Authorization': `Bearer ${process.env.GEMINI_API_KEY}`, 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
});
const json = await resp.json();
// adapt to your Gemini response shape; return a simple { text }
res.json({ text: json?.text ?? JSON.stringify(json) });
} catch (err) {
console.error(err);
res.status(500).send('upstream error');
}
});
app.listen(3000);Set your environment variable locally before running the server:
Windows PowerShell example:
$env:GEMINI_API_KEY = 'sk-...'
node server.jsOr add it to your hosting provider's environment variables.
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// 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...
},
},
])