Lab 8: Introduction to
Web Applications
Web Applications
Part 5: Getting Started
with Render (hello world)
with Render (hello world)
If you find typos or problems with the lab instructions, please let us know.
In this part, we'll be learning how to put a simple Hello World web app online using Render.
This part just concentrates on all of the Render specific stuff. We keep the web app itself very simple so that we can just focus on the new concepts involving Render.
You can also come back later and use these same instructions (from Step 4 to the end) to convert any of your other Flask webapps into ones that you can deploy on Render.
Why Render?
You can do quite a bit building a Python Flask-based webapp in GitHub Codespaces. You may have already noticed that no one else can visit your app. There is a way around this:
Click on the "Ports" tab next to "Terminal."
Right click on the row that starts with "Application (5000)." That's the port your web server is using (to listen for incoming requests). The other port is being used for the virtual machine running your Codespace to communicate with your browser while you work in VS Code.
In the menu that appears when you right-clicked, select "Port Visibility" -> "Public." Now anyone else can visit your URL.
So now you really are hosting a webapp, but hosting it on GitHub Codespaces does have some drawbacks. Render gives us additional capabilities for hosting web apps beyond what Codespaces provides, including:
Keeping apps online longer (you may have noticed your Codespaces keep stopping)
Providing logs of errors
Providing a free database platform
In addition, Render is often used in professional development environments, especially for prototyping.
Here's the outline:
You'll create a free Render account (each pair partner should do this). We suggest using your UCSD account just to keep things simple.
You'll create a very simple flask app, first in Codespaces and see it run locally in Codespaces first
You'll then see how to connect that app to Render and get it running online.
Step 1: Create a free Render Account
Please visit render.com and signup for a free account. (Click the Get Started button in the upper right.) You can sign up using either your Google account (i.e. your UCSD one) or your GitHub account. It will be one less password to remember and one less password that can get leaked.
After going through this initial step, you'll need to go to your email and click on the link in the message from Render to confirm your account.
You'll then arrive at this page, which is called the Render Dashboard.
You'll need this page frequently, so it's a good idea to memorize the URL: dashboard.render.com
For now, you can just leave this page open. We'll need it in a later step.
Before going on:
Be sure that each pair partner (or all three in a trio) completes Step 1 individually.
You can then proceed to Step 2 with just one pair partner driving if you want.
Step 2: Open Flask project example, and fork it
Open this GitHub repo, which will take you to a very simple flask example:
https://github.com/render-examples/flask-hello-world
Once there, click the "Fork" button at the top of the page, which will create a new repo for you with the same code.
On the next screen, under "Owner *" leave the driver's personal account as the owner of the repo. We're not really doing any development with this repo, so you don't need to stick it under the SPIS organization. Also, GitHub does not allow you to set forks of public repos to private, so we also don't want to clutter up the SPIS organization's repository list.
Add your pair partner to the repo (under Settings).
There isn't much content in this repo. There's one Python file, app.py, which contains the following:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, World!'
Step 3: Create a new Render app
You are now ready to create a new app in Render.
Go back to your tab with the Render Dashboard (also linked above) and click on "New Web Service."
You need to click on the blue "Connect GitHub" button. You'll only need to do this once per person.
After you authorize GitHub, you may be sent back to the Render Dashboard. If so, click "New Web Service" again.
Scroll down past the "Connect a repository" box (we'll use this in Part 6) to the "Public Git repository" box. Paste the URL of your fork of the flask-hello-world repo and click Continue.
You'll be taken to a form with a lot of settings. The only one you need to worry about before submitting is the app name:
Naming your app
The first thing you need to do is choose a name. Note that there a few rules for Render web service names:
We suggest you use letters, numbers, and the hyphen (-). Any uppercase letters will be automatically lowercased in the URL for your app.
Must be globally unique: no other app on Render can have the same name.
To help ensure uniqueness, we suggest that you prefix your app names with your pair partner names in lowercase. For example, for this app, we suggest if your pair name is Alex-Chris, we suggest that you use alex-chris-hello as your app name.
That's it! Your hello world app has already been deployed. Click on the link at the top (which has the form https://alex-chris-hello.onrender.com) to test out your app. Note that the domain is onrender.com not render.com
We can now go to the RenderDashboard (https://dashboard.render.com) and see that our app exists:
Step 4: Make a commit
One you've established that your web app is running, we're reading to try updating our app and deploying a new commit.
Go back to your fork of the Hello World repo in GitHub. Fire up a new Codespace and open app.py. Change something in the static message output to users who visit the root URL of the domain.
Commit your work and Sync (push) it to GitHub.
However: only the most recent commit gets pushed to Render, so it's important that if we've changed anything, we need to do a commit.
If you don't remember how to make a commit, look back at Step 4 of Part 1 of this lab.
Step 5: Check automatic deployment
Try to reload your deployed web app. Do you see anything? If so, then you're done with this part!
If not, click on your web service on the Render Dashboard. You'll be taken to the Events page. Do you see a deploy reflecting the commit message and time of your recent commit? If so, wait for the deploy to finish.
If not, there may be an issue with the GitHub permissions. Try a manual deploy instead. Click the blue "Manual Deploy" button in the upper right, and then click "Deploy Latest Commit" from the dropdown menu.
Click the Logs link on the left sidebar. When you see "Your Service is Live" in the terminal output, try reloading your app again to see the new message.
Step 6: Add a link for this repo and the Render app to your README. md
Go back into your lab08-name1-name2 repo, and in the README.md, add a heading
# Part 5
And under that, put links to:
your GitHub repo for the Hello World app that you deployed to Render
the URL of the deployed app on Render (i.e. onreder.com)
Almost done!
The last step is much shorter than the previous ones, so don't worry: you are almost finished with lab08.
Let's move on to Step 6