Stop 18 · DeploymentTopics · 2/9

Netlify

In short

Netlify does Git-based hosting like Vercel, and it's a favourite for static sites built with Vite, Astro or plain HTML. One small netlify.toml file can hold your whole deploy setup.

A hosting platform similar to Vercel — Git-based deploys, preview URLs, serverless functions — popular for static sites and JAMstack apps across various frameworks.

The jaadu hands a parcel and an instruction slip to a smiling post office clerk.

Think of it like this

Speed Post with clear instructions

You hand over the parcel along with a slip saying "build like this, deliver from this shelf, redirect if the address is old". netlify.toml is that slip. Netlify reads it and follows it on every deploy.

Watch it happen

Refreshing /profile on a Netlify SPA

Visitor

Netlify

dist folder

GET /profile

1/6Someone refreshes yourapp.netlify.app/profile.

The big ideas

What you need to know

Deploy previews

Each pull request gets a preview URL, and you can also deploy specific branches.

Config in a file

netlify.toml in your repo sets the build command, publish folder, redirects and headers.

Redirects and rewrites

Rules can send old URLs to new ones, or serve index.html for every route in a single-page app.

Functions for small backends

Files in netlify/functions become serverless endpoints, handy for hiding an API key.

See it in code

Walk through the code

toml

1[build]2  command = "npm run build"3  publish = "dist"4 5# Single-page app: let React Router handle every path6[[redirects]]7  from = "/*"8  to = "/index.html"9  status = 200

1/3Tell Netlify how to build the app and which folder to publish.

status = 200 makes this a rewrite, not a redirect. The URL stays the same, but Netlify serves index.html so your client-side router can show the right page.

Save yourself the pain

Common mistakes

Oops

Deploying a React Router app and getting 404 when someone refreshes /profile.

Do this instead

Add the /* to /index.html rewrite. Without it, Netlify looks for a real profile file and doesn't find one.

Oops

Setting the publish folder to build when Vite outputs to dist.

Do this instead

Check where your build tool writes files. Vite uses dist by default, Create React App used build.

Your mission

Deploy and fix the refresh bug

~25 min

Quick check

In a Netlify rewrite rule, what does status = 200 do compared with status = 301?

Go deeper

1Deploy a static or framework-based project to Netlify.
2Try a Netlify Function for a small piece of serverless backend logic.
3Compare its build/deploy workflow side by side with Vercel's.