{"id":13567266,"url":"https://github.com/gtalarico/flask-vuejs-template","last_synced_at":"2025-05-15T23:07:08.981Z","repository":{"id":37678044,"uuid":"109844643","full_name":"gtalarico/flask-vuejs-template","owner":"gtalarico","description":"Flask + Vue JS Template ","archived":false,"fork":false,"pushed_at":"2022-12-08T16:50:58.000Z","size":2246,"stargazers_count":1455,"open_issues_count":29,"forks_count":311,"subscribers_count":46,"default_branch":"master","last_synced_at":"2025-04-08T10:31:29.744Z","etag":null,"topics":["flask","flask-api","flask-restful","flask-restplus","heroku","python","python3","vuejs","vuejs-templates"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gtalarico.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.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}},"created_at":"2017-11-07T14:14:50.000Z","updated_at":"2025-04-07T13:30:31.000Z","dependencies_parsed_at":"2022-07-20T00:16:57.459Z","dependency_job_id":null,"html_url":"https://github.com/gtalarico/flask-vuejs-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fflask-vuejs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fflask-vuejs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fflask-vuejs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fflask-vuejs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gtalarico","download_url":"https://codeload.github.com/gtalarico/flask-vuejs-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436948,"owners_count":22070947,"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":["flask","flask-api","flask-restful","flask-restplus","heroku","python","python3","vuejs","vuejs-templates"],"created_at":"2024-08-01T13:02:27.190Z","updated_at":"2025-05-15T23:07:03.613Z","avatar_url":"https://github.com/gtalarico.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"# Flask-VueJs-Template 🌶️✌\r\n\r\n[![Build Status](https://travis-ci.org/gtalarico/flask-vuejs-template.svg?branch=master)](https://travis-ci.org/gtalarico/flask-vuejs-template)\r\n[![codecov](https://codecov.io/gh/gtalarico/flask-vuejs-template/branch/master/graph/badge.svg)](https://codecov.io/gh/gtalarico/flask-vuejs-template)\r\n\r\n_Flask + Vue.js Web Application Template_\r\n\r\n![Vue Logo](/docs/vue-logo.png \"Vue Logo\") ![Flask Logo](/docs/flask-logo.png \"Flask Logo\")\r\n\r\n## Features\r\n* Minimal Flask 1.0 App\r\n* [Flask-RestPlus](http://flask-restplus.readthedocs.io) API with class-based secure resource routing\r\n* Starter [PyTest](http://pytest.org) test suite\r\n* [vue-cli 3](https://github.com/vuejs/vue-cli/blob/dev/docs/README.md) + yarn\r\n* [Vuex](https://vuex.vuejs.org/)\r\n* [Vue Router](https://router.vuejs.org/)\r\n* [Axios](https://github.com/axios/axios/) for backend communication\r\n* Sample Vue [Filters](https://vuejs.org/v2/guide/filters.html)\r\n* Heroku Configuration with one-click deployment + Gunicorn\r\n\r\n## Demo\r\n[Live Demo](https://flask-vuejs-template.herokuapp.com/#/api)\r\n\r\n## Alternatives\r\n\r\nIf this setup is not what you are looking for, here are some similar projects:\r\n\r\n* [oleg-agapov/flask-vue-spa](https://github.com/oleg-agapov/flask-vue-spa)\r\n* [testdrivenio/flask-vue-crud](https://github.com/testdrivenio/flask-vue-crud)\r\n\r\n#### Old Template\r\n\r\nThis template was updated to use a flatter folder structure and use yarn instead of npm.\r\nYou can now run `yarn serve` as well as other yarn commands from the template root directory.\r\nThe old template will be kept in the [npm-template branch](https://github.com/gtalarico/flask-vuejs-template/tree/npm-template) but will not be maintained. \r\n\r\n#### Django\r\n\r\nPrefer Django? Checkout the [gtalarico/django-vue-template](https://github.com/gtalarico/django-vue-template)\r\n\r\n## Template Structure\r\n\r\nThe template uses Flask \u0026 Flask-RestPlus to create a minimal REST style API,\r\nand let's VueJs + vue-cli handle the front end and asset pipline.\r\nData from the python server to the Vue application is passed by making Ajax requests.\r\n\r\n### Application Structure\r\n\r\n#### Rest Api\r\n\r\nThe Api is served using a Flask blueprint at `/api/` using Flask RestPlus class-based\r\nresource routing.\r\n\r\n#### Client Application\r\n\r\nA Flask view is used to serve the `index.html` as an entry point into the Vue app at the endpoint `/`.\r\n\r\nThe template uses vue-cli 3 and assumes Vue Cli \u0026 Webpack will manage front-end resources and assets, so it does overwrite template delimiter.\r\n\r\nThe Vue instance is preconfigured with Filters, Vue-Router, Vuex; each of these can easilly removed if they are not desired.\r\n\r\n#### Important Files\r\n\r\n| Location             |  Content                                   |\r\n|----------------------|--------------------------------------------|\r\n| `/app`               | Flask Application                          |\r\n| `/app/api`           | Flask Rest Api (`/api`)                    |\r\n| `/app/client.py`     | Flask Client (`/`)                         |\r\n| `/src`               | Vue App .                                  |\r\n| `/src/main.js`       | JS Application Entry Point                 |\r\n| `/public/index.html` | Html Application Entry Point (`/`)         |\r\n| `/public/static`     | Static Assets                              |\r\n| `/dist/`             | Bundled Assets Output (generated at `yarn build` |\r\n\r\n\r\n## Installation\r\n\r\n##### Before you start\r\n\r\nBefore getting started, you should have the following installed and running:\r\n\r\n- [X] Yarn - [instructions](https://yarnpkg.com/en/docs/install#mac-stable)\r\n- [X] Vue Cli 3 - [instructions](https://cli.vuejs.org/guide/installation.html)\r\n- [X] Python 3\r\n- [X] Pipenv (optional)\r\n- [X] Heroku Cli (if deploying to Heroku)\r\n\r\n##### Template and Dependencies\r\n\r\n* Clone this repository:\r\n\r\n\t```\r\n\t$ git clone https://github.com/gtalarico/flask-vuejs-template.git\r\n\t```\r\n\r\n* Setup virtual environment, install dependencies, and activate it:\r\n\r\n\t```\r\n\t$ pipenv install --dev\r\n\t$ pipenv shell\r\n\t```\r\n\r\n* Install JS dependencies\r\n\r\n\t```\r\n\t$ yarn install\r\n\t```\r\n\r\n\r\n## Development Server\r\n\r\nRun Flask Api development server:\r\n\r\n```\r\n$ python run.py\r\n```\r\n\r\nFrom another tab in the same directory, start the webpack dev server:\r\n\r\n```\r\n$ yarn serve\r\n```\r\n\r\nThe Vuejs application will be served from `localhost:8080` and the Flask Api\r\nand static files will be served from `localhost:5000`.\r\n\r\nThe dual dev-server setup allows you to take advantage of\r\nwebpack's development server with hot module replacement.\r\n\r\nProxy config in `vue.config.js` is used to route the requests\r\nback to Flask's Api on port 5000.\r\n\r\nIf you would rather run a single dev server, you can run Flask's\r\ndevelopment server only on `:5000`, but you have to build build the Vue app first\r\nand the page will not reload on changes.\r\n\r\n```\r\n$ yarn build\r\n$ python run.py\r\n```\r\n\r\n\r\n## Production Server\r\n\r\nThis template is configured to work with Heroku + Gunicorn and it's pre-configured\r\nto have Heroku build the application before releasing it.\r\n\r\n#### JS Build Process\r\n\r\nHeroku's nodejs buidlpack will handle install for all the dependencies from the `packages.json` file.\r\nIt will then trigger the `postinstall` command which calls `yarn build`.\r\nThis will create the bundled `dist` folder which will be served by whitenoise.\r\n\r\n#### Python Build Process\r\n\r\nThe python buildpack will detect the `Pipfile` and install all the python dependencies.\r\n\r\n#### Production Sever Setup\r\n\r\nHere are the commands we need to run to get things setup on the Heroku side:\r\n\r\n\t```\r\n\t$ heroku apps:create flask-vuejs-template-demo\r\n\t$ heroku git:remote --app flask-vuejs-template-demo\r\n\t$ heroku buildpacks:add --index 1 heroku/nodejs\r\n\t$ heroku buildpacks:add --index 2 heroku/python\r\n\t$ heroku config:set FLASK_ENV=production\r\n\t$ heroku config:set FLASK_SECRET=SuperSecretKey\r\n\r\n\t$ git push heroku\r\n\t```\r\n\r\n### Heroku deployment - One Click Deploy\r\n\r\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/gtalarico/flask-vuejs-template)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtalarico%2Fflask-vuejs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgtalarico%2Fflask-vuejs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtalarico%2Fflask-vuejs-template/lists"}