├── .babelrc ├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── LICENSE ├── README.md ├── backend ├── __init__.py ├── admin.py ├── apps.py ├── migrations │ └── __init__.py ├── models.py ├── templates │ └── index.html ├── tests.py ├── urls.py └── views.py ├── djangovue ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py ├── frontend ├── img │ └── logo.png └── js │ ├── App.vue │ └── main.js ├── manage.py ├── package.json ├── requirements.txt └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '29 6 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | 28 | strategy: 29 | fail-fast: false 30 | matrix: 31 | language: [ 'javascript', 'python' ] 32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 33 | # Learn more: 34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 35 | 36 | steps: 37 | - name: Checkout repository 38 | uses: actions/checkout@v2 39 | 40 | # Initializes the CodeQL tools for scanning. 41 | - name: Initialize CodeQL 42 | uses: github/codeql-action/init@v1 43 | with: 44 | languages: ${{ matrix.language }} 45 | # If you wish to specify custom queries, you can do so here or in a config file. 46 | # By default, queries listed here will override any specified in a config file. 47 | # Prefix the list here with "+" to use these queries and those in the config file. 48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 49 | 50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 51 | # If this step fails, then you should remove it and run the build manually (see below) 52 | - name: Autobuild 53 | uses: github/codeql-action/autobuild@v1 54 | 55 | # ℹ️ Command-line programs to run using the OS shell. 56 | # 📚 https://git.io/JvXDl 57 | 58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 59 | # and modify them (or add more) to build your code if your project 60 | # uses a compiled language 61 | 62 | #- run: | 63 | # make bootstrap 64 | # make release 65 | 66 | - name: Perform CodeQL Analysis 67 | uses: github/codeql-action/analyze@v1 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | venv 2 | .vscode 3 | db.sqlite3 4 | __pycache__/ 5 | *.py[cod] 6 | *.log 7 | node_modules/ 8 | build/ 9 | webpack-stats.json 10 | package-lock.json 11 | frontend/bundles/* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Mike Borozdin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # djangovue 2 | ![Vue.js Logo](https://github.com/mikebz/djangovue/raw/master/frontend/img/logo.png "Vue.js") 3 | 4 | This is a starter project for Django with Vue.js. I fell in love with the readability you get in Vue.js and 5 | decided to create a project where all components are laid out in the most readable way. 6 | 7 | Note that this doesn't have features like hot reloading for webpack, but it's a good webpack starting point to build on. 8 | 9 | ## How to get started? 10 | 1. Get a copy of the repo on your machine 11 | ``` 12 | git clone https://github.com/mikebz/djangovue.git 13 | cd djangovue 14 | ``` 15 | 16 | 2. Set up virtual environment 17 | ``` 18 | python3 -m venv venv 19 | source venv/bin/activate 20 | ``` 21 | 22 | 3. Install the necessary libraries. 23 | ``` 24 | pip install -r requirements.txt 25 | npm install 26 | ``` 27 | 28 | 4. Build the Vue.js front end. 29 | ``` 30 | npm run build 31 | ``` 32 | 33 | 5. Run the Django project 34 | ``` 35 | python3 manage.py runserver 36 | ``` 37 | 38 | At this point in time you should be able to navigate to your localhost:8000 and see a template rendered. You can also run 39 | the `npm run watch` in a separate window if you want to rebuild your frontend. Note that for simplicity there is no hot 40 | reloading so you would need to refresh the page when you save your front end files. 41 | 42 | ## Sources 43 | This only worked because people before me created some wonderful examples. 44 | - https://github.com/djstein/vue-django-webpack 45 | - https://github.com/ezhome/django-webpack-loader 46 | -------------------------------------------------------------------------------- /backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebz/djangovue/f8f2aeaa6640da2e947a0578bb55bb103647dded/backend/__init__.py -------------------------------------------------------------------------------- /backend/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /backend/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class BackendConfig(AppConfig): 5 | name = 'backend' 6 | -------------------------------------------------------------------------------- /backend/migrations/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebz/djangovue/f8f2aeaa6640da2e947a0578bb55bb103647dded/backend/migrations/__init__.py -------------------------------------------------------------------------------- /backend/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /backend/templates/index.html: -------------------------------------------------------------------------------- 1 | {% load render_bundle from webpack_loader %} 2 | 3 | 4 | 5 | 6 | 7 | Django Vue.js App 8 | 9 | 10 |
11 | {% render_bundle 'main' %} 12 | 13 | -------------------------------------------------------------------------------- /backend/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /backend/urls.py: -------------------------------------------------------------------------------- 1 | from django.conf.urls import url 2 | from . import views 3 | 4 | 5 | urlpatterns = [ 6 | url(r'^$', views.index, name='index'), 7 | ] 8 | -------------------------------------------------------------------------------- /backend/views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | 3 | 4 | def index(request): 5 | """ 6 | serving up the main app page which loads the Vue.js from WebPack 7 | """ 8 | context = { 9 | 'data': 'value', 10 | } 11 | return render(request, 'index.html', context) 12 | -------------------------------------------------------------------------------- /djangovue/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebz/djangovue/f8f2aeaa6640da2e947a0578bb55bb103647dded/djangovue/__init__.py -------------------------------------------------------------------------------- /djangovue/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for djangovue project. 3 | 4 | Generated by 'django-admin startproject' using Django 1.11.5. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.11/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/1.11/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = '(0&w0&rj&i7^jmo9#g*!#fua2q$j6umcnegqaw+gyzi-hal5!=' 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = [] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | 'django.contrib.admin', 35 | 'django.contrib.auth', 36 | 'django.contrib.contenttypes', 37 | 'django.contrib.sessions', 38 | 'django.contrib.messages', 39 | 'django.contrib.staticfiles', 40 | 'backend', 41 | 'webpack_loader', 42 | ] 43 | 44 | MIDDLEWARE = [ 45 | 'django.middleware.security.SecurityMiddleware', 46 | 'django.contrib.sessions.middleware.SessionMiddleware', 47 | 'django.middleware.common.CommonMiddleware', 48 | 'django.middleware.csrf.CsrfViewMiddleware', 49 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 50 | 'django.contrib.messages.middleware.MessageMiddleware', 51 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 52 | ] 53 | 54 | ROOT_URLCONF = 'djangovue.urls' 55 | 56 | TEMPLATES = [ 57 | { 58 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 59 | 'DIRS': [], 60 | 'APP_DIRS': True, 61 | 'OPTIONS': { 62 | 'context_processors': [ 63 | 'django.template.context_processors.debug', 64 | 'django.template.context_processors.request', 65 | 'django.contrib.auth.context_processors.auth', 66 | 'django.contrib.messages.context_processors.messages', 67 | ], 68 | }, 69 | }, 70 | ] 71 | 72 | WSGI_APPLICATION = 'djangovue.wsgi.application' 73 | 74 | 75 | # Database 76 | # https://docs.djangoproject.com/en/1.11/ref/settings/#databases 77 | 78 | DATABASES = { 79 | 'default': { 80 | 'ENGINE': 'django.db.backends.sqlite3', 81 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 82 | } 83 | } 84 | 85 | 86 | # Password validation 87 | # https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators 88 | 89 | AUTH_PASSWORD_VALIDATORS = [ 90 | { 91 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 92 | }, 93 | { 94 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 95 | }, 96 | { 97 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 98 | }, 99 | { 100 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 101 | }, 102 | ] 103 | 104 | 105 | # Internationalization 106 | # https://docs.djangoproject.com/en/1.11/topics/i18n/ 107 | 108 | LANGUAGE_CODE = 'en-us' 109 | 110 | TIME_ZONE = 'UTC' 111 | 112 | USE_I18N = True 113 | 114 | USE_L10N = True 115 | 116 | USE_TZ = True 117 | 118 | 119 | # Static files (CSS, JavaScript, Images) 120 | # https://docs.djangoproject.com/en/1.11/howto/static-files/ 121 | 122 | STATIC_URL = '/static/' 123 | 124 | STATICFILES_DIRS = ( 125 | os.path.join(BASE_DIR, 'frontend'), 126 | ) 127 | 128 | WEBPACK_LOADER = { 129 | 'DEFAULT': { 130 | 'BUNDLE_DIR_NAME': 'bundles/', 131 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json') 132 | } 133 | } -------------------------------------------------------------------------------- /djangovue/urls.py: -------------------------------------------------------------------------------- 1 | """djangovue URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/1.11/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.conf.urls import url, include 14 | 2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 15 | """ 16 | from django.conf.urls import url, include 17 | from django.contrib import admin 18 | 19 | urlpatterns = [ 20 | url(r'^admin/', admin.site.urls), 21 | url(r'^$', include('backend.urls')), 22 | ] 23 | -------------------------------------------------------------------------------- /djangovue/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for djangovue project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.11/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangovue.settings") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /frontend/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikebz/djangovue/f8f2aeaa6640da2e947a0578bb55bb103647dded/frontend/img/logo.png -------------------------------------------------------------------------------- /frontend/js/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | 33 | 61 | -------------------------------------------------------------------------------- /frontend/js/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == "__main__": 6 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djangovue.settings") 7 | try: 8 | from django.core.management import execute_from_command_line 9 | except ImportError: 10 | # The above import may fail for some other reason. Ensure that the 11 | # issue is really that Django is missing to avoid masking other 12 | # exceptions on Python 2. 13 | try: 14 | import django 15 | except ImportError: 16 | raise ImportError( 17 | "Couldn't import Django. Are you sure it's installed and " 18 | "available on your PYTHONPATH environment variable? Did you " 19 | "forget to activate a virtual environment?" 20 | ) 21 | raise 22 | execute_from_command_line(sys.argv) 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "djangovue", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "Mike Borozdin", 7 | "license": "MIT", 8 | "scripts": { 9 | "build": "cross-env NODE_ENV=prod webpack --progress --config webpack.config.js", 10 | "watch": "cross-env NODE_ENV=dev webpack --progress --config webpack.config.js --watch" 11 | }, 12 | "devDependencies": { 13 | "babel": "^6.23.0", 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^6.1.2", 16 | "babel-preset-env": "^1.6.0", 17 | "babel-preset-es2015": "^6.24.1", 18 | "cross-env": "^5.0.5", 19 | "css-loader": "^0.28.7", 20 | "file-loader": "^0.11.2", 21 | "node-libs-browser": "^0.5.0", 22 | "vue-loader": "^12.2.2", 23 | "vue-template-compiler": "^2.4.2", 24 | "webpack": "^3.5.6", 25 | "webpack-bundle-tracker": "0.0.5", 26 | "webpack-dev-server": "^2.8" 27 | }, 28 | "dependencies": { 29 | "vue": "^2.4.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | astroid==1.5.3 2 | Django==4.2.22 3 | django-webpack-loader==0.5.0 4 | isort==4.2.15 5 | lazy-object-proxy==1.3.1 6 | mccabe==0.6.1 7 | pep8==1.7.0 8 | pylint==1.7.2 9 | pytz==2017.2 10 | six==1.10.0 11 | wrapt==1.10.11 12 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var webpack = require('webpack'); 3 | var BundleTracker = require('webpack-bundle-tracker'); 4 | 5 | 6 | module.exports = { 7 | context: __dirname, 8 | 9 | entry: [ 10 | './frontend/js/main' 11 | ], 12 | 13 | output: { 14 | path: path.resolve('./frontend/bundles/'), 15 | filename: "[name]-[hash].js", 16 | }, 17 | 18 | plugins: [ 19 | new webpack.NoEmitOnErrorsPlugin(), 20 | new BundleTracker({filename: './webpack-stats.json'}), 21 | ], 22 | 23 | module: { 24 | loaders: [ 25 | { 26 | test: /\.vue$/, 27 | loader: 'vue-loader', 28 | options: { 29 | loaders: { 30 | } 31 | } 32 | }, 33 | { 34 | test: /\.js$/, 35 | loader: 'babel-loader', 36 | exclude: /node_modules/ 37 | }, 38 | { 39 | test: /\.(png|jpg|gif|svg)$/, 40 | loader: 'file-loader', 41 | options: { 42 | name: '[name].[ext]?[hash]', 43 | publicPath: 'static/bundles/' 44 | } 45 | } 46 | ], 47 | }, 48 | } 49 | --------------------------------------------------------------------------------