It is research project for natural language processing that aims easy understanding of given corpus.
- Django
- Django REST framework
- Django Whitenoise, CDN Ready
- Vue CLI 3
- Vue Router
- Vuex
- Gunicorn
- Configuration for Heroku Deployment
Location | Content |
---|---|
/backend |
Django Project & Backend Config |
/backend/api |
Django App (/api ) |
/src |
Vue App . |
/src/main.js |
JS Application Entry Point |
/public/index.html |
Html Application Entry Point (/ ) |
/public/static |
Static Assets |
/dist/ |
Bundled Assets Output (generated at yarn build ) |
Before getting started you should have the following installed and running:
- Yarn - instructions
- Vue CLI 3 - instructions
- Python 3 - instructions
- Pipenv - instructions
$ git clone https://github.com/gtalarico/django-vue-template
$ cd django-vue-template
Setup
$ yarn install
$ pipenv install --dev && pipenv shell
$ python manage.py migrate
$ python manage.py runserver
From another tab in the same directory:
$ yarn serve
The Vue application will be served from localhost:8080
and the Django API
and static files will be served from localhost:8000
.
The dual dev server setup allows you to take advantage of
webpack's development server with hot module replacement.
Proxy config in vue.config.js
is used to route the requests
back to django's API on port 8000.
If you would rather run a single dev server, you can run Django's
development server only on :8000
, but you have to build build the Vue app first
and the page will not reload on changes.
$ yarn build
$ python manage.py runserver
Follow this guide to ensure you have pipenv setup
https://www.jetbrains.com/help/pycharm/pipenv.html
Click "Edit Configurations"
Select Django Server under templates
Click + to create a config from the templates
In Environment variables add
PYTHONUNBUFFERED=1;DJANGO_SETTINGS_MODULE=backend.settings.dev
Click Apply then Ok
- Set
ALLOWED_HOSTS
onbackend.settings.prod
$ heroku apps:create django-vue-template-demo
$ heroku git:remote --app django-vue-template-demo
$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev
$ heroku config:set DJANGO_SETTINGS_MODULE=backend.settings.prod
$ heroku config:set DJANGO_SECRET_KEY='...(your django SECRET_KEY value)...'
$ git push heroku
Heroku's nodejs buildpack will handle install for all the dependencies from the package.json
file.
It will then trigger the postinstall
command which calls yarn build
.
This will create the bundled dist
folder which will be served by whitenoise.
The python buildpack will detect the Pipfile
and install all the python dependencies.
The Procfile
will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.
See settings.dev
and vue.config.js
for notes on static assets strategy.
This template implements the approach suggested by Whitenoise Django. For more details see WhiteNoise Documentation
It uses Django Whitenoise to serve all static files and Vue bundled files at /static/
.
While it might seem inefficient, the issue is immediately solved by adding a CDN
with Cloudfront or similar.
Use vue.config.js
> baseUrl
option to set point all your assets to the CDN,
and then set your CDN's origin back to your domains /static
url.
Whitenoise will serve static files to your CDN once, but then those assets are cached and served directly by the CDN.
This allows for an extremely simple setup without the need for a separate static server.