Lab 8: Introduction to
Web Applications

Part 6: Deploy Your Repo from Step 4 on Render

Now, we'll take your pair's repo from Step 4 (the one where we added a navbar using Bootstrap) and we'll deploy it to Render.

Step 1: Update your repo from Part 4 and add to README.md

At the end of Part 4, you put a link to your webapp on GitHub in the README.md file of your lab08-name1-name2 repo.

Now,  go back to that repo you pair made in Part 4. If you created this repo from our flask-template before Sunday, August 27 then you will need to make an update to requirements.txt for compatibility with Render.

Take a look at requirements.txt. If the first line is

flask>=2.2.3

then you are good. Otherwise, if you see

flask==2.3.2

then edit this file (either through the GitHub in-browser editor, or by firing up a Codespace) and change the first line to flask>=2.2.3

Also, if you don't see a line in the file that reads gunicorn, then add this line to the bottom of the file:

gunicorn

Step 2: Deploy this app to Render

To deploy your app from Part 4 to Render, you'll follow the same steps as in Part 5, staring with Step 3.
Here's a summary:

1. Visit the Render dashboard at https://dashboard.render.com

2. Click the blue "New +" button and then click Web Service.

3. Under "Connect a repository,"  look for your pair's lab08 repo, or type lab08 in the search box to narrow things down.

4. On the next screen we need to choose an app name for Render (that no one has used before). We suggest a name such as:
   lab08-name1-name2
   spis2023-lab08-xy  (where xy are the initials of the first names of the pair partners)
   spis2023-lab08-xyz  (where xyz are the initials of the first names of the three members of the trio)

5. Don't click "Create Web Service" yet! Scroll down to "Start Command."

6. Pase the following in the box next to "Start Command":
   gunicorn main:app --log-file=-

7. Now click "Create Web Service."

8. Wait and watch the Terminal-style box on the next screen for your app to build.

9. Open the URL shown in a browser to test your deployment. Your app is ready when you see lines like:
   Aug 27 10:14:41 AM  ==> Build successful 🎉
   Aug 27 10:14:41 AM  ==> Deploying...

10. Click on "Logs" to the left. You should see some text like:

Aug 27 10:15:30 AM  ==> Starting service with 'gunicorn main:app'

Aug 27 10:15:33 AM  [2023-08-27 17:15:33 +0000] [51] [INFO] Starting gunicorn 21.2.0

Aug 27 10:15:33 AM  [2023-08-27 17:15:33 +0000] [51] [INFO] Listening at: http://0.0.0.0:10000 (51)

Aug 27 10:15:33 AM  [2023-08-27 17:15:33 +0000] [51] [INFO] Using worker: sync

Aug 27 10:15:33 AM  [2023-08-27 17:15:33 +0000] [54] [INFO] Booting worker with pid: 54

Aug 27 10:15:34 AM  Your service is live 🎉

Aug 27 10:15:34 AM  127.0.0.1 - - [27/Aug/2023:17:15:34 +0000] "GET / HTTP/1.1" 200 2484 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188"

Aug 27 10:15:35 AM  127.0.0.1 - - [27/Aug/2023:17:15:35 +0000] "GET / HTTP/1.1" 200 2484 "-" "Go-http-client/2.0"

Aug 27 10:15:35 AM  127.0.0.1 - - [27/Aug/2023:17:15:35 +0000] "GET /static/style.css HTTP/1.1" 200 0 "https://lab08-michael.onrender.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188"

Now let's test out the auto-deploy feature

1. Make a commit that would affect the text or appearance of your site and push to your repo (either using Codespaces, or even the GitHub editor)

2. Go back to the Events screen on the Render Dashboard for your app. You should see an entry (pictured below) that Deploy started, followed a few minutes later by a "Deploy live" event.

3. Reload your URL to see the change reflected on your live, deployed web app.

Step 3: THE FINAL STEP

In your lab08-name1-name2 repo, in the README.md, add a heading

# Part 6

And under that, put the URL of the deployed app on Render.

And you are finished with lab08!

Final Thoughts

Granted: there is a lot of tedious work getting started with building a web app.

However, once you've gotten past these stages, there are so many very cool things you can build.

And the cool part about building a web app is that you can share it with anyone in the world, and show off your work! 

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