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.

imoontech / vue-django-channels

WIP