forked from gtalarico/django-vue-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
33 changed files
with
471 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
.DS_Store | ||
node_modules | ||
db.sqlite3 | ||
/dist | ||
|
||
# local env files | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 - |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
] | ||
} |
This file was deleted.
Oops, something went wrong.
Submodule client
deleted from
cc6575
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,4 +2,4 @@ | |
|
||
|
||
class AppConfig(AppConfig): | ||
name = 'app' | ||
name = 'api' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
||
|
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.