Lab 8: Introduction to
Web Applications

Part 5: Getting Started
with Render (hello world)

Links to:  Overview   Part 1    Part 2     Part 3    Part 4    Part 5    Part 6

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: 

1. Click on the "Ports" tab next to "Terminal."

2. 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.

3. 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 

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

Links to:  Overview   Part 1    Part 2     Part 3    Part 4    Part 5    Part 6