Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pawanpaudel93/djavue-template
djavue-template is a Django+VueJs combo template to start with the latest Django v3, VueJs v2 and Vue-cli v4.
https://github.com/pawanpaudel93/djavue-template
django django-webpack-loader djavue-template webpack
Last synced: about 1 month ago
JSON representation
djavue-template is a Django+VueJs combo template to start with the latest Django v3, VueJs v2 and Vue-cli v4.
- Host: GitHub
- URL: https://github.com/pawanpaudel93/djavue-template
- Owner: pawanpaudel93
- Created: 2020-05-10T16:47:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:21:36.000Z (almost 2 years ago)
- Last Synced: 2023-03-03T15:12:38.015Z (almost 2 years ago)
- Topics: django, django-webpack-loader, djavue-template, webpack
- Language: Python
- Homepage:
- Size: 1.41 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# djavue-template
djavue-template is a Django+VueJs combo template to start with the latest Django v3, VueJs v2 and Vue-cli v4. The django basically is used here for the API and serving the static files part and the Vue is for the frontend part.
Webpack is used to generate static bundles without django's staticfiles or opaque wrappers and Django webpack loader [django-webpack-loader](https://github.com/owais/django-webpack-loader) is used which consumes the output generated by [webpack-bundle-tracker](https://github.com/owais/webpack-bundle-tracker) and lets you use the generated bundles in django. django-webpack-loader settings is present in settings.py which consumes the output generated by webpack bundle tracker with the help of webpack-stats json file. webpack-stats.json is self created as it is configured in the webpack plugins with the filename. If you want to learn more about it then you can visit the github repo and `Vue.config.js` file has vue config for webpack and others which you can learn about it at [VueJs cli config page](https://cli.vuejs.org/config/)
## Development Installation
- Clone the repository
`git clone https://github.com/pawanpaudel93/djavue-template.git`
- Rename `.env-example` to .env and modify the values as you like and keeping the same value for development is okay.
- Install pipenv from [pipenv repo](https://github.com/pypa/pipenv) and create
a virtual environment and install django and django dependencies with it from the Pipfile.
- And `npm install` to install all the vue dependencies from package.json
- Run `python manage.py makemigrations && python manage.py migrate` to make and migrate the migrations to SQLite database (SQLite used for development purpose) or you can set any other database in the `settings.py` and then run `python manage.py runserver` to run the django development server.
- In the next terminal tab or command prompt run `npm run serve` to compile and hot-reload for development. The vuejs will run at `localhost:8080` or `127.0.0.1:8080`.
- Now you can access the development server at `localhost:8000` or `127.0.0.1:8000` to view vuejs web app served through django consumed using django-webpack-loader.
## Heroku Deployment
[](https://heroku.com/deploy?template=https://github.com/pawanpaudel93/djavue-template/tree/master)
OR
You can use this commands for deployment or use the heroku website for this purpose. For heroku deployment run the following commands after logging to heroku on terminal after installing heroku cli and logging to heroku using command `heroku login`.
Check heroku cli install guide for installation [Heroku cli Install guide](https://devcenter.heroku.com/articles/heroku-cli)
Change the heroku app name as per your wish as I have selected djavue-template-demo for this demo purpose.
```bash
heroku apps:create djavue-template-demo
heroku buildpacks:add --index 2 heroku/python
heroku buildpacks:add --index 1 heroku/nodejs
heroku addons:create heroku-postgresql:hobby-dev
heroku config:set VUE_APP_BASEURL=heroku web app URL from first command without http/https
heroku config:set DJANGO_SECRET_KEY=your secret key # secret key without space or with space enclosed with inverted commas
heroku config:set DJANGO_DEBUG=False
heroku config:set ALLOWED_HOSTS=.herokuapp.com
git push heroku master
```
After this steps you can access the deployed demo app at URL which you get from the first command.(Mine is deployed at [https://djavue-template.herokuapp.com](https://djavue-template.herokuapp.com))