> Source URL: /unit-3/project-paths/yeoram-k/yeoram-k-2026-04-23.guide # 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`: ```bash 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: ```yaml 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: | Line | What it does | | -------------------- | --------------------------------------------------- | | `type: web` | Tells Render this is a website | | `name: workout-calc` | The name that shows up on Render's dashboard | | `env: python` | Tells Render your app is Python | | `plan: free` | Uses the free tier (no credit card needed) | | `buildCommand` | Installs your packages from `uv.lock` | | `startCommand` | Starts your app using gunicorn through `uv` | | `autoDeploy: true` | Deploys automatically every time you push to GitHub | 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](https://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](https://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`: ```bash 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 ``: ```html ``` ### "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 | What | Value | | -------------------- | -------------------------------------------------------------------------------------------------------- | | **Your repo** | [github.com/fu-cs-121/final-project-Yeoram-Kang](https://github.com/fu-cs-121/final-project-Yeoram-Kang) | | **Render dashboard** | [dashboard.render.com](https://dashboard.render.com) | | **Build command** | `uv sync --frozen && uv cache prune --ci` | | **Start command** | `uv run gunicorn app:app` | | **Live URL** | `https://workout-calc.onrender.com` (or whatever Render assigns) | --- ## Related Resources - [Flask Setup Guide](../../resources/flask-setup.guide.md) - [Checkpoint 3 Instructions](../../projects/final-project-checkpoint-3.project.md) --- ## Backlinks The following sources link to this document: - [April 23 — Deploy to Render](/unit-3/project-paths/projects.path.llm.md) - [April 23 -- Deploy to Render](/unit-3/project-paths/yeoram-k/yeoram-k.path.llm.md) - [April 23 - Deploy to Render](/unit-3/projects/showcase/yeoram-k.project.llm.md)