Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
gtalarico committed Aug 10, 2018
1 parent 28b4cae commit 18ede0f
Show file tree
Hide file tree
Showing 33 changed files with 471 additions and 47 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.DS_Store
node_modules
db.sqlite3
/dist

# local env files
Expand Down
5 changes: 4 additions & 1 deletion Pipfile
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ name = "pypi"

[packages]
django = "*"
django-rest = "*"
djangorestframework = "*"
gunicorn = "*"
whitenoise = "*"
dj-database-url = "*"

[dev-packages]

Expand Down
33 changes: 29 additions & 4 deletions Pipfile.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions Procfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
release: python manage.py migrate
web: gunicorn project.wsgi --log-file -
103 changes: 103 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
# Django Vue Template 🐍✌️

This template is a minimal example for structuring a VueJs + Django Rest Framework.

The goal is to let Vue + Vue Cli handle the frontend and asset bundling,
and use Django + Rest Framework to manage a Rest API + Data Models.

Vue Cli and Django Project template are kept as close as possible to their
original state, with the exception of some configuration that is critical
to the integration of the two frameworks.

### Demo

https://django-vue-template-demo.herokuapp.com/

## Prerequisites

Before getting started you should have the following installed on your computer

- [X] Yarn - [instructions](https://yarnpkg.com/en/docs/install#mac-stable)
- [X] Vue Cli 3 - [instructions](https://cli.vuejs.org/guide/installation.html)
- [X] Python 3
- [X] Pipenv

## Setup Template Locally

```
$ git clone https://www.github.com/gtalarico/django-vue
$ cd django-vue
```

Setup
```
$ yarn install
$ pipenv install
$ python manage.py migrate
```

## Running Development Servers

```
$ python manage.py runserver
```

From another tab in the same directory:

```
$ yarn serve
```

The Vuejs template will be served from `localhost:8080` and the Django Api
will be served form `localhost:8000`.

The dual dev server setup allows you to take advantage of webpack's devserver
with hot module reload. If you would rather run a single dev server, you
can run django's dev server only on `:8000`, but you have to build build the
Vue app first

```
$ yarn build
$ python manage.py runserver
```



## Deploy

* Set `ALLOWED_HOSTS` on `project.settings.production.py`

A Heroku deploymnet is preconfigured:

```
$ heroku apps:create django-vue-template-demo
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku git:remote --app django-vue-template-demo
$ heroku addons:create heroku-postgresql:hobby-dev
$ heroku config:set DISABLE_COLLECTSTATIC=1
$ heroku config:set YARN_PRODUCTION=true
$ heroku config:set DJANGO_SETTINGS_MODULE=project.settings.prod
$ git push heroku
```

## Static Assets

See `settings.prod` and `vue.config.js` for comments on static assets strategy.

This template is configured for development, but not a lot is needed to have a decent
production setup.

The strategy we take is to use Django Whitenoise to serve all static files at `/static/`.

This may seem inefficient for a production server, but that's immediatly solved
by adding a CDN.
Create CDN distribution with Cloudfront or similar, configure the `vue.config.js` `baseUrl` options to set your point to the CDN, and set your CDN's origin back to your domains `/static` url.

The CDN will fetch assets, cache, and then distribute it for you.
This allows for a extremely simple setup without the need to keep a separate static server or
upload static assets.

For more details see [WhiteNoise Docs](http://whitenoise.evans.io/en/stable/django.html)

35 changes: 35 additions & 0 deletions app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"name": "Django VueJs Template",
"description": "",
"repository": "https://github.com/gtalarico/django-vue-template",
"keywords": ["django", "vue", "vuejs", "template", "django rest framework"],
"env": {
"DISABLE_COLLECTSTATIC": {
"description": "Disable Static",
"value": "1"
},
"YARN_PRODUCTION": {
"description": "Install Yarn Dependencies",
"value": "true"
},
"DJANGO_SETTINGS_MODULE": {
"description": "Set Django Settings to Production",
"value": "project.settings.prod"
}
},
"engines": {
"yarn": "1.4.0",
"npm": "6.2.0"
},
"addons": [

],
"buildpacks": [
{
"url": "heroku/python"
},
{
"url": "heroku/nodejs"
}
]
}
1 change: 0 additions & 1 deletion app/client/vue_app/bin/vue

This file was deleted.

1 change: 0 additions & 1 deletion client
Submodule client deleted from cc6575
2 changes: 1 addition & 1 deletion manage.py
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import sys

if __name__ == '__main__':
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings')
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings.dev')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"postinstall": "yarn build"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17"
},
"devDependencies": {
Expand Down Expand Up @@ -45,4 +47,4 @@
"last 2 versions",
"not ie <= 8"
]
}
}
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion project/app/apps.py → project/api/apps.py
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@


class AppConfig(AppConfig):
name = 'app'
name = 'api'
22 changes: 22 additions & 0 deletions project/api/migrations/0001_initial.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Generated by Django 2.1 on 2018-08-10 00:59

from django.db import migrations, models


class Migration(migrations.Migration):

initial = True

dependencies = [
]

operations = [
migrations.CreateModel(
name='Message',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('subject', models.CharField(max_length=200)),
('body', models.TextField()),
],
),
]
File renamed without changes.
13 changes: 13 additions & 0 deletions project/api/models.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
from django.db import models
from rest_framework import serializers


class Message(models.Model):
subject = models.CharField(max_length=200)
body = models.TextField()


class MessageSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Message
fields = ('url', 'subject', 'body', 'pk')
File renamed without changes.
19 changes: 19 additions & 0 deletions project/api/views.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
from django.views.generic import TemplateView
from django.views.decorators.cache import never_cache
from rest_framework import viewsets

from .models import Message, MessageSerializer


# Serve Vue Application
index_view = never_cache(TemplateView.as_view(template_name='index.html'))


class MessageViewSet(viewsets.ModelViewSet):
"""
API endpoint that allows messages to be viewed or edited.
"""
queryset = Message.objects.all()
serializer_class = MessageSerializer


3 changes: 0 additions & 3 deletions project/app/models.py

This file was deleted.

3 changes: 0 additions & 3 deletions project/app/views.py

This file was deleted.

Empty file added project/settings/__init__.py
Empty file.
22 changes: 14 additions & 8 deletions project/settings.py → project/settings/dev.py
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SETTINGS_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
BASE_DIR = os.path.dirname(SETTINGS_DIR)


# Quick-start development settings - unsuitable for production
Expand All @@ -24,8 +25,7 @@

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['*']


# Application definition
Expand All @@ -37,6 +37,8 @@
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'project.api',
]

MIDDLEWARE = [
Expand All @@ -54,7 +56,8 @@
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
# Add dist to
'DIRS': ['dist'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
Expand Down Expand Up @@ -104,17 +107,20 @@
# https://docs.djangoproject.com/en/2.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

# When Vue Builds, path will be `/static/css/...` so we will have Django Serve
# In Production, it's recommended use an alternative approach such as:
# http://whitenoise.evans.io/en/stable/django.html?highlight=django

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'dist', 'static'),
]
Loading

0 comments on commit 18ede0f

Please sign in to comment.