{"id":13419484,"url":"https://github.com/gtalarico/django-vue-template","last_synced_at":"2025-05-15T17:08:12.345Z","repository":{"id":38416879,"uuid":"144214623","full_name":"gtalarico/django-vue-template","owner":"gtalarico","description":"Django Rest + Vue JS Template","archived":false,"fork":false,"pushed_at":"2022-12-08T17:16:02.000Z","size":528,"stargazers_count":1601,"open_issues_count":44,"forks_count":407,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-04-07T22:09:53.893Z","etag":null,"topics":["django","django-rest-framework","rest-api","vue","vuecli","vuejs","whitenoise"],"latest_commit_sha":null,"homepage":"https://django-vue-template-demo.herokuapp.com/","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":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-09T23:51:05.000Z","updated_at":"2025-04-01T03:30:55.000Z","dependencies_parsed_at":"2022-08-09T04:00:11.979Z","dependency_job_id":null,"html_url":"https://github.com/gtalarico/django-vue-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%2Fdjango-vue-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fdjango-vue-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fdjango-vue-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtalarico%2Fdjango-vue-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gtalarico","download_url":"https://codeload.github.com/gtalarico/django-vue-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384988,"owners_count":22062422,"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":["django","django-rest-framework","rest-api","vue","vuecli","vuejs","whitenoise"],"created_at":"2024-07-30T22:01:16.660Z","updated_at":"2025-05-15T17:08:07.337Z","avatar_url":"https://github.com/gtalarico.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"# Django Vue Template ✌️ 🐍\n\n![Vue Logo](/src/assets/logo-vue.png \"Vue Logo\")\n![Django Logo](/src/assets/logo-django.png \"Django Logo\")\n\nThis template is a minimal example for an application using Vue and Django.\n\nVue and Django are clearly separated in this project. Vue, Yarn and Webpack handles all frontend logic and bundling assessments. Django and Django REST framework to manage Data Models, Web API and serve static files.\n\nWhile it's possible to add endpoints to serve django-rendered html responses, the intention is to use Django primarily for the backend, and have view rendering and routing and handled by Vue + Vue Router as a Single Page Application (SPA).\n\nOut of the box, Django will serve the application entry point (`index.html` + bundled assets) at `/` ,\ndata at `/api/`, and static files at `/static/`. Django admin panel is also available at `/admin/` and can be extended as needed.\n\nThe application templates from Vue CLI `create` and Django `createproject` are kept as close as possible to their\noriginal state, except where a different configuration is needed for better integration of the two frameworks.\n\n#### Alternatives\n\nIf this setup is not what you are looking for, you might want look at other similar projects:\n\n* [ariera/django-vue-template](https://github.com/ariera/django-vue-template)\n* [vchaptsev/cookiecutter-django-vue](https://github.com/vchaptsev/cookiecutter-django-vue)\n\nPrefer Flask? Checkout my [gtalarico/flask-vuejs-template](https://github.com/gtalarico/flask-vuejs-template)\n\n### Demo\n\n[Live Demo](https://django-vue-template-demo.herokuapp.com/)\n\n### Includes\n\n* Django\n* Django REST framework\n* Django Whitenoise, CDN Ready\n* Vue CLI 3\n* Vue Router\n* Vuex\n* Gunicorn\n* Configuration for Heroku Deployment\n\n\n### Template Structure\n\n\n| Location             |  Content                                   |\n|----------------------|--------------------------------------------|\n| `/backend`           | Django Project \u0026 Backend Config            |\n| `/backend/api`       | Django App (`/api`)                        |\n| `/src`               | Vue App .                                  |\n| `/src/main.js`       | JS Application Entry Point                 |\n| `/public/index.html` | [Html Application Entry Point](https://cli.vuejs.org/guide/html-and-static-assets.html) (`/`)         |\n| `/public/static`     | Static Assets                              |\n| `/dist/`             | Bundled Assets Output (generated at `yarn build`) |\n\n## Prerequisites\n\nBefore getting started you should have the following installed and running:\n\n- [X] Yarn - [instructions](https://yarnpkg.com/en/docs/install)\n- [X] Vue CLI 3 - [instructions](https://cli.vuejs.org/guide/installation.html)\n- [X] Python 3 - [instructions](https://wiki.python.org/moin/BeginnersGuide)\n- [X] Pipenv - [instructions](https://pipenv.readthedocs.io/en/latest/install/#installing-pipenv)\n\n## Setup Template\n\n```\n$ git clone https://github.com/gtalarico/django-vue-template\n$ cd django-vue-template\n```\n\nSetup\n```\n$ yarn install\n$ pipenv install --dev \u0026\u0026 pipenv shell\n$ python manage.py migrate\n```\n\n## Running Development Servers\n\n```\n$ python manage.py runserver\n```\n\nFrom another tab in the same directory:\n\n```\n$ yarn serve\n```\n\nThe Vue application will be served from [`localhost:8080`](http://localhost:8080/) and the Django API\nand static files will be served from [`localhost:8000`](http://localhost:8000/).\n\nThe dual dev server setup allows you to take advantage of\nwebpack's development server with hot module replacement.\nProxy config in [`vue.config.js`](/vue.config.js) is used to route the requests\nback to django's API on port 8000.\n\nIf you would rather run a single dev server, you can run Django's\ndevelopment server only on `:8000`, and you have to build the Vue app first\nand the page will not reload on changes.\n\n```\n$ yarn build\n$ python manage.py runserver\n```\n## Pycharm additional configuration\n\nFollow this guide to ensure you have pipenv setup\n\nhttps://www.jetbrains.com/help/pycharm/pipenv.html\n\nClick \"Edit Configurations\"\n\nSelect Django Server under templates\n\nClick + to create a config from the templates\n\nIn Environment variables add\n\n```\nPYTHONUNBUFFERED=1;DJANGO_SETTINGS_MODULE=backend.settings.dev\n```\n\nClick Apply then Ok\n\n## Deploy\n\n* Set `ALLOWED_HOSTS` on [`backend.settings.prod`](/backend/settings/prod.py)\n\n### Heroku Server\n\n```\n$ heroku apps:create django-vue-template-demo\n$ heroku git:remote --app django-vue-template-demo\n$ heroku buildpacks:add --index 1 heroku/nodejs\n$ heroku buildpacks:add --index 2 heroku/python\n$ heroku addons:create heroku-postgresql:hobby-dev\n$ heroku config:set DJANGO_SETTINGS_MODULE=backend.settings.prod\n$ heroku config:set DJANGO_SECRET_KEY='...(your django SECRET_KEY value)...'\n\n$ git push heroku\n```\n\nHeroku's nodejs buildpack will handle install for all the dependencies from the [`package.json`](/package.json) file.\nIt will then trigger the `postinstall` command which calls `yarn build`.\nThis will create the bundled `dist` folder which will be served by whitenoise.\n\nThe python buildpack will detect the [`Pipfile`](/Pipfile) and install all the python dependencies.\n\nThe [`Procfile`](/Procfile) will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.\n\n##### Heroku One Click Deploy\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/gtalarico/django-vue-template)\n\n## Static Assets\n\nSee `settings.dev` and [`vue.config.js`](/vue.config.js) for notes on static assets strategy.\n\nThis template implements the approach suggested by Whitenoise Django.\nFor more details see [WhiteNoise Documentation](http://whitenoise.evans.io/en/stable/django.html)\n\nIt uses Django Whitenoise to serve all static files and Vue bundled files at `/static/`.\nWhile it might seem inefficient, the issue is immediately solved by adding a CDN\nwith Cloudfront or similar.\nUse [`vue.config.js`](/vue.config.js) \u003e `baseUrl` option to set point all your assets to the CDN,\nand then set your CDN's origin back to your domains `/static` url.\n\nWhitenoise will serve static files to your CDN once, but then those assets are cached\nand served directly by the CDN.\n\nThis allows for an extremely simple setup without the need for a separate static server.\n\n[Cloudfront Setup Wiki](https://github.com/gtalarico/django-vue-template/wiki/Setup-CDN-on-Cloud-Front)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtalarico%2Fdjango-vue-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgtalarico%2Fdjango-vue-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtalarico%2Fdjango-vue-template/lists"}