How to Deploy Your First Web App for Free

Every week a student shows me a GitHub repo and says "I made this." Then I open the repo on my phone and… the code is trapped there. It runs on their laptop and nowhere else. Code that runs only on your laptop is a portfolio that cannot be seen. The missing step is almost always the same: they never deployed. The fix is free hosting that gives you a live URL in minutes.

You can deploy a working web app for free today. Put the frontend on Vercel or Netlify after pushing to GitHub; the deployment takes about 5 minutes. Put the Node or Python backend on Render plus a temporary free Postgres database. Then share the link. This post walks you through the exact flow, the free-tier limits that bite students, and the mistakes that block a live URL.

Which free host should you pick?

Match the host to the job. Vercel and Netlify for a static frontend. Render for a server backend or a Postgres database. Vercel and Netlify are always-on for static files, so the site loads instantly. Render's free tier sleeps after 15 minutes without traffic, which is a bad fit for a landing page that should appear fast.

You do not have to pick one. A common free setup is a frontend on Vercel and an API plus database on Render. Each service stays inside its strength. Here is the split at a glance:

I have used all three on student projects. The combination above is the least trouble.

How do you deploy a frontend on Vercel?

Connect your GitHub repo and Vercel does the rest.

Create a free account at vercel.com using your GitHub login. Click "Add New" then "Project". Import the repository that holds your frontend code. Vercel detects the framework automatically, whether it's React, a static site generator, or plain HTML. Click "Deploy" and wait a minute. You get a live URL like your-app.vercel.app.

From then on, every push to the main branch triggers a new deployment. You don't touch the command line.

• No credit card required for the free Hobby plan. See Vercel's Hobby plan details.
• Includes a high monthly limit on deployments and edge requests. Exceeding a limit pauses that feature until the next month.
• The free plan is personal and non-commercial.

Specs are from Vercel's official pricing page.

What is the limit on Netlify's free plan?

Netlify's free tier gives you 100 GB of bandwidth and 300 build minutes per month. That's enough for a few thousand visitors a month. Bandwidth resets monthly. Build minutes also reset monthly.

Deploying is similar. Connect a GitHub repo, set the build command if your site needs one, and click "Deploy Site". You get a URL like your-app.netlify.app. You can also drag and drop a folder of static files into the Netlify dashboard; no Git repo needed for a one-off test.

One trap: Netlify has a free tier for serverless functions (125,000 requests per month), but the page loads are served from a global CDN, which is good for static files. Use it for the frontend.

Numbers come from Netlify's free plan announcement.

How do you deploy a Node or Python backend on Render?

Push your backend to GitHub and create a new Web Service on Render.

In the Render dashboard click "New" and choose "Web Service". Connect your repository. Render needs two things: the build command and the start command. For Node, that's often npm install and npm start. For Python with Flask, it's pip install -r requirements.txt and gunicorn app:app. Render reads these from the dashboard fields, not from your code, so fill them correctly.

# Node example
Build command: npm install
Start command:  npm start
# Python (Flask) example
Build command: pip install -r requirements.txt
Start command:  gunicorn app:app

Render builds your app and gives you a live URL for the API. From then on, every push redeploys. The free tier includes 750 hours of runtime per month. A service that runs all month uses about 720, so it fits.

Why does your free Postgres database disappear after 30 days?

Render's free Postgres is deleted 30 days after creation, and the data goes with it. Render gives you a 14-day grace period after the 30 days to export your data before it is deleted. But you still need somewhere else to put it. This catches most students.

The free database is meant for trying a project, not for hosting a permanent production app. After the 30 days, you either pay $7 per month or you create a fresh database and re-run your migrations. Your code keeps working, but the data resets.

1. Set a calendar reminder for day 25.
2. Export your data using pg_dump.
3. Decide: pay $7 for the database or accept the reset.

If you need a database beyond the first month for free, Supabase and Neon both offer free Postgres tiers without a time limit. Render's free tier documentation explains the 30-day policy in full.

What common mistakes stop students from getting a live URL?

Most failures are not code failures; they are configuration mistakes. Here are the four mistakes I see every term.

Wrong start command. Render expects a command that starts your server. node index.js works. A start command that remains empty fails the build. Double-check the start command field before clicking "Create".

Hardcoded localhost links. Your frontend calls http://localhost:3000 for its API. On the live site, that URL points at the visitor's own machine, which has no server running. Replace it with your Render URL.

Environment variables missing. Your database password or API key is in your code or your local .env file. On Render, you have to set it in the "Environment" tab of your service before the app can talk to the database.

Ignoring the CORS error. The browser blocks a request from your-app.vercel.app to your-api.onrender.com unless the backend sends the right header. Add the Flask-CORS library or the Express cors middleware and allow your frontend's origin.

How do you show a working app to someone else today?

Deploy the frontend first, then the backend, then connect them. Do not do all three at once.

1. Push your frontend to GitHub and deploy it on Vercel or Netlify. You get a URL now.
2. Push your backend to GitHub and deploy it on Render. Then curl or open your Render URL to confirm the API responds.
3. Create the free Postgres database on Render and add the connection string to your backend's environment variables.
4. Update your frontend's API endpoint from localhost to the Render URL. Push again.

Once the frontend loads and shows data from the database, everything is connected. Send that link in a message. That is a complete portfolio piece you can point to in an interview or a job application.

The fastest way past the free-tier traps is to have a deadline for showing the app to one person. Set that date before you start, and the deploy loses its mystery.