React Deployment Basics

This creates a new folder (usually named `dist` or `build`). If you look inside, you won't see your components! You will just see an `index.html` and some minified gibberish JavaScript files. **This folder contains everything your web server needs.**

### Method A: Deploying to Vercel (Recommended)
Vercel is the company behind Next.js, and they offer the best deployment experience for React developers. It connects directly to your GitHub repository.

1. Create a GitHub repository and push your React code to it.
2. Go to [vercel.com](https://vercel.com/) and sign up with your GitHub account.
3. Click **"Add New Project"**.
4. Import your GitHub repository.
5. Vercel will automatically detect that you are using Vite/React.
6. Click **"Deploy"**.

**The Magic:** Every time you `git push` new code to your repository, Vercel will automatically detect the changes, run `npm run build` on their servers, and update your live website within seconds. This is called Continuous Deployment (CI/CD).

### Method B: Deploying to Netlify (Drag and Drop)
If you don't want to use GitHub, Netlify allows manual deployments.

1. Run `npm run build` on your computer.
2. Go to [netlify.com](https://netlify.com/) and create a free account.
3. Go to your Dashboard and select "Add new site" > "Deploy manually".
4. Drag and drop your `dist` (or `build`) folder into the browser window.
5. Your site is live instantly!

## 5. Output Explanations
Once deployed, Vercel or Netlify will provide you with a live URL (e.g., `my-cool-app.vercel.app`). You can immediately share this link on your resume or portfolio. You can also purchase a custom domain (`mycoolapp.com`) and attach it for free in the settings.

## 6. Important: Client-Side Routing Fix
If your app uses React Router, you will encounter a famous bug after deploying:
If a user goes to `yourapp.com/about` and hits "Refresh", they get a **404 Not Found error**.
**Why?** Because the web server is looking for a physical file named `about.html`, which doesn't exist (remember, it's a Single Page Application with only `index.html`).

**The Fix:**
You must tell the hosting server to redirect all traffic to `index.html` so React Router can handle the URL.
- **Vercel:** Create a file named `vercel.json` in your root directory:
  ```json
  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
  ```
- **Netlify:** Create a file named `_redirects` inside your `public` folder:
  ```text
  /*    /index.html   200
  ```

## 7. Common Mistakes
- **Deploying the entire project folder instead of the `dist` folder:** If using the drag-and-drop method, deploying the root folder (with `node_modules`) will fail or expose your raw code. Only deploy the build output.
- **Forgetting API Keys (Environment Variables):** If your app uses an API key stored in `.env`, that file is excluded from GitHub. You must manually add those variables in the Vercel/Netlify dashboard settings so the server knows them during the build process.

## 8. Best Practices
- Always set up Git and connect your project to Vercel/Netlify for Continuous Deployment. It saves you from having to drag and drop files every time you fix a typo.
- Run `npm run build` locally before pushing code to ensure there are no hidden compile errors.

## 9. Exercises
1. Run `npm run build` in your local project and inspect the generated `dist` folder.
2. Sign up for a free Vercel account.

## 10. Mini Project: Deploy Portfolio App (Checklist)
Follow this checklist to deploy your final project smoothly: