Skip to main content

How to Deploy Your Flask Projects on Render?


Deploying a Flask application doesn’t have to mean putting everything on the same server. In this tutorial, I’ll walk through how I deployed the **Jersey City Pickleball Club (JCPC)** projects using a hybrid approach: the **JCPC website** as a static site and the **JCPC booking portal** as a dynamic Flask application on Render, while the **JCPC admin portal** continues to run on PythonAnywhere. This setup demonstrates how different parts of the same application can be deployed independently, depending on their technical requirements.

Prerequisite:

This tutorial is part of the Flask Landing Page and Reservation System Series.

📚 View the Complete Flask Landing Page and Reservation System Series

⬅ Previous Part    

Step 1: Set up GitHub


First of all, log in to your GitHub account. Then click the '+' button in the top-right corner and select the dropdown to create a new repository. Next, provide a name and add a license; here, I selected Apache License 2.0, and finally, I clicked the green button "Create Repository."

Return to the repository page. I will click "Add Files"; Dropbox will appear, and I will click "Upload File." 

Next, I will drag the files, such as app.py and folders such as the templates and static folders, one by one. Finally, click the green button to create a commit, "commit changes," or I could provide a brief description if I wanted to. 

This is a very simple way to create a repository; however, for a more complex file and folder structure, please refer to my previous tutorial here.

Step 2: Deploy static web to Render
 

Deploying the static website on Render is very easy. Since in Step 1 I created a repository in GitHub, I will continue to use the same GitHub credentials to log in to Render. 

Once on the Render dashboard, I will click the "+ New" button in the top-right corner; when the drop-down appears, I will continue to select a static site. Next, it will lead me to select the GitHub repository. So I will select "jcpc-website," as JCPC is a short form of Jersey City Pickleball Club.

Coming to the settings page, I will leave the name as the default. However, for the region, I will choose Singapore since it is close to my location, and for the published directory, I will input a period (.). A single dot (.) represents the current working directory (the root folder of my project repository). Once all is set, I will click the bottom button, "Deploy Static Site."

It will build the deployment itself. When the deployment is complete, I need to head over to the top and click the link provided. Yes, the JCPC portal is now live!


Step 3: Deploy JCPC Booking System to Render


The JCPC booking system is more complex than a simple website because it contains storage and APIs, including Stripe and QuickBooks. Illustrate it in the .env file as below.


On the other hand, I also need to include the following requirements.txt in my GitHub repository.
flask 
python-quickbooks 
intuit-oauth 
python-dotenv 
stripe
reportlab
tinydb
flask-login
requests
flask_wtf
gunicorn
Therefore, when I upload to GitHub, I need to specifically include the .env in my .gitignore file. I will tell Git not to upload this file to my GitHub because it contains my private API key and does not need to be disclosed.

However, deploying a dynamic web app is similar to the above static site, except I need to select a web service and JCPC-content Git now. In the settings page, for the region, I will select "Singapore"; the build command is "pip install -r requirements.txt," and the start command is "gunicorn app: app" 

In my advanced section, I need to copy and paste each of the key and value parameters of the Stripe and QuickBooks API here. So my app is still able to access them. Finally, I click the "deploy web service" button. After it has built completely, I can scroll up to the top and click on the link. Similarly, my web app is also live now.

---------------------------------------------------------------------------------------------------------------------------------------------------

🎁 Get Your FREE Flask Cheat Sheet

Get your FREE Flask Cheat Sheet

Get more Flask, Python automation, Docker, and HTMX tutorials delivered to your inbox.

✓ Practical coding tutorials
✓ Automation tips for SMEs
✓ New project ideas and templates

Download my FREE Flask Cheat Sheet (PDF)


---------------------------------------------------------------------------------------------------------------------------------------------------

Step 4: Deploy JCPC Admin Dashboard on Render


