search

gtalarico / django-vue-template

Django Rest + Vue JS Template
https://django-vue-template-demo.herokuapp.com/
MIT License
1.58k stars 406 forks source link

yarn serve doesn't refresh django app #21

Closed dustinmichels closed 5 years ago

dustinmichels commented 5 years ago

Hi! I like this template a lot.

One question / issue.

I start two servers, as recommended in the README

python manage.py runserver
yarn serve  # in another tab

When I edit the JavaScript, it looks like the files are re-compiled, but I don't see any changes in the Django app. It seems like the Django app is just serving the js in the dist/ directory, and the whatever files vue is re-compiling are held in memory, not written to that dist/ directory.

It seems like the intention with the project is that if both servers are running at the same time you can edit the JS and Django will serve the re-loaded files. Is that correct? Am I missing something, or is this an error in this code?

gtalarico commented 5 years ago

Hi!

dist/ is only served by django in production. During dev, static files (html, css + js build) are served directly from memory by yarn/webpack on 8080 (dist will not change) and the api is served by django on 8000

note vueconfig is setup so the front end app will call :8000 for the api.

This setups allows auto reload on both sides - yarn auto reloads and hot module reload on any html/js change, and django reload code on any change on the api side.

For prod, since you want to serve the production build, you build the js app using yarn build which will created/update dist/ and then have django will served that

ie. during dev use localhost:8080 and your front will auto reload

dustinmichels commented 5 years ago

I see. Looks like my issue is that I was looking at :8000 instead of :8080. Both pages look the same, except :8000 doesn't reload the JavaScript. Thanks!

gtalarico commented 5 years ago

Awesome. Thanks for the uptade.