{"id":16259517,"url":"https://github.com/maronato/django-vue-template","last_synced_at":"2026-02-06T05:30:51.656Z","repository":{"id":38134120,"uuid":"236639068","full_name":"Maronato/django-vue-template","owner":"Maronato","description":"Django + Vue template that is ready for production","archived":false,"fork":false,"pushed_at":"2022-12-11T22:15:36.000Z","size":1027,"stargazers_count":3,"open_issues_count":27,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T07:38:47.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Maronato.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}},"created_at":"2020-01-28T02:05:51.000Z","updated_at":"2024-06-22T09:50:29.000Z","dependencies_parsed_at":"2023-01-27T08:01:25.595Z","dependency_job_id":null,"html_url":"https://github.com/Maronato/django-vue-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Maronato/django-vue-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fdjango-vue-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fdjango-vue-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fdjango-vue-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fdjango-vue-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Maronato","download_url":"https://codeload.github.com/Maronato/django-vue-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maronato%2Fdjango-vue-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29152426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-10T16:03:24.581Z","updated_at":"2026-02-06T05:30:51.637Z","avatar_url":"https://github.com/Maronato.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Django + Vue Template\n\nThis template uses Django as the API backend and Vue (with Nuxt) as the Frontend. It also comes preloaded with lots of other services and is production-ready.\n\n## What can this template do for me?\nDjango is a beautiful framework for developing websites, but creating frontends with it feels like the '90s. At the same time, it can be tiresome to develop backends using Node because it comes with zero tools to help you set up database access, authentication, etc.\n\nThis template helps you by integrating Vue and Django pretty well so you can use the best of both worlds to accomplish your tasks.\n\nIt also comes with built-in support for social and password authentication that saves your users inside Django and allows your frontend to authenticate using JWT.\n\nDevelopment is made easier through the use of Docker containers and when you are ready to deploy, everything is wrapped with Docker Swarm, Traefik and Portainer so your project is fully scalable and production-ready from the start.\n\n- [Django + Vue Template](#django--vue-template)\n  - [What can this template do for me?](#what-can-this-template-do-for-me)\n- [Features](#features)\n- [Development](#development)\n  - [Requirements](#requirements)\n  - [Configure the environment](#configure-the-environment)\n  - [Updating the `/etc/hosts` file](#updating-the-etchosts-file)\n  - [Starting the development server](#starting-the-development-server)\n  - [Stopping the development server](#stopping-the-development-server)\n  - [Custom VS Code tasks](#custom-vs-code-tasks)\n  - [Debugging](#debugging)\n- [Setting up Social Providers](#setting-up-social-providers)\n  - [Setting up Google Auth](#setting-up-google-auth)\n  - [Setting up other social providers](#setting-up-other-social-providers)\n    - [1. Setup allauth to recognize the provider](#1-setup-allauth-to-recognize-the-provider)\n    - [2. Create the REST login and connect views to allow communication with Vue](#2-create-the-rest-login-and-connect-views-to-allow-communication-with-vue)\n    - [3. Register the new URLs on the backend](#3-register-the-new-urls-on-the-backend)\n    - [4. Add the provider client and secret keys to Django's database](#4-add-the-provider-client-and-secret-keys-to-djangos-database)\n    - [5. Add the provider client and secret keys to `social-provider.secrets`](#5-add-the-provider-client-and-secret-keys-to-social-providersecrets)\n    - [6. Add the provider to the Nuxt configuration](#6-add-the-provider-to-the-nuxt-configuration)\n      - [Creating a new `_provider`](#creating-a-new-provider)\n      - [Without creating a new `_provider`](#without-creating-a-new-provider)\n- [Login, logout and making requests as the user](#login-logout-and-making-requests-as-the-user)\n- [In Production](#in-production)\n  - [Deploying](#deploying)\n    - [Using Docker Hub](#using-docker-hub)\n    - [Without Docker Hub](#without-docker-hub)\n  - [Now what?](#now-what)\n  - [Extra services](#extra-services)\n\n# Features\n- Easy development and deployment with custom scripts\n- Pre-configured debug settings and tasks for VS Code\n- Fast and async Django backend with [uvicorn](https://www.uvicorn.org/)\n- Complete Vue Frontend with [Nuxt](https://nuxtjs.org/)\n- PWA support with [Nuxt PWA](https://pwa.nuxtjs.org/)\n- Universal Server Side Rendering (SSR)\n- Server Worker with [Celery](http://www.celeryproject.org/)\n- Social and password authentication with [Django Allauth](https://django-allauth.readthedocs.io/en/latest/)\n- [Docker Swarm](https://docs.docker.com/engine/swarm/)-ready\n- Edge Routing and Load Balancing with [Traefik](https://docs.traefik.io/)\n- Metrics and health dashboards with [Prometheus](https://prometheus.io/) and [Grafana](https://grafana.com/)\n- Container Management with [Portainer](https://www.portainer.io/)\n- Powerful relational and in-memory databases with [Postgres](https://www.postgresql.org/) and [Redis](https://redis.io/)\n\n\n# Development\nTo start developing you'll need to install some things:\n\n## Requirements\n- [Docker v19+](https://www.docker.com/)\n- [Docker Compose v1.25+](https://docs.docker.com/compose/)\n\nI recommend you use [VS Code](https://code.visualstudio.com/) as your editor since it allows for easy debugging and has some nice features to help you during development\n\n## Configure the environment\nBefore you can begin, you must set up some variables.\n\nNavigate to the root folder of the project and edit the following files with your preferred settings. The default values should be fine, though\n- `env-backend.env`\n- `env-dev.env`\n- `env-postgres.env`\n\nNow you'll setup your secrets. Make a copy of the following files, renaming the copies without the `.template` (e.g. `django.template.secrets` becomes `django.secrets`)\n- `django.template.secrets`\n- `social-provider.secrets`\n\nFor the `social-provider.secrets`, you'll probably want to grab some Google OAuth2 Credentials. You can follow this [tutorial](https://theonetechnologies.com/blog/post/how-to-get-google-app-client-id-and-client-secret) to learn how.\n\nFeel free to add credentials for more services if you want.\n\n## Updating the `/etc/hosts` file\nIn production, this template makes services available using subdomains. To reproduce this behavior when testing, you'll need to make sure that your computer understands subdomains on `localhost`. If you are using Chrome to develop then you are probably good to go, but otherwise, you might want to configure your `/etc/hosts` to accept subdomains on `localhost`\n\nIf you don't know how to edit your `/etc/hosts` file, follow this [tutorial](https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/)\n\nYou'll need to add the following yo it:\n```\n# Generic stack testing Mappings\n127.0.0.1 traefik.localhost\n127.0.0.1 api.localhost\n# End of section\n```\n\n## Starting the development server\nTo launch all dev servers at once, go to the project root and run:\n```\n./scripts/dev.sh\n```\n\n\u003e You can also use VS Code's [task](https://code.visualstudio.com/docs/editor/tasks) `Dev Up` to launch the dev server.\n\nThis will build all of the required images and deploy the containers.\n\nIt may take some time to launch it for the first time, but sequential launches should be pretty fast.\n\n\u003e **Attention** The first time you run it, Django might be too fast and attempt to migrate before Postgres is ready. If that happens, simply [stop the dev server](#stopping-the-development-server) and try again.\n\nThese are your development URLs:\n\n| URL                                                        | Service            | Description                                                                           |\n| ---------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------- |\n| [`http://localhost`](http://localhost)                     | Frontend           | Frontend of your project.                                                             |\n| [`http://api.localhost/admin`](http://api.localhost/admin) | Backend Admin page | Admin page of the backend and API of your project                                     |\n| [`http://traefik.localhost`](http://traefik.localhost)     | Traefik            | \"Edge router\" that makes it possible to use subdomains and load balance your services |\n\nKeep in mind that you still need to finish setting up Social auth to use it. Everything else is ready to go, including Hot Reloading of your code on both the backend and frontend.\n\n## Stopping the development server\nTo stop, press `ctrl + c` on the terminal running the project.\n\nYou can also type `docker-compose down` from the root folder of your project.\n\n## Custom VS Code tasks\nIf you are using VS Code there are some custom tasks you can use\n- `Dev Up`: Starts the development servers\n- `Dev Down`: Stops the development servers\n- `Open backend shell`: Executes `python manage.py shell` inside the backend. (Actually its `shell_plus` from [django-extensions](https://django-extensions.readthedocs.io/en/latest/installation_instructions.html))\n- `Restart Backend`: Restarts the backend instances\n- `Restart Frontend`: Restarts the frontend instances\n\n## Debugging\nThis template comes with full debug support for VS Code. When you open the project it'll already load 4 debug settings into VS Code. These are\n- `Attach Backend`: Attaches the debugger to the Backend server. (Auto disconnects when backend code changes)\n- `Launch Frontend Client`: Launches a Chrome window with the debugger attached\n- `Attach Frontend Client`: Attaches the debugger to an existing Chrome window that supports debugging\n- `Attach Frontend Server`: Attaches the debugger to the frontend server (not the backend, just the server that does Server Side Rendering)\n\n# Setting up Social Providers\nThis template uses [Django allauth](https://django-allauth.readthedocs.io/en/latest/overview.html) and [Django Rest Auth](https://django-rest-auth.readthedocs.io/en/latest/introduction.html) on the backend for social auth. On the frontend, it uses [Nuxt Auth](https://auth.nuxtjs.org/) with a custom provider.\n\nIf you need to modify the auth process, read the documentation of those libraries to learn how. Here I'll give an overview of what you'll need to do.\n\n## Setting up Google Auth\nGoogle auth is mostly setup. All you need to do is create the provider instance on the Django Admin page.\n\nTo do so:\n- open up your backend on [`http://api.localhost`](http://api.localhost) or wherever it is\n- log in using your superuser account (defined in your `env-backend.env` file)\n- click on **Social Application**\n- click on **Add Social Application**\n- Select `Google` as the *Provider*\n- use `Google` as the *Name* \n- fill your client ID and secret\n- Finally, click on **Choose all** under the *Sites* box to add the provider to all sites. Don't worry if the site name is `example.com`\n- Save\n\nThat's it. You can now use your Google account to sign up and sign in\n\n\u003e **Note**: You'll need to do this both on your dev server and prod server as they do not share databases.\n\n## Setting up other social providers\nNot all providers are created equal, but most should follow the same steps to setup.\n\nOn the **backend** you'll need to:\n1. Setup allauth to recognize the provider\n2. Create the REST login and connect views to allow communication with Vue\n3. Register the new URLs on the backend\n4. Add the provider's client and secret keys to Django's database\n \nOn the **frontend** you'll need to:\n\n5. Add the provider's client and secret keys to `social-provider.secrets`\n6. Add the provider to the Nuxt configuration\n\nI'll go through all of those by one\n\n### 1. Setup allauth to recognize the provider\nFirst, you'll need to enable the provider. To do so, add the required provider to the list of `INSTALLED_APPS` on your `settings.py`.\n\nIt should look like: `'allauth.socialaccount.providers.facebook'`\n\n\u003e The full list can be found [here](https://django-allauth.readthedocs.io/en/latest/installation.html)\n\nThen, check out the specifics of your provider [on allauth's docs](https://django-allauth.readthedocs.io/en/latest/providers.html). Some providers require special configs to be added to `settings.py`\n\n### 2. Create the REST login and connect views to allow communication with Vue\nYou'll now need to create a REST view because allauth cannot natively communicate through REST.\n\nGo to `backend/social/views.py` and follow the example from Google.\n\nThis is also well documented on [Django Rest Auth](https://django-rest-auth.readthedocs.io/en/latest/installation.html#social-authentication-optional)'s page about it.\n\n**Attention**: Since our backend only receives the `code`, you'll need to add the extra property `client_class = OAuth2Client` to your provider views.\n\nExample for the Facebook Provider:\n```python\nfrom allauth.socialaccount.providers.facebook.views import FacebookOAuth2Adapter\n\nclass FacebookLogin(SocialLoginView):\n adapter_class = FacebookOAuth2Adapter\n permission_classes = (AllowAny,)\n callback_url = f'{os.environ.get(\"FRONTEND_URL\")}/login/callback'\n client_class = OAuth2Client\n\n\nclass FacebookConnect(SocialConnectView):\n adapter_class = FacebookOAuth2Adapter\n callback_url = f'{os.environ.get(\"FRONTEND_URL\")}/login/callback'\n client_class = OAuth2Client\n```\n\n### 3. Register the new URLs on the backend\nGo to `backend/social/urls.py` and edit it to import your new provider views from `.views`.\n\nAdd them to `connect_urlpatterns` and `login_urlpatterns` following the Google provider examples.\n\n### 4. Add the provider client and secret keys to Django's database\nWith your development or production server deployed:\n- open up your backend on [`http://api.localhost`](http://api.localhost) or wherever it is\n- log in using your superuser account (defined in your `env-backend.env` file)\n- click on **Social Application**\n- click on **Add Social Application**\n- Select your new provider as the *Provider*\n- use your provider's name (e.g. Facebook) as the *Name* \n- fill your client ID and secret\n- Finally, click on **Choose all** under the *Sites* box to add the provider to all sites. Don't worry if the site name is `example.com`\n- Save\n\n### 5. Add the provider client and secret keys to `social-provider.secrets`\nSimply open `social-provider.secrets` and edit it adding your provider's info.\n\n### 6. Add the provider to the Nuxt configuration\nOpen `/frontend/nuxt.config.js`.\n\nScroll until you find the `auth` key on the config object and look for it's `strategies` property. It should at least have the `google` key with its configuration.\n\nAt this point, you have two options. You can either create a `_provider` for your new provider strategy, or you can configure it all right on `nuxt.config.js`.\n\n#### Creating a new `_provider`\nThis makes things a little more organized, but is completely optional.\n\nYou'll need to create a new file on `frontend/plugins/auth/providers` with your provider's name.\n\nYou can follow the example on `google.js`, but its format should be something like:\n```js\nconst { assignDefaults } = require('@nuxtjs/auth/lib/providers/_utils')\n\n// Change to your provider's name\nmodule.exports = function \u003cYourProvider\u003e(strategy) {\n assignDefaults(strategy, {\n // Required\n _scheme: '~/plugins/auth/scheme/social.js',\n\n // Add your provider's authorization endpoint\n authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth',\n \n // Don't need to change this\n userinfo_endpoint: '/auth/user/',\n\n // Update with the name of the url you registered on step 3\n login_endpoint: '/auth/social/login/\u003cyour-provider\u003e/',\n connect_endpoint: '/auth/social/connect/\u003cyour-provider\u003e/',\n\n // Add which scopes you'll want by default\n scope: ['openid', 'profile', 'email']\n })\n}\n```\n\nThen you can go back to `nuxt.config.js` and add it to the list of `strategies` following the google example.\n\nTo fill the `client_id` value, use the `socialProviderSecrets` object. It is created from the values on `social-provider.secrets`.\n\n#### Without creating a new `_provider`\n\nJust add it to the list of `strategies`. It should look like:\n```js\n{\n strategies: {\n // ...\n yourProvider: {\n // Required\n _scheme: '~/plugins/auth/scheme/social.js',\n\n // Add your provider's authorization endpoint\n authorization_endpoint: 'https://accounts.google.com/o/oauth2/auth',\n \n // Don't need to change this\n userinfo_endpoint: '/auth/user/',\n\n // Update with the name of the url you registered on step 3\n login_endpoint: '/auth/social/login/\u003cyour-provider\u003e/',\n connect_endpoint: '/auth/social/connect/\u003cyour-provider\u003e/',\n\n // Add which scopes you'll want by default\n scope: ['openid', 'profile', 'email'],\n\n // Your provider's client_id from social-provider.secrets\n client_id: socialProviderSecrets.YOUR_PROVIDER_CLIENT_ID\n }\n }\n}\n```\n\n# Login, logout and making requests as the user\nLogin on the frontend is managed by [Nuxt Auth](https://auth.nuxtjs.org/). I recommend you read more about it before going on.\n\nYour most used commands will be:\n```js\n// Log in using a specific social provider (e.g. 'google')\nthis.$auth.loginWith(yourProvider)\n\n// Logout\nthis.$auth.logout()\n\n// Check if the user is logged in\nthis.$auth.loggedIn\n\n// With a user logged in, make a request to the backend with their credentials (uses Axios behind the scenes)\nthis.$auth.request(axiosRequestParams)\n\n// With a user logged in, connect another social account to that user\nthis.$auth.connect(providerToConnect)\n\n// With the user logged in, get their data\nthis.$auth.user\n\n// With the user logged in, get their connected accounts\nthis.$auth.user.accounts\n\n// With a user logged in, disconnect an account\n// (Get the account from this.$auth.user.accounts)\nthis.$auth.disconnect(account)\n```\n\n# In Production\nThis template is also production-ready with deployment scripts and more.\n\n## Deploying\nBefore you deploy your app to the world, you'll need to configure some more things.\n\nI recommend you use [Docker Hub](https://hub.docker.com/) to make updating your production environment easier down the line, but you can also build your images on the production computers if you prefer.\n\n### Using Docker Hub\n**On your development computer**, open `env-prod.env` and fill it up with your information.\n\nNow you'll need to build your project onto images. To do so, just run\n```\n./scripts/build.sh\n```\n\nThis will do 2 things:\n- Create two `docker-stack` files that'll you'll use to set up your production environment\n- Build the images\n\nOnce your images are built, you may push them to Docker Hub with\n```\n./scripts/push.sh\n```\n\n**On your production machine**, get the following files transferred or copied from your development computer:\n- `docker-stack-prod.yml` (or `latest`, your choice)\n- `django.secrets` filled with your production secrets\n- `social-provider.secrets` filled with your production secrets\n- `.env` with your production settings\n- `env-prod.env` with your production settings\n- the `scripts` folder (at least `cloud_setup.sh` and `deploy.sh`)\n\nNow you have everything you need.\n\nRun:\n```bash\n# This assumes that your production machine is running Ubuntu\n# Modify it with the correct package managers if it is not\n./scripts/cloud_setup.sh\n```\nThis will install Docker, Docker Compose ask you some questions and, then, deploy your whole project architecture using Docker Swarm\n\n### Without Docker Hub\nIf you do not want to use Docker Hub, you'll need to clone your project repository onto your production machine.\n\nAfter that make sure that your environment variables and secrets are all updated with production values.\n\nThen you'll need to build your project. To do so, run\n```\n./scripts/build.sh\n```\nAnd then run the setup:\n```bash\n# This assumes that your production machine is running Ubuntu\n# Modify it with the correct package managers if it is not\n./scripts/cloud_setup.sh\n```\nThis will install Docker, Docker Compose ask you some questions and, then, deploy your whole project architecture using Docker Swarm\n\n## Now what?\nAssuming everything went ok and you also have a valid domain pointing to your server, you'll be able to access your services through it.\n\nFirst, go to `https://traefik.\u003cyour-domain\u003e` and make sure everything is ok with TLS fully working.\n\nIf so, you'll need to register the social accounts to the backend as you did before. Check out the [instructions](#4-add-the-provider-client-and-secret-keys-to-djangos-database) to remember how.\n\nNow everything should be working fine!\n\n## Extra services\nIf you set the `USE_EXTRA` on the `env-prod.env` file to `true`, then you'll have some more services available.\n\n| URL                                | Service            | Description                                                                                  |\n| ---------------------------------- | ------------------ | -------------------------------------------------------------------------------------------- |\n| `https://\u003cyour-domain\u003e`            | Frontend           | Frontend of your project.                                                                    |\n| `https://api.\u003cyour-domain\u003e/admin`  | Backend Admin page | Admin page of the backend and API of your project                                            |\n| `https://traefik.\u003cyour-domain\u003e`    | Traefik            | \"Edge router\" that makes it possible to use subdomains and load balance your services        |\n| `https://portainer.\u003cyour-domain\u003e`  | Portainer          | Container management service to manage all of your services                                  |\n| `https://grafana.\u003cyour-domain\u003e`    | Grafana            | Observability tool with lots of dashboards showing info about your project                   |\n| `https://prometheus.\u003cyour-domain\u003e` | Prometheus         | Metrics aggregator that fetches data from other services and makes them available to Grafana |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaronato%2Fdjango-vue-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaronato%2Fdjango-vue-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaronato%2Fdjango-vue-template/lists"}