The grand finale: deploying to the internet

Get your whole app onto the internet – and look back on the journey from your first <h1> to here.

The last step of the journey

Your app runs on localhost, on your own computer. The Master’s final skill: getting it out to real addresses. The frontend and backend get deployed separately – exactly why we built them apart in the first place.

Deploying the frontend (React)

Vite can turn your app into finished files with one command:

npm run build

This creates a dist/ folder – plain HTML, CSS, and JavaScript. And you already know where to put it: it’s a static website, just like in Level 1!

GitHub Pages – upload the contents of dist/ to a repository, the way you know from Level 1.
Or more conveniently, Netlify / Vercel – free, you connect them to your GitHub account, and they deploy automatically with every change. Try one of them out with a parent; the guided setup will walk you through it in just a few clicks.

Deploying the backend (Node.js)

A server needs a computer that stays on all the time. That’s what services like Render or Railway are for – they have free tiers that are enough for a school project:

Upload the my-server folder to its own repository on GitHub (without node_modules – that gets installed on the server automatically).
On render.com (with a parent), choose New → Web Service, connect the GitHub repository, and set: Build Command npm install, Start Command node server.js.
Render will give you an address like https://my-server.onrender.com. Try .../api/messages in your browser – your API is live on the internet!
One last detail: in the frontend, replace every http://localhost:3900 with the new server address, and deploy the frontend again.

⚠️

Before you let the guestbook out into the world, think like a guard: anyone on the internet can find it. Keep the message-length checks on the server (you have them from the last lesson!), never display messages as raw HTML (React protects you from this automatically – another reason to use it), and agree with a parent to check the book from time to time. Big websites have whole teams for this – it’s called moderation.

🏆 Congratulations, Master!

Take a moment to look back at where you started:

Level 1: an empty file → <h1>It works!</h1> → a whole website of HTML and CSS on GitHub Pages.
Level 2: variables, conditions, functions → dark mode, a gallery, a quiz, a form.
Level 3: the terminal, Node.js, React, components, state, Express, an API → a full-stack app on the internet.

What you know now is the real foundation of the web developer’s craft. Not a toy version – the actual foundation. The same tools, the same processes, the same way of thinking as in real companies.

Where to go next?

A few directions that follow naturally from here:

Databases – so messages survive a server restart (SQLite is the friendliest place to start).
TypeScript – JavaScript with error-checking; standard in companies.
Git in the terminal – git add, git commit, git push instead of uploading files by hand.
Your own idea – the best teacher there is. An app for your class? A tournament bracket for your club? Now you know how to build it.

✅

Check yourself (and farewell): Both the frontend and backend are running at public addresses, and the guestbook accepts messages from around the world. Send the address to your family – and don’t forget to tell them you built the whole thing with your own two hands. 🚀

What to take away from this lesson

Frontend: npm run build → static files → GitHub Pages/Netlify/Vercel.
Backend: a GitHub repository → Render/Railway → a public API address → replace localhost in the frontend.
A public app is a responsibility: server-side checks and an adult keeping an eye on things.