Deploy the site for free

Your site works on your laptop, but nobody else can see it. In this lesson you put the Brew & Bean website on the internet for free, with a public link you can send to friends, add to your resume and open in an interview. You will build the site for production, push the code to GitHub, deploy it to a free host, fix the one problem every single-page app has (refreshing on /menu), and learn how to update it.

Start from: the project at the end of *Make it responsive, accessible and fast*, with all changes committed. You also need a free GitHub account (github.com).

When you run npm run dev, Vite serves your site only on your own computer. To share it you need two things:

1. A build. npm run build turns your React code into a folder called dist with plain HTML, CSS and JavaScript files. These are static files: no server code runs. Any host that can serve files can serve your site. 2. A host. A company's computers that serve those files to anyone who asks, at a public address.

Because our site has no backend yet, it is a static site. That is why hosting can be free. In the last project lesson of this track we deploy the API and connect the two.

Always build on your own computer before you deploy. If the build fails here, it will fail on the host too, and you will see the error faster.

npm run build
npm run preview

build creates the dist folder. preview serves it locally so you can click through the real production version.

Open the preview address and click through the site: Home, Menu, add an item, Cart, place a demo order. Fix anything broken before moving on.

Two things to know about dist: it is generated, so it should not be committed to Git (Vite's .gitignore already excludes it), and every deploy rebuilds it from your source code.

Our site has only one real HTML file, index.html. The router shows the right page by reading the address. That works when you click links. But if someone opens https://your-site/menu directly, or refreshes the Menu page, the host looks for a file called menu, finds nothing and shows its own 404 page.

The fix is a rewrite rule: "for any address, send index.html and let React decide". Every host has its own way to say this. Create the file below. Vite copies everything in public/ to dist as it is.

/*  /index.html  200

A rule for Netlify. The first part is the pattern (every path), the second is the file to send, 200 means it is a rewrite (the address bar does not change).

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

Put it in the project root, next to package.json.

Modern hosts deploy straight from a GitHub repository: you push code, they build and publish it. This also gives you a backup and a public portfolio.

git add .
git commit -m "Add redirects for deployment"
git branch -M main
git remote add origin https://github.com/[your-username]/brew-and-bean.git
git push -u origin main

Replace [your-username]. If GitHub asks you to sign in, follow the browser window it opens.

Several hosts offer a free plan for static sites. We show Netlify because its steps are simple, and then list alternatives. Plans and limits change, so check the host's pricing page. Note that some free plans are for personal, non-commercial use only, which matters if you later build a site for a real shop.

From now on, deploying is just Git. Change a file, commit and push. The host notices the push, rebuilds and publishes the new version. If the build fails, the old version stays online, which is a nice safety net.

git add .
git commit -m "Change opening hours"
git push

Wait for the host to finish the build, then refresh the live site. You may need a hard refresh (Ctrl+Shift+R) to skip the browser cache.

My React (Vite) site builds on my computer but fails when I deploy it to [Netlify / Vercel / Cloudflare Pages]. This is the build log from the host:

<log>
[paste the part of the log around the first error]
</log>

My build command is `npm run build` and my publish directory is `dist`.

Explain what went wrong in plain English, list the 2 or 3 most likely causes in order, and tell me how to check each one before changing anything.

What to expect: Read the first error in the log, not the last. The last lines are often just consequences. Check the cause yourself before you accept the fix.

In the API lessons you will connect this site to a backend with a setting such as VITE_API_URL. Vite exposes only variables whose names start with VITE_ to the browser, and you set them in the host's settings, not in committed files. Remember this rule: anything in a front-end build is public. Anyone can open DevTools and read it. So never put a secret key (a database password, a paid API key) in a VITE_ variable. Secrets belong on the server.

Add the live link to the top of a short README.md in your repository, to your resume and to your GitHub profile. In an interview you can say: "I planned it with a spec, built it in small steps with AI assistance, reviewed and tested every step, made it responsive and accessible, and deployed it." That is a strong answer. Be ready to explain any file in the project; if you can't, ask the AI to explain it and write the explanation in your own words.