Merge pull request #16 from netlify-templates/tb/update

updated README.md

Author: TomasBankauskas

.env.example

@@ -6,4 +6,6 @@ VITE_CONVEX_URL=your-convex-deployment-url-here
 
 # Sentry configuration
 VITE_SENTRY_DSN=your-sentry-dsn-here
-SENTRY_AUTH_TOKEN=your-sentry-auth-token-here
+SENTRY_AUTH_TOKEN=your-sentry-auth-token-here
+
+#Important! Never commit your `.env` file to version control as it contains sensitive information.

README.md

@@ -18,13 +18,14 @@ A modern chat template built with TanStack Router and Claude AI integration feat
   - [Prerequisites](#prerequisites)
 - [Getting Started](#getting-started)
   - [Local Setup](#local-setup)
+  - [Local Setup with Netlify Dev](#local-setup-with-netlify-dev)
   - [Troubleshooting](#troubleshooting)
   - [Building For Production](#building-for-production)
 - [Styling](#styling)
 - [Error Monitoring](#error-monitoring)
 - [Environment Configuration](#environment-configuration)
   - [Anthropic API Key](#anthropic-api-key)
-  - [Convex Configuration](#convex-configuration-optional)
+  - [Convex Configuration (Optional)](#convex-configuration-optional)
 - [Routing](#routing)
   - [Adding A Route](#adding-a-route)
   - [Adding Links](#adding-links)
@@ -142,6 +143,34 @@ Follow these steps to set up and run the project locally:
 
    The application should now be running at [http://localhost:3000](http://localhost:3000)
 
+### Local Setup with Netlify Dev (Recommended)
+
+You can also use [Netlify Dev](https://www.netlify.com/products/dev/) to run your application locally with Netlify's full functionality:
+
+1. **Install Netlify CLI globally** (if you haven't already)
+   ```bash
+   npm install -g netlify-cli
+   ```
+
+2. **Link your Netlify site** (optional)
+   ```bash
+   netlify link
+   ```
+   This will connect your local project to a Netlify site. If you haven't created a Netlify site yet, you can skip this step.
+
+3. **Start the development server with Netlify Dev**
+   ```bash
+   netlify dev
+   ```
+   This will:
+   - Start your local development server (similar to `npm run dev`)
+   - Load your Netlify environment variables
+   - Provide local versions of Netlify Functions (if any)
+   - Simulate the Netlify production environment locally
+
+4. **Access your site**
+   The application will be available at [http://localhost:8888](http://localhost:8888) by default.
+
 ### Troubleshooting
 
 - **Node.js version**: Ensure you're using Node.js v20.9 or higher. You can check your version with `node -v`.
@@ -197,6 +226,8 @@ If the Sentry environment variables are not defined, the application will run wi
 
 ## Environment Configuration
 
+**Important**: Never commit your `.env` file to version control as it contains sensitive information. The `.env` file is already included in the project's `.gitignore` file to prevent accidental commits.
+
 ### Anthropic API Key
 
 You can generate and manage your Anthropic API keys through the [Anthropic Console](https://console.anthropic.com/login).

src/routes/index.tsx

@@ -259,9 +259,9 @@ function Home() {
       {/* Main Content */}
       <div className="flex flex-col flex-1">
         {!isAnthropicKeyDefined && (
-          <div className="w-full max-w-3xl px-2 py-2 mx-auto mt-4 mb-2 font-medium text-center text-white bg-orange-500 rounded-md">
-            <p>This app requires an Anthropic API key to work properly.</p> 
-            <p>Update your <code>.env</code> file or get a <a href='https://console.anthropic.com/settings/keys' className='underline'>new Anthropic key</a>.</p>
+          <div className="w-full max-w-3xl px-2 py-2 mx-auto mt-4 mb-2 font-medium text-center text-white bg-orange-500 rounded-md text-sm">
+            <p>This app requires an Anthropic API key to work properly. Update your <code>.env</code> file or get a <a href='https://console.anthropic.com/settings/keys' className='underline'>new Anthropic key</a>.</p>
+            <p>For local development, use <a href='https://www.netlify.com/products/dev/' className='underline'>netlify dev</a> to automatically load environment variables.</p>
           </div>
         )}
         {error && (