{"id":22585180,"url":"https://github.com/nchenche/flask-vite-tutorial","last_synced_at":"2025-06-25T09:07:13.958Z","repository":{"id":266451035,"uuid":"898385750","full_name":"nchenche/flask-vite-tutorial","owner":"nchenche","description":"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.","archived":false,"fork":false,"pushed_at":"2024-12-04T15:44:36.000Z","size":28,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T17:17:39.055Z","etag":null,"topics":["example","flask-application","vanilla-js","vitejs"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nchenche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-04T09:53:46.000Z","updated_at":"2024-12-04T15:46:49.000Z","dependencies_parsed_at":"2024-12-04T10:38:56.092Z","dependency_job_id":"b20a1258-63da-4a11-b4b8-8a11ab655ac6","html_url":"https://github.com/nchenche/flask-vite-tutorial","commit_stats":null,"previous_names":["nchenche/flask-vite-tutorial"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nchenche/flask-vite-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nchenche%2Fflask-vite-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nchenche%2Fflask-vite-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nchenche%2Fflask-vite-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nchenche%2Fflask-vite-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nchenche","download_url":"https://codeload.github.com/nchenche/flask-vite-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nchenche%2Fflask-vite-tutorial/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261841960,"owners_count":23217914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","flask-application","vanilla-js","vitejs"],"created_at":"2024-12-08T07:07:34.475Z","updated_at":"2025-06-25T09:07:13.926Z","avatar_url":"https://github.com/nchenche.png","language":"Python","readme":"# **Flask + Vite Web Application Tutorial**\n\nThis 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.\n\n---\n\n\n## **Getting Started**\n\n\n### **Requirements**\n\nTo run this project, ensure the following software is installed:\n\n- **Python** (\u003e=3.10)\n- **Virtual Environment Manager** (e.g., `venv`, `virtualenv`, `conda`, etc.)\n- **Node.js** (via Node Version Manager - NVM)\n\n#### **Install Node.js Using Node Version Manager (NVM)**\n\nFollow these steps to install and configure Node.js:\n\n```bash\n# Install NVM (Node Version Manager)\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash\n\n# Install the latest Node.js version\nnvm install 22\n\n# Verify Node.js version\nnode -v  # Output: v22.x.x\n\n# Verify npm version\nnpm -v   # Output: 10.x.x\n```\n---\n\n### **Clone the Repository**\n\n```bash\ngit clone https://github.com/nchenche/flask-vite-tutorial.git\ncd flask-vite-tutorial\n```\n---\n\n### Set Up the Backend\n\n1. Navigate to the backend directory\n\n```bash\ncd backend\n```\n\n2. Set Up a virtual environment:\n\n\n```bash\n# Other tools than venv could be used (virtualenv, conda...)\npython -m venv venv\nsource venv/bin/activate\n```\n\n3. Install the flask project\n\n```bash\n# Install the Flask project (in editable mode with -e):\npip install -e .\n```\n\n4. Run the application\n\n```bash\n# The backend server will start on http://127.0.0.1:5000\npython wsgi.py\n```\n---\n\n### Set Up the Backend\n\n1. Navigate to the frontend directory\n\n```bash\ncd frontend\n```\n\n2. Install Node.js dependencies:\n\n\n```bash\nnpm install\n```\n\n4. Start the Vite development server\n\n```bash\n# The frontend server will start on http://127.0.0.1:5173\nnpm run dev\n```\n---\n\n\n## **Project Structure**\n\n```plaintext\n.\n├── backend/                 # Backend application using Flask\n│   ├── app/                 # Flask app module\n│   ├── README.md            # Backend-specific instructions\n│   ├── requirements.txt     # Python dependencies\n│   ├── setup.py             # Backend package setup\n│   ├── VERSION              # Backend version information\n│   └── wsgi.py              # WSGI entry point for the Flask app\n├── frontend/                # Frontend application using Vite\n│   ├── index.html           # Main entry point\n│   ├── node_modules/        # Node.js dependencies (excluded in .gitignore)\n│   ├── package.json         # Frontend dependencies\n│   ├── package-lock.json    # Locked dependency versions\n│   ├── public/              # Public assets\n│   ├── src/                 # Frontend source code\n│   └── vite.config.js       # Vite configuration\n└── README.md                # Root README with setup instructions\n```\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Starting from scratch \n\n-- WORK IN PROGRESS --\n\n\n## **Set Up The Frontend**\n\n### Create a Vite Project\n\nUse Vite to scaffold the frontend application:\n\n```bash\n# Create a Vite app project named 'frontend'\nnpm create vite@latest frontend\n# Follow prompts and choose 'vanilla' for plain JavaScript\n```\n\n```bash\n# Go to the frontend/ directory\ncd frontend\n\n# Install Vite as a development dependency:\nnpm i --save-dev vite\n```\n\n### Bootstrap in Vite\n\nTo integrate Bootstrap with the Vite project, follow these steps:\n\n1. Install Bootstrap and Popper.js \n\n```bash\n# Install Bootstrap and Popper.js\nnpm i --save bootstrap @popperjs/core\n```\n\n2. Install Sass (for SCSS support in Bootstrap):\n\n```bash\n# Install Sass as a development dependency\nnpm i --save-dev sass\n```\n\n3. Create a `vite.config.js` file to create an alias for Bootstrap: \n\n```js\n// vite.config.js (at the root of the Vite project, where node_modules directory is)\nimport { defineConfig } from 'vite';\nimport path from 'path';\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),\n    },\n  },\n});\n```\n\n4. Configure Bootstrap in Your Project:\n\n```js\n// Create src/scss/styles.scss and add:\n@import \"~bootstrap/scss/bootstrap\";\n```\n\n```js\n// Import your custom styles and Bootstrap's JavaScript in the main JavaScript file\nimport '../scss/styles.scss';\nimport * as bootstrap from 'bootstrap';\n```\n\nFor additional details., refer to [Bootstrap's Vite Setup Guide](https://getbootstrap.com/docs/5.2/getting-started/vite/).\n\n\n\n## **Set Up The Backend**\n\n### Create a Flask Project\n\n1. Set Up a Virtual Environment:\n\n```bash\n# Other tools than venv could be used (virtualenv, conda...)\npython -m venv venv\nsource venv/bin/activate\n```\n\n```bash\n# Install the Flask project (in editable mode with -e):\npip install -e .\n```\n\n## **Run the Full Application**\n\n1. Start the backend server\n\n```bash\n# Navigate to the backend directory\ncd backend/\n\n# Activate the virtual environment\nsource venv/bin/activate\n\n# Start Flask\npython wsgi.py\n```\n\n1. Start the backend server\n\n```bash\n# Navigate to the frontend directory\ncd frontend\n\n# Start the Vite development server\nnpm run dev\n```\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnchenche%2Fflask-vite-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnchenche%2Fflask-vite-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnchenche%2Fflask-vite-tutorial/lists"}