This project is a tutorial demonstrating how to build a simple web application by integrating a Flask backend with a Vite frontend using Vanilla JavaScript. The tutorial covers setting up the development environment, creating the backend API, and designing the frontend with dynamic interaction.
To run this project, ensure the following software is installed:
- Python (>=3.10)
- Virtual Environment Manager (e.g.,
venv,virtualenv,conda, etc.) - Node.js (via Node Version Manager - NVM)
Follow these steps to install and configure Node.js:
# Install NVM (Node Version Manager) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash # Install the latest Node.js version nvm install 22 # Verify Node.js version node -v # Output: v22.x.x # Verify npm version npm -v # Output: 10.x.xgit clone https://github.com/nchenche/flask-vite-tutorial.git cd flask-vite-tutorial- Navigate to the backend directory
cd backend- Set Up a virtual environment:
# Other tools than venv could be used (virtualenv, conda...) python -m venv venv source venv/bin/activate- Install the flask project
# Install the Flask project (in editable mode with -e): pip install -e .- Run the application
# The backend server will start on http://127.0.0.1:5000 python wsgi.py- Navigate to the frontend directory
cd frontend- Install Node.js dependencies:
npm install- Start the Vite development server
# The frontend server will start on http://127.0.0.1:5173 npm run dev. ├── backend/ # Backend application using Flask │ ├── app/ # Flask app module │ ├── README.md # Backend-specific instructions │ ├── requirements.txt # Python dependencies │ ├── setup.py # Backend package setup │ ├── VERSION # Backend version information │ └── wsgi.py # WSGI entry point for the Flask app ├── frontend/ # Frontend application using Vite │ ├── index.html # Main entry point │ ├── node_modules/ # Node.js dependencies (excluded in .gitignore) │ ├── package.json # Frontend dependencies │ ├── package-lock.json # Locked dependency versions │ ├── public/ # Public assets │ ├── src/ # Frontend source code │ └── vite.config.js # Vite configuration └── README.md # Root README with setup instructions -- WORK IN PROGRESS --
Use Vite to scaffold the frontend application:
# Create a Vite app project named 'frontend' npm create vite@latest frontend # Follow prompts and choose 'vanilla' for plain JavaScript# Go to the frontend/ directory cd frontend # Install Vite as a development dependency: npm i --save-dev viteTo integrate Bootstrap with the Vite project, follow these steps:
- Install Bootstrap and Popper.js
# Install Bootstrap and Popper.js npm i --save bootstrap @popperjs/core- Install Sass (for SCSS support in Bootstrap):
# Install Sass as a development dependency npm i --save-dev sass- Create a
vite.config.jsfile to create an alias for Bootstrap:
// vite.config.js (at the root of the Vite project, where node_modules directory is) import { defineConfig } from 'vite'; import path from 'path'; export default defineConfig({ resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), }, }, });- Configure Bootstrap in Your Project:
// Create src/scss/styles.scss and add: @import "~bootstrap/scss/bootstrap";// Import your custom styles and Bootstrap's JavaScript in the main JavaScript file import '../scss/styles.scss'; import * as bootstrap from 'bootstrap';For additional details., refer to Bootstrap's Vite Setup Guide.
- Set Up a Virtual Environment:
# Other tools than venv could be used (virtualenv, conda...) python -m venv venv source venv/bin/activate# Install the Flask project (in editable mode with -e): pip install -e .- Start the backend server
# Navigate to the backend directory cd backend/ # Activate the virtual environment source venv/bin/activate # Start Flask python wsgi.py- Start the backend server
# Navigate to the frontend directory cd frontend # Start the Vite development server npm run dev