| # 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 |
|
|
|
|
|
|
| 1. Install dependencies: |
| `npm install` |
| 2. Set the `GEMINI\_API\_KEY` in [.env.local](.env.local) to your Gemini API key |
| 3. 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! |
|
|
|
|