The requirements.txt to be included in the GitHub repository is as follows:
flask
flask-sqlalchemy
flask-admin
matplotlib
pandas
gunicorn
The deployed jcpc-admin dashboard is similar to the above booking system. Once on the Render dashboard, I will click the "+ New" button and select "web service" and "jcpc-admin Git." Both the build command and start command are the same as above; I chose the free plan. Finally, I clicked the "Deploy web service" button. When it completed the build, my admin dashboard was deployed.

Step 5:  Apply the JCPC booking URL Link to the website hero button

Once I had deployed the JCPC booking system, I could obtain its link. With this link, I can update my JCPC-website hero button. When the user clicks the button in the hero section, he/she will be directed to the JCPC booking system; this is how I connect the static and dynamic site.
<!---hero section--->
<section class="hero">
    <div class="hero-overlay">
        <div class="container text-center text-white">
            <h1 class="display-3 fw-bold">
                Jersey City Pickleball Club
            </h1>

            <p class="lead">
                Play. Compete. Connect.
            </p>

            <a class="btn btn-warning btn-lg" 
               href="https://jcpc-content.onrender.com/">
                Book a Court
            </a>
        < científicas /div>
    </div>
</section>
I will click the "Commit changes" button in GitHub, and on the Render events page, in the top-right corner, I will click the purple "Manual Deploy" button and the dropdown menu. I will continue to click "Deploy latest commit" to take effect.


The deployment result is as follows:
JCPC-website—https://jcpc-website-1zzz.onrender.com/
JCPC booking system—https://jcpc-content.onrender.com/
JCPC admin dashboard—https://jcpc-https://jcpc-admin.onrender.com

Final wrap-up
This tutorial demonstrated how to deploy the complete JCPC system on Render, with the JCPC website running as a static site and the booking portal and admin portal running as dynamic Flask applications. This setup provides a simple and centralised way to host and manage the different components of the JCPC project.
---------------------------------------------------------------------------------------------------------------------------------------------------

🚀 Continue Learning Flask & Python Automation

Get more Flask, Python automation, Docker, and HTMX tutorials delivered to your inbox.

✓ Practical coding tutorials
✓ Automation tips for SMEs
✓ New project ideas and templates

---------------------------------------------------------------------------------------------------------------------------------------------------
Need a similar system for your business? 
I build custom Flask web applications and Python automation solutions for SMEs and solopreneurs. 

---------------------------------------------------------------------------------------------------------------------------------------------------

About the Author 
Kelvin Loh is a Python developer focused on Flask, desktop applications, and business automation solutions. He shares practical tutorials and real-world coding projects to help developers and small businesses build useful applications.
Labels:

Comments

Post a Comment

Popular Posts

How to Build an Audiobook Workflow Desktop System with Python?

In this tutorial, we will build a simple audiobook player using Python and CustomTkinter. You will learn how to convert text into speech using gTTS and play it with PyGame. We will also implement play, pause, and stop controls, like those in a real audio player. By the end, you will have a clean and functional desktop audiobook app. Prerequisite: This tutorial is part of the standalone tutorial. 📚 View the standalone tutorial Preliminary   Before I begin, it is recommended to activate the virtual environment before installing the relevant dependencies. python -m venv venv venv\Scripts\activate pip install customtkinter pillow gTTS pygame CTkMessagebox pypdf Then, the following steps include setting up the file structure, app.py, and two additional folders: the uploads and media folders. The media folder contains the icons necessary to build the app; there are read, pause, and stop icons, as shown on the diagram. Step 1: Build up the app interface I have 4 sections here: the...
Post a Comment
Read more

How to Set Up PgAdmin and Adminer Using Docker Compose?

If you are new to database management with Docker, this tutorial will guide you through setting up both PgAdmin and Adminer using Docker containers. By containerising these tools, you can quickly launch lightweight and portable database management environments without installing them directly on your operating system. This approach also makes it easier to manage configurations, updates, and multiple projects across different devices.
Post a Comment
Read more