WIP
Please do not use at this time
vue-django-channels
Django Channels WebSocketBridge handler for Vue.js
Based on vue-websocket, a socket.io implementation for vue
Scaffold generated with vue-cli webpack-simple template.
I develop on Windows 10 so I do pretty much all of my development using Docker.
Setup
ports
This project uses 8181 for the dev-server port. I did this because the default 8080 confilcts with my primary dev configuration and just remapping in the compose file does not work because of CORS.
To change the port, these files need updated with the port of your choosing:
package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0 --port 8181",
docker-compose.yml
ports:
- "8181:8181"
build docker images
docker-compose build
install node dependencies
see
Dockerfile
for why this is done here
docker-compose run yarn
For some reason, running yarn this way causes npm to fail to run the node-sass install script properly resulting in this error
ENOENT: no such file or directory, scandir '/code/node_modules/node-sass/vendor'
.
This seems to happen every time I run yarn to update with new packages. This may be something with my current config so you may not get this error.
To fix this, run bash in a yarn container and run the install.js
script:
vue-django-channels> docker-compose run yarn bash
root@1071df0c4c5f:/code# node node_modules/node-sass/scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.2/linux-x64-48_binding.node
Download complete
Binary saved to /code/node_modules/node-sass/vendor/linux-x64-48/binding.node
Build Setup
# install dependencies
docker-compose run yarn
# serve with hot reload at localhost:8181
docker-compose up [-d]
# build for production with minification
docker-compose run yarn yarn build
For detailed explanation on how things work, consult the docs for vue-loader.