Creating a Flask App: My issues as a beginner and how I learned to fix them.

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. Here are a few examples of my errors:

• Here's another one:

Steps I took to fix my deployment issues:

• Check app.py File:
  Ensure your Flask app is correctly instantiated as app.
  

    from flask import Flask



    app = Flask(__name__)



    if __name__ == '__main__':

        app.run()

• Update the gunicorn Command:
  Modify your start command in your deployment settings to:
  

    gunicorn app:app

• Ensure Correct Directory Structure:
  Make sure that app.py is in the root directory of your project.

Create 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:
  Ensure your code is pushed to GitHub. Link your 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.

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.