{"id":13770933,"url":"https://github.com/app-generator/sample-flask-htmlx-mkit","last_synced_at":"2025-04-07T10:56:38.497Z","repository":{"id":100503211,"uuid":"487588753","full_name":"app-generator/sample-flask-htmlx-mkit","owner":"app-generator","description":"Flask HTMLx - Material Kit Design (Open-Source) | AppSeed","archived":false,"fork":false,"pushed_at":"2022-05-04T05:23:04.000Z","size":6540,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T18:13:36.250Z","etag":null,"topics":["appseed-sample","flask-htmx","flask-sample","htmlx","htmx-app","htmx-flask","htmx-free-template","htmx-starter","htmx-template"],"latest_commit_sha":null,"homepage":"https://blog.appseed.us/flask-htmlx-material-kit-design/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-05-01T16:39:50.000Z","updated_at":"2025-01-20T17:59:50.000Z","dependencies_parsed_at":"2023-05-27T16:45:47.414Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/sample-flask-htmlx-mkit","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":"app-generator/flask-material-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-htmlx-mkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-htmlx-mkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-htmlx-mkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-htmlx-mkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/sample-flask-htmlx-mkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640512,"owners_count":20971555,"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":["appseed-sample","flask-htmx","flask-sample","htmlx","htmx-app","htmx-flask","htmx-free-template","htmx-starter","htmx-template"],"created_at":"2024-08-03T17:00:45.014Z","updated_at":"2025-04-07T10:56:38.476Z","avatar_url":"https://github.com/app-generator.png","language":"SCSS","funding_links":[],"categories":["Examples by Back-end"],"sub_categories":["Python-based (Django, FastAPI, Flask)"],"readme":"# [Flask HTMLX](https://blog.appseed.us/flask-htmlx-material-kit-design/) Material Kit\n\n`Open-Source` sample that uses **Flask and HTMLx** for the frontend logic. For newcomers, `Flask` is a leading web framework powered by Python and `HTMLx` is a lightweight JS utility library that allows accessing AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML. \nDesing is provided by `Material Kit 2`, a modern Boostrap 5 desing (also free).\n\n\u003cbr /\u003e\n\n\u003e **Features**\n\n- `Up-to-date` Dependencies\n- Tech Stack:\n  - `Flask`: manages authentication and routing\n  - `HTMLx`: manages forms: `Login`, `Register` and `Contact`\n  - `Bootstrap 5`: UI \u0026 presentation layer\n- `Auth`: Sign IN, Sign UP\n- `Misc`: SQLite DB, SQLAlchemy, Forms Validation\n\n\u003cbr /\u003e\n\n\u003e **Links**\n\n- 👉 More [Flask Apps](https://appseed.us/apps/flask/) and [Dashboards](https://appseed.us/admin-dashboards/flask/) provided by AppSeed\n- 👉 Free [Support](https://appseed.us/support/) via Email and [Discord](https://discord.gg/fZC6hup).\n\n\u003cbr /\u003e\n\n## ✨ Quick Start in `Docker`\n\n\u003e Get the code\n\n```bash\n$ git clone https://github.com/app-generator/sample-flask-htmlx-mkit.git\n$ cd sample-flask-htmlx-mkit\n```\n\n\u003e Start the app in Docker\n\n```bash\n$ docker-compose up --build \n```\n\nVisit `http://localhost:85` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n![Flask HTMLX Material Kit - Open-Source Sample provided by AppSeed.](https://user-images.githubusercontent.com/51070104/166261440-a298601e-8335-4527-aca9-af067b9d9d14.gif)\n\n\u003cbr /\u003e\n\n## ✨ Build from sources\n\n```bash\n$ # Clone the sources\n$ git clone https://github.com/app-generator/sample-flask-htmlx-mkit.git\n$ cd sample-flask-htmlx-mkit\n$\n$ # Virtualenv modules installation (Unix based systems)\n$ virtualenv env\n$ source env/bin/activate\n$\n$ # Virtualenv modules installation (Windows based systems)\n$ # virtualenv env\n$ # .\\env\\Scripts\\activate\n$\n$ # Install requirements\n$ pip3 install -r requirements.txt\n$\n$ # Set the FLASK_APP environment variable\n$ (Unix/Mac) export FLASK_APP=run.py\n$ (Windows) set FLASK_APP=run.py\n$ (Powershell) $env:FLASK_APP = \".\\run.py\"\n$\n$ # Set up the DEBUG environment\n$ # (Unix/Mac) export FLASK_ENV=development\n$ # (Windows) set FLASK_ENV=development\n$ # (Powershell) $env:FLASK_ENV = \"development\"\n$\n$ # Run the application\n$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)\n$ # --port=5000    - specify the app port (default 5000)  \n$ flask run --host=0.0.0.0 --port=5000\n$\n$ # Access the app in browser: http://127.0.0.1:5000/\n```\n\n\u003e Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.\n\n\u003cbr /\u003e\n\n## ✨ Code-base structure\n\nThe project has a super simple structure, represented as bellow:\n\n```bash\n\u003c PROJECT ROOT \u003e\n   |\n   |-- app/\n   |    |-- static/\n   |    |    |-- \u003ccss, JS, images\u003e         # CSS files, Javascripts files\n   |    |\n   |    |-- templates/\n   |    |    |\n   |    |    |-- includes/                 # Page chunks, components\n   |    |    |    |\n   |    |    |    |-- navigation.html      # Top bar\n   |    |    |    |-- sidebar.html         # Left sidebar\n   |    |    |    |-- scripts.html         # JS scripts common to all pages\n   |    |    |    |-- footer.html          # The common footer\n   |    |    |\n   |    |    |-- layouts/                  # App Layouts (the master pages)\n   |    |    |    |\n   |    |    |    |-- base.html            # Used by common pages like index, UI\n   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)\n   |    |    |\n   |    |    |-- accounts/                 # Auth Pages (login, register)\n   |    |    |    |\n   |    |    |    |-- login.html           # Use layout `base-fullscreen.html`\n   |    |    |    |-- register.html        # Use layout `base-fullscreen.html`  \n   |    |    |\n   |    |    |-- home/                      # UI Kit Pages\n   |    |         |-- index.html            # Index page\n   |    |         |-- 404-page.html         # 404 page\n   |    |         |-- *.html                # All other pages\n   |    |\n   |   config.py                            # Provides APP Configuration \n   |   forms.py                             # Defines Forms (login, register) \n   |   models.py                            # Defines app models \n   |   views.py                             # Application Routes \n   |\n   |-- Dockerfile                           # Deployment\n   |-- docker-compose.yml                   # Deployment\n   |-- gunicorn-cfg.py                      # Deployment   \n   |-- nginx                                # Deployment\n   |    |-- appseed-app.conf                # Deployment \n   |\n   |-- requirements.txt\n   |-- run.py\n   |\n   |-- ************************************************************************\n```\n\n\u003cbr /\u003e\n\n## ✨ Recompile CSS\n\nTo recompile SCSS files, follow this setup:\n\n\u003cbr /\u003e\n\n**Step #1** - Install tools\n\n- [NodeJS](https://nodejs.org/en/) 12.x or higher\n- [Gulp](https://gulpjs.com/) - globally \n    - `npm install -g gulp-cli`\n- [Yarn](https://yarnpkg.com/) (optional) \n\n\u003cbr /\u003e\n\n**Step #2** - Change the working directory to `assets` folder\n\n```bash\n$ cd app/static/assets\n```\n\n\u003cbr /\u003e\n\n**Step #3** - Install modules (this will create a classic `node_modules` directory)\n\n```bash\n$ npm install\n// OR\n$ yarn\n```\n\n\u003cbr /\u003e\n\n**Step #4** - Edit \u0026 Recompile SCSS files \n\n```bash\n$ gulp scss\n```\n\nThe generated file is saved in `static/assets/css` directory.\n\n\u003cbr /\u003e\n\n## ✨ Deployment\n\nThe app is provided with a basic configuration to be executed in [Docker](https://www.docker.com/), [Heroku](https://www.heroku.com/), [Gunicorn](https://gunicorn.org/), and [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/).\n\n### [Heroku](https://www.heroku.com/)\n---\n\nSteps to deploy on **Heroku**\n\n- [Create a FREE account](https://signup.heroku.com/) on Heroku platform\n- [Install the Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) that match your OS: Mac, Unix or Windows\n- Open a terminal window and authenticate via `heroku login` command\n- Clone the sources and push the project for LIVE deployment\n\n```bash\n$ # Clone the source code:\n$ git clone https://github.com/app-generator/sample-flask-htmlx-mkit.git\n$ cd sample-flask-htmlx-mkit\n$\n$ # Check Heroku CLI is installed\n$ heroku -v\nheroku/7.25.0 win32-x64 node-v12.13.0 # \u003c-- All good\n$\n$ # Check Heroku CLI is installed\n$ heroku login\n$ # this commaond will open a browser window - click the login button (in browser)\n$\n$ # Create the Heroku project\n$ heroku create\n$\n$ # Trigger the LIVE deploy\n$ git push heroku master\n$\n$ # Open the LIVE app in browser\n$ heroku open\n```\n\n\u003cbr /\u003e\n\n### [Gunicorn](https://gunicorn.org/)\n---\n\nGunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.\n\n\u003e Install using pip\n\n```bash\n$ pip install gunicorn\n```\n\u003e Start the app using gunicorn binary\n\n```bash\n$ gunicorn --bind 0.0.0.0:8001 run:app\nServing on http://localhost:8001\n```\n\nVisit `http://localhost:8001` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n### [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/)\n---\n\nWaitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.\n\n\u003e Install using pip\n\n```bash\n$ pip install waitress\n```\n\u003e Start the app using [waitress-serve](https://docs.pylonsproject.org/projects/waitress/en/stable/runner.html)\n\n```bash\n$ waitress-serve --port=8001 run:app\nServing on http://localhost:8001\n```\n\nVisit `http://localhost:8001` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n## ✨ Credits \u0026 Links\n\n- [Flask Framework](https://www.palletsprojects.com/p/flask/) - The official website\n- [Boilerplate Code](https://appseed.us/boilerplate-code) - Index provided by **AppSeed**\n- [Boilerplate Code](https://github.com/app-generator/boilerplate-code) - Index published on Github\n\n\u003cbr /\u003e\n\n---\n[Flask HTMLX](https://blog.appseed.us/flask-htmlx-material-kit-design/) Material Kit - Provided by **AppSeed** [App Generator](https://appseed.us/app-generator).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-flask-htmlx-mkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fsample-flask-htmlx-mkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-flask-htmlx-mkit/lists"}