title: Developing and deploying Vuejs app with django
body: <p>I have built a fairly simple web app in <a href="https://vuejs.org/" rel="noreferrer">Vuejs</a>, which was running with its default <code>npm run dev</code> command with webpack. Vue app was utilizing the api from <a href="https://www.djangoproject.com/" rel="noreferrer">Django</a> that I have built using <a href="http://www.django-rest-framework.org/" rel="noreferrer">django-rest-framework</a>. And whenever there was a change in Vue app it will automatically hot reload, which is pretty awesome.</p>
  
  <p>Now I would like run the Vue app using django instead of webpack. What I mean is that Django will respond with an html template file, and Vuejs app will run on that html file for a single page application.</p>
  
  <p>What I am doing now is first run this command:</p>
  
  <pre><code>npm run build
  </code></pre>
  
  <p>Then I copy the dist/<strong>static/</strong> folder files into the django <strong>static</strong> folder. And finally load it into the template:</p>
  
  <p>index.html</p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      ...
      ...
      &lt;link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"&gt;&lt;/script&gt;
  &lt;script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"&gt;&lt;/script&gt;
  &lt;script src="{% static "js/app.571e9140518a5bae898c.js" %}"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now later on, if I need to change the Vue app, I have to build it again, copy the files and load it inside the template, which seems pretty lengthy. </p>
  
  <p>So, I am hoping there is better and short way to mix up both Django and Vuejs.</p>