Run and deploy your AI Studio app
This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/48983e54-faea-404c-9ee2-ec652ce66c0b
Run Locally
Prerequisites: Node.js
- Install dependencies:
npm install - Set the
GEMINI\_API\_KEYin .env.local to your Gemini API key - Run the app:
npm run dev
3. Netlify Redirect Readiness
Vite-based Single Page Applications (SPAs) often return a 404 Not Found error when a visitor tries to refresh or directly enter secondary URL directories like /features or /faq on Netlify.
To overcome this, we configured a dynamic Netlify rule file at /public/_redirects:
code
Text
# Netlify Redirects for Single Page Apps
/* /index.html 200
When Netlify builds your project, this is automatically bundled into your root assets. It redirects index files internally to your React Router shell so all pathways load instantly without breaking.
4. Step-by-Step Guide: How to run your project with npm & deploy to Netlify
If you are new to Node.js and npm package managers, follow these instructions to manage, preview, and host your new platform:
Step 4.1: Install Node.js & npm on your Desktop
Download the LTS (Long-Term Support) version of Node.js from the official Node.js portal.
Run the installer. It will automatically install both node and npm (Node Package Manager) onto your machine's system path.
Open your computer's terminal (Command Prompt on Windows, Terminal on macOS) and type the following keys to confirm they are installed:
code
Bash
node -v
npm -v
Step 4.2: Run the project locally
Open your terminal, navigate to the project directory folder where this application is located:
code
Bash
cd path/to/your/project-folder
Install all development packages and required libraries (react-router-dom, etc.) in one simple command:
code
Bash
npm install
Start the interactive local development server:
code
Bash
npm run dev
Your console will provide an address link (usually http://localhost:3000 or http://localhost:5173). Open this URL in any browser to preview, test, and iterate on your application.
Step 4.3: Build for production
Before serving, always compile raw TypeScript file modules into fast, optimized static browser bundles:
code
Bash
npm run build
This compilation creates a folder named dist containing clean, minified styling stylesheets, scripts, images, and your custom Netlify _redirects file.
Step 4.4: Deploying to Netlify Hosting (Free and Premium)
Deploying your finished platform takes under two minutes. You can choose either of these straightforward methods:
Run npm run build in your local computer terminal to generate the dist folder.
Sign in or create a free account at Netlify.
Navigate to Sites and scroll to the bottom page block.
Drag and drop your compiled dist folder directly into the Netlify visual web browser box. Your site will launch globally on a secure, optimized custom subdomain within seconds!
Commit and push this project codebase to a repository on GitHub, GitLab, or Bitbucket.
Go to your Netlify Dashboard and click Add New Site -> Import from Git.
Select your repository.
Configure the build parameters as:
Build Command: npm run build
Publish Directory: dist
Click Deploy. Netlify will build and release your pages globally. Whenever you push code variations to GitHub, Netlify will rebuild the application in the background automatically!