This template is a boilerplate to explain geodjango with front-end implementation.
If you are new to GeoDjango check out the tutorial for this repo.
- Django
- Django REST framework
- Django Whitenoise, CDN Ready
- Vue CLI 3
- Vue Router
- Vuex
- Gunicorn
- Configuration for Heroku Deployment
Components | Content |
---|---|
/map |
Leaflet Map |
/address |
Searching via address |
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
$ pip install -r requirements.txt
$ python manage.py migrate
- Create .env file with your geodatabase credentials: (geospatial database is just PostgreSQL database with postgis extension)
DB_NAME=YOUR_DB_NAME
DB_USER=YOUR_DB_USER
DB_PASSWORD=YOUR_PASSWORD
$ 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
.
- 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
I build it using django-vue-template. Check it out for more information.