Forem: Dan Hackworth

Integrating Vite with Flask for Production

Dan Hackworth — Mon, 15 Jan 2024 20:04:58 +0000

In this post, we'll explore how to configure Vite and Flask to run seamlessly together in a production environment. This setup is ideal for developers looking to leverage the speed of Vite for frontend development with the power and simplicity of Flask for the backend.

Prerequisites

Before we dive into the configurations, let's assume you have the basic project structure set up. This includes a standard Flask application and a Vite-powered React frontend.

Configuring Vite for Development

We start by setting up our vite.config.js file for the development environment. The configuration ensures that Vite serves our React frontend and proxies API requests to our Flask backend.

Here's the vite.config.js file for development:


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
  build: {
    assetsDir: 'static',
  },
  server: {
    port: 3000,
    cors: true,
    proxy: {
      "/api": {
        target: "http://127.0.0.1:5555/",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

Key Points:

The base is set to './' to ensure that the built paths are relative.
assetsDir is configured as 'static', aligning with Flask's static file serving convention.
The development server runs on port 3000.
CORS is enabled for development.
A proxy is set up for requests starting with /api, redirecting them to the Flask server running on http://127.0.0.1:5555/. ##Adapting Configuration for Production For production, we simplify the configuration by removing the development server settings. Since Flask will serve our static files in production, we don't need Vite's development server and its proxy settings.

In the production version of vite.config.js, simply omit the server object:

// ... rest of the configuration
build: {
  assetsDir: 'static',
},
// No server object for production

In the upcoming sections, we'll dive deeper into how to configure Flask to serve the Vite-built assets and ensure that both Flask and Vite work harmoniously in a production setting.

Backend Configuration in Flask

Moving to the backend, let's talk about the Flask configuration. While many developers prefer to place the Flask app initialization in app.py, I choose to place it in config.py. This keeps all configurations centralized, making the codebase cleaner and easier to maintain.

Furthermore, for production, special attention is given to how the static_folder and template_folder are set up, especially since we're integrating with a Vite frontend. Here's what the config.py file looks like in production:


import os
from dotenv import load_dotenv

load_dotenv()
from flask import Flask
from flask_bcrypt import Bcrypt
from flask_migrate import Migrate
from flask_restful import Api
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import MetaData
from flask_cors import CORS

app = Flask(
  __name__, 
  static_folder='../client/dist/static',
  template_folder='../client/dist'
)

app.secret_key = os.getenv('SECRET_KEY')
app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('SUPABASE_URI')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config
['SESSION_COOKIE_NAME'] = 'id'
app.config['SESSION_COOKIE_SECURE'] = True
app.config['SESSION_COOKIE_HTTPONLY'] = True
app.config['SESSION_COOKIE_SAMESITE'] = 'None'
app.json.compact = False

metadata = MetaData(naming_convention={
"fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
})
db = SQLAlchemy(metadata=metadata)
migrate = Migrate(app, db)
db.init_app(app)
bcrypt = Bcrypt(app)
api = Api(app)
CORS(app)

For the production setup in app.py, it's essential to add a catch-all route to handle redirects for single-page applications:


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return render_template("index.html")

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

This setup ensures that all routes are correctly redirected to the index.html file, a common requirement for single-page applications in production.

Building and Starting the App
When deploying to a platform like Render or similar, ensure you use Gunicorn for the backend. Assuming your project is structured into two separate folders (client for the frontend and server for the backend) and your Pipenv dependencies are transferred into a requirements.txt file, (which can be done via command pip freeze > requirements.txt) your build command would look like this:

pip install -r requirements.txt && npm install --prefix client && npm run build --prefix client

And the start command for Gunicorn would be:

gunicorn --chdir server app:app

Overcoming Limitations: Serving Images from the Public Folder

A limitation I encountered with this setup involved serving images from the public folder. Vite handles this well in development, but Flask doesn't automatically serve these files in production. To overcome this, I utilized Supabase's storage feature, which provided a more scalable and professional solution.

The Solution:

Supabase Storage and Server-Side Rendering
Images are uploaded to Supabase, offering a scalable and efficient solution. The Flask backend fetches image URLs server-side, and the frontend, served by Vite, displays the images. This method enhanced scalability and performance.

Implementation Overview

Uploading Images to Supabase Storage: Secure and structured storage solution.

2.Fetching Image URLs Server-Side: Flask backend dynamically retrieves image URLs.

3.Rendering Images in the Frontend: Vite-served frontend displays images using these URLs.

Conclusion

This challenge led to discovering a robust solution. Using Supabase Storage for image handling not only addressed the initial issue but also added significant benefits in scalability and performance. This approach, combining Flask's server-side capabilities with Supabase's storage, resulted in a more professional and scalable application.

Combining Vite and Flask for a production environment offers an efficient and modern web development experience. By addressing and overcoming specific challenges, the integration of these two powerful tools can lead to the creation of high-performance, scalable web applications.

Building a React-Flask Project with a Custom Node.js Template Generator and Tailwind CSS: A Deep Dive into CORS Setup

Dan Hackworth — Fri, 22 Dec 2023 07:04:50 +0000

Introduction

In the realm of full-stack development, the combination of React and Flask has become increasingly popular. To streamline the development process of a recent group project, I embarked on creating a custom Node.js template generator. This tool laid the groundwork for our React-Flask application, integrating the utility of Tailwind CSS and delving into the intricacies of setting up Cross-Origin Resource Sharing (CORS) in Flask.

The Role of the Node.js Template Generator

Streamlining Project Initialization

Building a project from scratch can be time-consuming. To address this, I developed a template generator in Node.js. This generator automatically set up a basic structure for our React-Flask project, ensuring a quick and consistent start for all team members. It scaffolded the necessary directories, preconfigured essential dependencies, and integrated Tailwind CSS for styling.

Incorporating Tailwind CSS

Tailwind CSS was chosen for its utility-first approach, which significantly accelerated the development of our project's UI. The template generator included Tailwind CSS configuration, enabling us to focus on building features rather than worrying about initial setup nuances.

Deep Dive into CORS Setup in Flask

Understanding CORS

In our project, the React frontend and Flask backend were served on different origins during development, leading to CORS errors. CORS is a security feature that restricts web browsers from making requests to a different domain than the one that served the web page. To enable seamless communication between our frontend and backend, setting up CORS in Flask was crucial.

Configuring CORS in Flask

For handling CORS in our Flask application, we used the flask-cors extension. Here's a snippet of our CORS configuration:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, supports_credentials=True, resources={
    r"/*": {
        "origins": ["http://127.0.0.1:5174"],
        "methods": ["GET", "POST", "PATCH", "PUT", "DELETE"],
        "allow_headers": ["Content-Type", "Authorization"]
    }
})

This configuration allowed us to specify which origins, HTTP methods, and headers were permissible in cross-origin requests. The supports_credentials=True setting was particularly important for handling cookies and authentication headers in our API requests.

Key Takeaways from CORS Setup
Flexibility: The flask-cors extension offered flexibility to define CORS rules as per our project's requirements.
Security: Proper CORS setup ensured that our application remained secure while allowing necessary cross-origin requests.
Development Efficiency: Configuring CORS correctly was vital for the development efficiency, as it enabled the frontend and backend to communicate without any hindrance.
Conclusion
Creating a custom Node.js template generator proved to be a significant efficiency booster for our React-Flask project. It not only provided a solid starting point but also ensured consistency across the development team. Integrating Tailwind CSS through the generator allowed for rapid UI development. Most importantly, understanding and implementing CORS in Flask was a critical learning experience, highlighting the importance of web security while developing modern web applications. This project was not just about building a functional application; it was an enriching journey through the landscape of full-stack development.
This configuration allowed us to specify which origins, HTTP methods, and headers were permissible in cross-origin requests. The supports_credentials=True setting was particularly important for handling cookies and authentication headers in our API requests.

Key Takeaways from CORS Setup

Flexibility: The flask-cors extension offered flexibility to define CORS rules as per our project's requirements.
Security: Proper CORS setup ensured that our application remained secure while allowing necessary cross-origin requests.
Development Efficiency: Configuring CORS correctly was vital for the development efficiency, as it enabled the frontend and backend to communicate without any hindrance.

Conclusion

Creating a custom Node.js template generator proved to be a significant efficiency booster for our React-Flask project. It not only provided a solid starting point but also ensured consistency across the development team. Integrating Tailwind CSS through the generator allowed for rapid UI development. Most importantly, understanding and implementing CORS in Flask was a critical learning experience, highlighting the importance of web security while developing modern web applications. This project was not just about building a functional application; it was an enriching journey through the landscape of full-stack development.

Unlocking the Secrets of Full-Stack Magic

Dan Hackworth — Thu, 30 Nov 2023 21:43:46 +0000

Unlocking the Secrets of Full-Stack Magic
Greetings fellow coding enthusiasts! Today, I want to take you on my journey learning back end development for the very first time. Truth be told I struggled quite a bit in the beginning to grasp the concepts. The blocker I had was that I couldn’t see the bigger picture and how these pieces all fit together. As I delve into the intricacies, I'll share how understanding the broader landscape of full-stack development has been a game-changer for my learning journey.
In Python, everything is an object, from simple data types to complex structures. Understanding the fundamentals of classes and objects has been pivotal in my coding adventures. It's akin to having a set of blueprints that dictate the structure and behavior of your code entities.

Connecting the Dots: Full-Stack Development Unveiled
Now, let's zoom out and talk about the bigger picture. Full-stack development is the orchestration of a symphony where the backend, frontend, and database harmoniously play their parts. Imagine a restaurant where chefs (backend), servers (frontend), and the recipe book (database) work together seamlessly.
The backend is the powerhouse, handling logic, processing requests, and serving data. Python, with its versatility, becomes a maestro in this realm. Queries to the database are like placing an order – precise and tailored to get exactly what's needed. The database responds with the requested data, completing the back-end's mission.
On the other side of the curtain, the frontend takes this data and presents it to the user. It's the part of the show everyone sees. The user interacts with the interface, blissfully unaware of the complex “dance" happening behind the scenes. Here, Python may not be the star, but it's the silent puppeteer pulling the strings.

A Bump in the Learning Road
Now, let's address the elephant in the room – the challenges of learning. My journey wasn’t all smooth sailing. My initial teachers were unfortunately let go. It was a shock and a setback, but the silver lining is that– connections endure.
Despite the challenges, staying in contact with my former teachers has been a game-changer, especially with the continuing guidance in my side projects, particularly a full-stack PERN-style template, has been invaluable. In modeling it after create-react-app using Node and Commander, I've begun to see the intricate connections between frontend and backend. It's not just about writing code; it's about architecting a system that communicates flawlessly.

Seeing the Bigger Picture
Working on these projects has given me a glimpse of the big picture. It's not just about mastering a language or framework; it's about understanding how each piece fits into the puzzle. Object-Oriented Programming principles, applied both in Python and across the full-stack spectrum, have been the glue holding everything together.

Closing Thoughts
So, as I continue my journey towards becoming a great full-stack developer, I invite you to embark on your own exploration. Understand the nuances of OOP, MCV, and other modern solutions in full-stack development, and always remember – even when situations change, the learning never stops. It's not just about writing code; it's about creating magic.
Happy coding!

Conversations with Computers: Coding as an Art Form

Dan Hackworth — Fri, 10 Nov 2023 15:57:05 +0000

“Conversations with computers: Coding as an Art Form”
A continuation of my last post, Coding as Communication. To picture the computer as a living entity; the computer is ready to be put into motion. The list of possible commands is vast and ever changing. When the computer does fail an operation the fault lies on its technological limitations or more likely, the communicator of code. There are many different ways to convey a message to a computer but clarity and precision in coding is paramount. As my last post asserted, Code is the way we speak to our computers. Recently, I have been learning to code in React, a framework of JS, geared toward front-end development. In a sense, I have learned a new “dialect”.

React varies from vanilla JS because it makes adding web components modular and declarative. Simply put, I can build a reusable piece of the puzzle and place it directly where I want, rather than explaining every step, for every action. To dive deeper into my experience with react, I have been able to produce beautiful web pages like my new improved website (daniel-hackworth.com) that would have previously been exceedingly difficult in traditional JS. My most notable takeaway from React is how to use it’s modularity and libraries. Imagine if you are training someone to do a job. You could write your own how-to manuel every time and then you get full control over it. Or you could use an already written how-to manuel, oftentimes, by someone(s) more advanced; though these manuals may become out of date, or surpass your code. The benefits and problems essentially boil down to saving time now vs saving time later.

“Making Living Art”
Software Engineering is an art form like how bees create a hive and ants a network of tunnels. Function and beauty working in tandem; it reminds me of training bonsai trees. You have to prune and style heavily, taking care not to destroy it. Like code, deciding what should stay and what should go, are the lines readable to others, are they vulnerable to bugs. Each branch must be gently but precisely guided to take the proper shape. The program is the tree and it grows as you add to it but must be constantly maintained and formed. When it begins to take shape, it takes time and skill to grow into a finished form. Yet, even in its finished form it must still be maintained. Coding is more forgiving as there is an undo button and ample testing. Even still, there is a necessary emphasis on patience, adaptability and finding the right guidance. There is more to learn than any one human can know.

So far I have been really enjoying this journey, and passionately studying to keep up and learn the newest things. Thus far, I have put most of my effort into learning design and front end development. Starting next week is our delve into back end development. There are many more programming languages that I have yet to study but all have their strengths and weaknesses. Which I hope to discuss in my next post when I have learned more about python.

Initial Commit

Dan Hackworth — Thu, 19 Oct 2023 15:10:28 +0000

My Journey into Software Engineering: Decoding the Language of Computers

Hello, My name is Daniel Hackworth, I am a 26 year old software engineer. I got into coding several months ago and it was a wild journey! I was not a computer guy, I took a couple classes in high school but that was the extent of my knowledge. I used a chromebook because I got it on sale and didn’t do much more than what google drive offered, and surfing the web. One day, I wasn’t paying attention and someone stole my chromebook. I was angry about it but everything I really cared about was backed up. Luckily my best friend had an old, but still very powerful, laptop he was willing to sell me for a good price. Then I got very sick and fell behind on my bookkeeping for work. Through that harrowing experience I found it necessary to find a faster way. I wasn’t wealthy enough to hire someone else to do it. So I set off on learning to code my first program. With my better computer, the help of chat-gpt, and plenty of fumbling around; I was able to create my first program. I had so much fun with it, that I started making programs for other easily automatable tasks and time savers. I began creating more complex programs when I wasn’t working. Then, got it in my head that maybe I could get paid to write programs. When I realized that I would be losing my housing within 6 months and I wasn’t making enough money with my current job to get a new place. I got that push I needed to take a leap of faith to quit my job and join a coding bootcamp.

Mathematics in a Foreign Land

I feel lucky that coding was a passion before I attempted to make it a career. I go into every problem thoroughly enjoying the puzzles and problem solving. Having the basics on how to “speak computer” has helped me immensely going into my bootcamp experience. My philosophy on coding is deeply rooted in communication. I often describe learning to code as going into a foreign country to take a class on algebra. Assuming you have taken an algebra class before or at least understand the basics, experiencing a teacher teach in a different language can be daunting, confusing, and cause much miscommunication. But, the logical problem-solving techniques in algebra don’t change much regardless of what language it is being taught in. Taking your time to understand more of the language you are learning by using the algebra skills you already possess to make cross-subject references and unlock more vocabulary and syntax based on what you do know and any outside help you can reference; will leave you with an understanding of the new language and a much more solid understanding of algebra.

The Language of Code

To continue on this philosophy, like traditional language, coding language syntax and vocabulary is vast and influenced by many very different people. So just like communication there are many different ways to communicate the same ideas, some better than others in regards to different situations. These solutions are also limited by the “speaker’s” and "listener's" vocabulary. In the case of coding, the listener(the computer) has all the vocabulary; so it is only limited by the coder. As a speaker, the best way to increase your lexicon is by reading books that use words in contextual and complex ideas, in tandem with a dictionary for reference. If you read a book far above your reading level it simply wouldn’t make sense, and if you read a dictionary, you would lose necessary contextual value. I have found that coding is exactly the same; and the best way to learn is looking at or copying code that is just out of reach, with reference material handy.