Deploy and share your app

What you'll do: take the recipe finder (or any Vite + React app) from localhost to a public URL you can put on your resume and send to a recruiter.

Prerequisites: a working Vite + React project, Node.js, Git installed, and a free GitHub account. You will also create a free account on one hosting service.

Free tiers: Vercel, Netlify, Cloudflare Pages and GitHub Pages all have free plans for personal projects at the time of writing (2026). Limits and terms change, so check the pricing page of the host you choose. Commercial use is often not covered by free plans.

On your laptop, npm run dev starts a development server that rebuilds as you type. It is not meant for visitors. For production you run npm run build. Vite compiles, bundles and minifies your app into a folder of plain static files: one index.html, plus JavaScript, CSS and images. A static host simply serves that folder to anyone who asks.

So deploying = (1) build the folder, (2) give it to a host. Modern hosts connect to your GitHub repository and do both automatically every time you push code. This is a basic form of CI/CD (continuous integration and delivery).

Always check the build on your machine. Many deployment failures are build errors you would have seen locally.

npm run build
npm run preview

build creates the dist folder. preview serves dist locally, usually at http://localhost:4173, so you see what visitors will see.

git init
git add .
git commit -m "Recipe finder"
git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/recipe-finder.git
git push -u origin main

Replace YOUR-USERNAME. If Git asks for a password, GitHub now needs a personal access token or the browser sign-in flow instead of your account password.

With React Router, /recipe/52772 is not a real file. In development, Vite knows to serve index.html for every URL. On a static host, if someone refreshes on /recipe/52772 or opens a shared link, the server looks for a file called recipe/52772, finds nothing, and returns 404. The fix is a rewrite rule: 'for any path with no matching file, serve index.html and let React Router handle it'.

Each host has its own way to say this. Add the one for your host now.

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Vercel serves real files first (your JS and CSS in assets), and applies this rewrite only when no file matches.

/*    /index.html   200

Files in Vite's public folder are copied to dist unchanged. The 200 makes it a rewrite (the URL stays the same) instead of a redirect.

From now on, every git push to main triggers a new deployment automatically. Pushes to other branches get their own preview URLs, which are great for showing a change to a friend before it goes live.

GitHub Pages is free and lives next to your code, but it hosts your app under a sub-path like username.github.io/recipe-finder/. Two changes are needed: set base: '/recipe-finder/' in vite.config.js so asset URLs are right, and use HashRouter instead of BrowserRouter in main.jsx, because Pages cannot rewrite paths (URLs then look like /#/recipe/52772). Then publish the dist folder with a GitHub Actions workflow or the gh-pages package; the Vite documentation has a current step-by-step guide under Deploying a Static Site.

Apps often need settings that differ between your laptop and production, such as the API address. In Vite, variables that start with VITE_ are read from a .env file and are available as import.meta.env.VITE_NAME. On a host, you add the same variable in the project's Settings, under Environment Variables, and redeploy, because the value is baked into the files at build time.

// .env file contents:
// VITE_API_URL=http://localhost:8000

// src/config.js
export const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';

// anywhere else
// fetch(`${API_URL}/menu`)

The first two lines are the content of a separate .env file, shown as comments here. In production, set VITE_API_URL to your deployed backend address.

The browser blocks requests from one origin to another unless the server allows it. This is CORS. If your React app at https://recipe-finder.vercel.app calls your FastAPI backend at another address, the backend must list your frontend's address as an allowed origin. Browsers also block a secure (https) page from calling an insecure (http) API, so deploy the backend with HTTPS too. The recipe finder uses TheMealDB, which already allows browser requests, so it needs none of this.

Custom domain: all these hosts let you attach your own domain (for example yourname.dev) in their settings, after you buy one from a registrar and add the DNS records they show. It is optional; a .vercel.app or .netlify.app address is fine for a portfolio.

My React (Vite) app fails to deploy on [Vercel / Netlify / GitHub Pages]. Here are the last 40 lines of the build log:

[paste log]

My package.json scripts and vite.config.js are:

[paste]

Explain the first real error in simple words, what causes it, and the smallest change that fixes it. Tell me how to confirm the fix locally before pushing.

What to expect: Paste the log from the first error, not only the last line. Check the suggested fix against the host's documentation.