Deploy Your Workout Weight Calculator to Render

This guide walks you through putting your app on the internet so anyone can visit it. You will use Render, a free hosting service that connects to your GitHub repo. Every time you push new code from Codespaces, Render will automatically update your live site.

By the end you will have a real URL like https://workout-calc.onrender.com that you can share with anyone.

Before You Start

Make sure these are true:

• Your app runs in Codespaces when you type uv run flask --app app run --debug and you can see the form in the browser.
• You have an app.py file in the root of your project (not inside a folder), next to weights.py.
• You have a templates/ folder with base.html and index.html next to app.py.
• The form submits and shows a workout card (main lift + accessories) without crashing.

If your app does not run yet, fix that first. This guide is only for apps that already work.

Step 1 — Make Sure Dependencies Are in uv

Render can use the same uv setup you use in Codespaces. That means your dependencies should live in pyproject.toml and uv.lock.

1. In the terminal, install gunicorn with uv:

uv add gunicorn

gunicorn is a production server that Render uses to run your app (instead of the simple dev server you use locally).

2. Confirm that pyproject.toml and uv.lock are in the same folder as app.py — not inside templates/ or any other folder.

Step 2 — Create render.yaml

This file tells Render exactly how to build and start your app. Without it you would have to type all of this into the Render website by hand.

1. Create another new file in the same root folder as app.py.
2. Name it exactly: render.yaml
3. Paste this in and save:

services:
  - type: web
    name: workout-calc
    env: python
    plan: free
    buildCommand: uv sync --frozen && uv cache prune --ci
    startCommand: uv run gunicorn app:app
    autoDeploy: true

Here is what each line means:

The start command uv run gunicorn app:app means: "run the variable named app inside the file app.py using the packages from this uv project." Both halves must match your code. Yours do — app.py contains app = Flask(__name__).

Step 3 — Push Your Changes to GitHub

Now you need to send these files to GitHub so Render can see them.

1. Click the Source Control icon in the left sidebar (it looks like a branch/fork shape — the third icon from the top).
2. You should see render.yaml listed under Changes. You may also see pyproject.toml and uv.lock if uv add gunicorn changed them.
3. Click the + button next to each changed file to stage it (this tells Git you want to include it).
4. In the Message box at the top, type: add render deploy files
5. Click the Commit button (the checkmark).
6. Click Sync Changes to push your code up to GitHub.

If Codespaces asks you to confirm, click OK.

Your deploy files are now on GitHub. You can verify by going to your repo at github.com/fu-cs-121/final-project-Yeoram-Kang and checking that pyproject.toml, uv.lock, and render.yaml appear in the file list.

Step 4 — Create a Render Account

1. Open a new browser tab and go to render.com.
2. Click Get Started for Free (or Sign Up).
3. Choose Sign up with GitHub. This is the easiest option because Render will already be connected to your code.
4. GitHub will ask you to authorize Render. Click Authorize Render.
5. You may need to grant Render access to the fu-cs-121 organization so it can see your repo. If you see a screen asking about organization access, make sure fu-cs-121 is checked, then click Grant or Approve.

You now have a Render account connected to your GitHub.

Step 5 — Create a Web Service on Render

1. On the Render dashboard, click the New + button (top right area).
2. Choose Web Service.
3. Render will show a list of your GitHub repos. Find final-project-Yeoram-Kang and click Connect.
   • If you do not see it, click Configure account and make sure Render has access to the fu-cs-121 organization.
4. Render should auto-fill most settings from your render.yaml. Double-check these:
   • Name: workout-calc (or whatever you want your URL to be)
   • Environment: Python
   • Build Command: uv sync --frozen && uv cache prune --ci
   • Start Command: uv run gunicorn app:app
   • Plan: Free
5. Click Create Web Service.

Render will now start building your app. This takes a minute or two.

Step 6 — Watch the Deploy and Test Your App

1. After clicking Create Web Service you will see a log of everything Render is doing. Look for messages like:
   • Running 'uv sync'...
   • Build successful
   • Your service is live
2. Once the deploy finishes, Render shows your live URL near the top of the page. It will look something like: https://workout-calc.onrender.com
3. Click that link. You should see your Workout Planner — the same form you see in Codespaces, but now on the real internet.
4. Run through the full flow to make sure everything works:
   • Pick a unit (Pounds or Kilograms).
   • Pick one of the 4 exercises (Deadlift, Squat, Bench Press, Overhead Press).
   • Pick a goal (Strength, Hypertrophy, or Endurance).
   • Enter a 1RM like 225 and click Calculate.
   • Confirm the styled workout card shows the main lift and accessories with weights.
   • Click the Back link to return to the form.
   • Try submitting a blank or negative 1RM — you should see the friendly red error message, not a crash.

If something goes wrong, skip down to the Troubleshooting section below.

Step 7 — How Updates Work From Now On

Render is set to auto-deploy your app. That means the workflow going forward is simple:

1. Edit your code in Codespaces like you normally do.
2. Commit your changes (Source Control → type a message → click Commit).
3. Sync Changes to push to GitHub.
4. Render automatically picks up the change and redeploys your app. You do not need to go to the Render website.

Your live site updates in about 1–2 minutes after you push. You can watch the progress on your Render dashboard if you want, but you do not have to.

Edit code → Commit → Sync → Render auto-deploys → Live site updates

That's it. Every time you improve the Workout Weight Calculator and push the code, the world sees the new version.

Troubleshooting

"ModuleNotFoundError: No module named 'flask'"

Your pyproject.toml is missing a package, or uv.lock was not committed. In Codespaces, add the missing package with uv:

uv add package-name

For example, use uv add flask or uv add gunicorn. Then commit pyproject.toml and uv.lock, push, and Render will rebuild.

"Application failed to respond" or the page won't load

This usually means the start command is wrong. Go to your Render dashboard → your service → Settings, and check that the Start Command is:

uv run gunicorn app:app

The first app is your filename (app.py). The second app is the Flask variable inside that file (app = Flask(__name__)). Both must match.

The app loads but looks unstyled (no colors, no layout)

Your Tailwind CSS comes from a CDN link in templates/base.html. This should work fine on Render since it loads from the internet. Check that your base.html still has this line in the <head>:

<script src="https://cdn.tailwindcss.com"></script>

"No such file or directory: templates/index.html"

Make sure your templates/ folder is committed to GitHub. In the Source Control panel, check that templates/base.html and templates/index.html are pushed. If they show under Changes, stage and commit them.

Render says "Build failed" but you don't know why

Read the full build log on the Render dashboard. Look for red text or lines starting with ERROR. The most common cause is a missing dependency in pyproject.toml or a missing uv.lock. If your app imports something besides flask, add it with uv add package-name, then commit and push both pyproject.toml and uv.lock.

The free plan is slow to start

Render's free tier puts your app to sleep after 15 minutes of no traffic. The first visit after it sleeps takes 30–60 seconds to wake up. This is normal. After it wakes up, it stays fast until it goes idle again.

Quick Reference

Related Resources

• Flask Setup Guide
• Checkpoint 3 Instructions