Creating a Flask App: My issues as a beginner and how I fixed them.

#webdev #beginners #python #learning

Hi everyone, Eworitse Egbejule here. This is my first blog post and I want to share my experience with creating a flask app; the issues I had while making it and how I fixed them.

Flask is a lightweight and flexible microframework used for building web apps in Python with minimal setup. Here's a sample code of a simple flask web app:

My app is called Microblog and it's a simple blog flask app with it's frontend self written in HTML and CSS.

I followed these steps to build my app:

Step 1: Design the Frontend

I started by creating the HTML and CSS code for a simple blog interface.
The blog lets users record notes in the form of a diary.
The entries are then presented back to the user in a clean, user-friendly format.

Step 2: Develop the Backend

I followed a tutorial to build the Flask backend. Flask is perfect for this due to its simplicity and flexibility. *This stage involved setting up routes, handling user inputs, and managing the data.

Step 3: Handle Backend Hosting Issues

The main challenge came with hosting the site. Initially, I attempted to host it on Render.
I connected it to my GitHub repo here, but encountered multiple errors.
The errors were frustrating, and a friend suggested switching to Vercel. Even on Vercel, I faced troubleshooting issues.

Steps I took to fix my deployment issues:

Check app.py File: I had to check if my Flask app was correctly instantiated as app.

    from flask import Flask

    app = Flask(__name__)

    if __name__ == '__main__':
        app.run()

Updated the gunicorn Command: I modified the start command in my deployment settings to:

    gunicorn app:app

Had to ensure correct Directory Structure: I checked to make sure that app.py is in the root directory of your project.

I created a vercel.json Configuration File:

    {
      "version": 2,
      "builds": [
        {
          "src": "app.py",
          "use": "@vercel/python"
        }
      ],
      "routes": [
        {
          "src": "/(.*)",
          "dest": "app.py"
        }
      ]
    }

Push to GitHub and Link to Vercel: After fixing the issues I pushed my code to GitHub. Then I linked my GitHub repository to Vercel for automatic deployment.

Deployment: Making It Live

I deployed the application on Vercel and pushing my code to GitHub, followed by linking the repository to Vercel for automatic deployment. You can check out my web app here at The Microblog.

HNG 11 Backend Internship

The process of building this microblog application strengthened my interest and love for backend development. It taught me valuable lessons in routing, CRUD operations, and deployment. Now, I'm excited to bring this passion and these skills to the HNG Internship.

The HNG Internship provides a great opportunity to learn from experienced professionals, work on practical projects, and connect with other programmers. I'm very much interested in the intensive learning and opportunities that are provided by the internship. In case you're interested and want to find out more information about the program, please checkout HNG Internship and HNG Hire.

Conclusion

This project was a significant milestone in my backend development journey. I'm really looking forward to the challenges and learning opportunities that the HNG Internship will bring. If you're also an aspiring developer like me, I highly recommend checking out the HNG Internship to take your skills to the next level.