@NdagiStanley has mirrored the fork to have this repo here. This starterpack has proved useful to many and I thank you for the emails I have received from all of you. The reasoning behind this mirror is that this is an effort to support the users more by develop further on this project. From here on, I am calling on all potential collaborators by making it easier to make PRs and adding utility of Issues in this ‘new’ repo (Of course with the same name :) ). Lastly, just so you know, I’ll be keeping up with developments in the
A full-featured Webpack setup of a VueJS 2.x app with hot-reload, lint-on-save, unit testing & css extraction integrated into a Django 2.x application (There are other versions too)
https://vuedjango.herokuapp.com/ is a deployed instance of this boilerplate. There is a docker image for vue-django that you can run to check it out locally:
docker run -p 8000:8000 stanmd/vue-django
Open the app at localhost:8000
The past command will run the latest tag of the image which has VueJS version 2.x and Django vesion 2.x. There are several other tags of the image you can run:
docker run -p 8000:8000 stanmd/vue-django:v1-d1
docker run -p 8000:8000 stanmd/vue-django:v2-d1
This is a project template that includes
VueJS version 2.x and
Django version 2.x based on the vue-cli templates. It is recommended to use npm 3+ for a more efficient dependency tree.
To use this template, scaffold a project with vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.
$ npm install -g vue-cli
You might want to use
sudo if you encounter permissions error
$ vue init NdagiStanley/vue-django my-project
If you desire to use VueJS version 1.x with Django vesion 1.x run:
vue init NdagiStanley/vue-django#v1-d1 my-project.
If you desire to use VueJS version 2.x with Django vesion 1.x run:
vue init NdagiStanley/vue-django#v2-d1 my-project instead.
my-project can be replaced with the directory name you prefer. If you do decide on another name take care to replace the next occurence of
my-project with your new directory name.
$ cd my-project $ npm install
$ npm run dev
and edit away.
Hot reload is enabled so any changes on
index.html and the other files will reflect on localhost:8080
Ensure python and pip is installed. Preferably create a virtual environment for the project.
$ npm run build $ pip install -r requirements.txt $ python format_index_html.py $ python manage.py collectstatic --noinput $ python manage.py migrate $ python manage.py runserver 0.0.0.0:8000
The 6 commands above are contained in the
deploy.sh so running the script is as good as running the aforementioned commands:
Open the app at localhost:8000
Ensure that docker is installed and running. To install
docker take your pick here based on your Operating System.
If you use docker in your workflow, there is a Dockerfile (that you can build an image from) in the root directory for you.
docker-compose is the easiest way to get up and running. Simply run:
$ docker-compose up
Open the app at localhost:8000. You’ll have to stop the Django server if you ran it earlier or change the port within the
8000 to something else.