<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Andy Goldschmidt</title>
    <description>The latest articles on DEV Community by Andy Goldschmidt (@datenheini).</description>
    <link>https://dev.to/datenheini</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F401169%2Fc02e9709-f33f-44df-aa8a-a5348a972e43.jpg</url>
      <title>DEV Community: Andy Goldschmidt</title>
      <link>https://dev.to/datenheini</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/datenheini"/>
    <language>en</language>
    <item>
      <title>Stoicism and Programming</title>
      <dc:creator>Andy Goldschmidt</dc:creator>
      <pubDate>Tue, 14 Jul 2020 07:28:54 +0000</pubDate>
      <link>https://dev.to/datenheini/stoicism-and-programming-153b</link>
      <guid>https://dev.to/datenheini/stoicism-and-programming-153b</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zyTJIhAK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/itokpju6ajrybm92slnk.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zyTJIhAK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/itokpju6ajrybm92slnk.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As everything in life programming comes with ups and downs. There are days when work is flowing and there are other days you are barely able to write a single line of code. Writing code professionally is an endeavor where celebration and frustration are never far apart. How can you best deal with this? What techniques help to soften these up and downs? One thing that helps me is way older than programming itself:  &lt;strong&gt;the ancient philosophy of stoicism&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;So what is Stoicism and why should developers care about it?&lt;/p&gt;

&lt;h2&gt;
  
  
  The basis of Stoicism
&lt;/h2&gt;

&lt;p&gt;Stoicism is one of the oldest schools of philosophy, originally founded by Zeno in the ancient Athens in the third century BC. Today’s most famous (and preserved) Stoics are from the Roman period, the second wave of Stoicism, so to say. Mainly three authors comprise the modern philosophy of Stoicism:  &lt;strong&gt;Seneca&lt;/strong&gt; ,  &lt;strong&gt;Marcus Aurelius&lt;/strong&gt;  and  &lt;strong&gt;Epictetus&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Their philosophy is very approachable and practical. They don’t care too much about the morality of good and evil or what’s the meaning of life. The Stoics try to live their life in the best way possible and find rules and guidelines to make the most out of your limited time on earth. Since these three Roman philosophers have such a practical approach their texts are still relevant today and even if nearly 2000 years have passed since being written down we can still learn a lot from them for our modern lives.&lt;/p&gt;

&lt;p&gt;Let’s look at a few situations you will face in your professional life as a programmer and how you can apply Stoic lessons and guidelines to them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stoicism and programming
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Always give your best
&lt;/h3&gt;

&lt;p&gt;Your manager gave you a dull assignment to work on. This sucks, obviously we all want to work on shiny and exciting tasks. But that’s not how life works, sometimes you have to do unexciting but nevertheless important work. So how do you deal with this? Do you drag yourself to work everyday and try to find shortcuts to get this project over with already? No, you would still come to work everyday and put your best effort in to finish this task in the best way possible. &lt;/p&gt;

&lt;p&gt;And that is exactly what a Stoic does. You can’t control what life puts in your way, but you can control how you deal with it. &lt;/p&gt;

&lt;h3&gt;
  
  
  Take criticism seriously, not personally
&lt;/h3&gt;

&lt;p&gt;One of the tough parts of professional life is dealing with criticism. It can be a tough pill to swallow if your boss tells you that your performance over the last week was not up to your usual level. How do you deal with it? &lt;/p&gt;

&lt;p&gt;As a Stoic you certainly evaluate if your boss has a valid point and if so you will try to understand what caused this and try to improve. But you won’t get upset. Why should you? If it’s a fair point you should work on yourself and try to get better. If it’s unfair criticism you’ll discard it and don’t let it bother you. &lt;/p&gt;

&lt;p&gt;You can’t control other people’s opinions and thus you shouldn’t let them control you.&lt;/p&gt;

&lt;h3&gt;
  
  
  Don’t get (too) frustrated
&lt;/h3&gt;

&lt;p&gt;Everybody knows these moments where things just don’t work and everything you do leads to a dead end. You are staring at your screen for hours but still the solution eludes you. All you want to do is take your laptop and throw it across the room. &lt;a href="https://blog.datalifebalance.com/farewell-abby-io/"&gt;Or you want to quit altogether.&lt;/a&gt; But this anger and frustration does not help you. You don’t come closer to a solution if you remain in this state. Isolate yourself from the situation, take a walk or make a coffee and take some deep breaths. You’ll see that this gives you a better – more balanced – perspective on the problem at hand. &lt;/p&gt;

&lt;p&gt;Stoics focus on being &lt;em&gt;moderate&lt;/em&gt;. Don’t dwell in frustration, these negative feelings get you nowhere. But on the other hand, don’t get too euphoric after a success either, because the next obstacle is right around the corner. That doesn’t mean that you are not allowed to feel frustrated or euphoric, it just means that you shouldn’t focus on these feelings too long and keep looking forward instead because life doesn’t stop.&lt;/p&gt;

&lt;h3&gt;
  
  
  Look at the big picture
&lt;/h3&gt;

&lt;p&gt;Have you ever been upset because you had to write another unit test or because your colleague nitpicks on some minor detail of your pull request? It’s understandable in the moment because you finished the task with all the requirements but still you should do more. &lt;/p&gt;

&lt;p&gt;But look at it the other way around: wouldn’t you be glad if you start working on a legacy codebase and all the developers working on it before you had been just as diligent? If you have a wonderful house but one room is messed up, sooner or later the whole house will start to look messy. The only way to prevent this is to keep all rooms clean and it’s the same with a codebase: keep all new code to high standards and clean up constantly.&lt;/p&gt;

&lt;p&gt;The Stoics knew that a single action can’t make you a good person, but if you’re doing good over and over again, eventually you will become a better person. It’s not so much about you and the single task at hand, it’s about the whole project and all the developers who work or will work with this code you are about to commit.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Looking at these examples you see that Stoicism not only has lessons that apply to programming; rather it is advice that can help you in countless situations you will face. If you’re curious to dive deeper into the Stoic philosophy try any of these books from the “famous three”:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://geni.us/YzBsY"&gt;&lt;em&gt;Letters from a Stoic&lt;/em&gt; by Seneca&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://geni.us/IYm1"&gt;&lt;em&gt;Meditations&lt;/em&gt; by Marcus Aurelius&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://geni.us/OWcALto"&gt;&lt;em&gt;Discourses&lt;/em&gt; by Epictetus&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Or if you would rather want to start with a more recent book that will introduce you to Stoicism go with &lt;a href="https://geni.us/wzoaN"&gt;Ryan Holiday’s The Obstacle Is The Way&lt;/a&gt;. Or read Ryan’s fantastic blog (and newsletter!) Daily Stoic.&lt;/p&gt;

&lt;p&gt;Do you consult the ancient Stoics for life and work advice, too? Or what is your approach to deal with the craziness of modern life? Let me know in the comments or write me on Twitter.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://blog.datalifebalance.com/stoicism-and-programming/"&gt;Stoicism and Programming&lt;/a&gt; appeared first on &lt;a href="https://blog.datalifebalance.com"&gt;Data Life Balance&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>stoicism</category>
      <category>programming</category>
      <category>philosophy</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Django and Vue.js: Let’s have fun together</title>
      <dc:creator>Andy Goldschmidt</dc:creator>
      <pubDate>Tue, 02 Jun 2020 18:52:09 +0000</pubDate>
      <link>https://dev.to/datenheini/django-and-vue-js-let-s-have-fun-together-39i3</link>
      <guid>https://dev.to/datenheini/django-and-vue-js-let-s-have-fun-together-39i3</guid>
      <description>&lt;p&gt;Every time I write code I prefer it to be in Python, it’s my go-to language. So, naturally, when I write a web service my #1 tool of choice is Django. This was also true as my girlfriend asked me a while ago if I couldn’t create as simple meal planner for her. Nothing fancy, just a simple view where we could organize our meals.&lt;/p&gt;

&lt;p&gt;In times of stay-at-home orders it was rather easy to find time for projects like this. So I quickly implemented a few data models and views and quickly had a rather static version of the meal planner. However, each time I add a meal the whole page would reload. This is annoying when you plan meals for a whole week for two persons.&lt;/p&gt;

&lt;p&gt;I had tinkered earlier with Vue.js for smaller projects but it never worked out because the separation of frontend and backend caused more problems for me than I got benefits from this approach. But after stumbling across a &lt;a href="https://tkainrad.dev/posts/use-vuejs-with-django/"&gt;blog post from Thomas Kainrad&lt;/a&gt; that demonstrated the basics of the integration between Django and Vue.js, the goal of using Django and Vue.js together felt achievable. Add to this &lt;a href="https://pascalw.me/blog/2020/04/19/webpack-django.html"&gt;another awesome post by Pascal Widdershoven about configuring Webpack to use in Django&lt;/a&gt; and nearly all the pieces fell into place.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preparing Django for Vue.js
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Create TemplateView
&lt;/h3&gt;

&lt;p&gt;First of all, you need a view inside Django that will include your Vue.js application. You can use a &lt;code&gt;TemplateView&lt;/code&gt; for this or any other view. For my meal-planning app I’m using a &lt;code&gt;DetailView&lt;/code&gt;. The template could look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;{% extends 'base.html' %}
{% load static %}

{% block content %}
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"app"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
{% endblock %}

{% block footer_scripts %}
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/javascript"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"{% static 'frontend/js/chunk-vendors.js' %}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/javascript"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"{% static 'frontend/js/app.js' %}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
{% endblock %}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In the content block we create an empty HTML tag with the id of the Vue.js application; typically &lt;code&gt;app&lt;/code&gt;. The other thing we do is to load the generated Javascript files. I put them in a subfolder of the static directory (here called frontent). This way I can easily &lt;em&gt;gitignore&lt;/em&gt; files that shouldn’t be version-controlled but still keep other files in &lt;code&gt;static/&lt;/code&gt; untouched.&lt;/p&gt;

&lt;h3&gt;
  
  
  Set up Django REST Framework
&lt;/h3&gt;

&lt;p&gt;In a real-world scenario having a &lt;code&gt;TemplateView&lt;/code&gt; is typically not enough, but you also need an interface to fetch and create data. My tool of choice for this is &lt;a href="https://www.django-rest-framework.org/"&gt;Django REST Framework&lt;/a&gt;. Refer to their quickstart guide if you’re not familiar with the framework.&lt;/p&gt;

&lt;h3&gt;
  
  
  Configure Django
&lt;/h3&gt;

&lt;p&gt;The last thing you have to do in you Django setup is making sure that the static content is served correclty. Therefore, set the &lt;code&gt;STATIC_URL&lt;/code&gt; and &lt;code&gt;STATICFILES_DIRS&lt;/code&gt; in your &lt;code&gt;settings.py&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;STATIC_URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;'/static/'&lt;/span&gt;

&lt;span class="n"&gt;STATICFILES_DIRS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BASE_DIR&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"mymodule/static"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a Vue.js project
&lt;/h2&gt;

&lt;p&gt;There are several ways to create a new Vue.js application. The easiest is to integrate your whole Javascript code in the Django template file itself. But when you want to utilize the power of components and need to manage a few dependencies this approach becomes unwieldy pretty quick. We are going to set it up in the recommended way via &lt;code&gt;vue-cli&lt;/code&gt;. First &lt;a href="https://cli.vuejs.org/guide/installation.html"&gt;install&lt;/a&gt; the CLI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; @vue/cli
&lt;span class="c"&gt;# OR&lt;/span&gt;
yarn global add @vue/cli
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Then create a new project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;vue create myproject
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Now you have a working HelloWorld Vue.js app in place. I created the Vue.js project inside my Django project. That way it’s easy to reference the file names and I don’t have to handle to Git repositories.&lt;/p&gt;

&lt;p&gt;Run &lt;code&gt;yarn serve&lt;/code&gt; to see your Vue.js app in action.&lt;/p&gt;

&lt;h2&gt;
  
  
  Configure Vue.js to work with Django
&lt;/h2&gt;

&lt;p&gt;Up until here everything was straightforward and more or less like you see in every Django or Vue.js tutorial. But now comes the important part: configuring Vue.js to work seemlessly inside a Django app. If you know what you need to do it’s pretty easy. If you don’t – like me before the meal-planning app – it’s a confusing endeavor.&lt;/p&gt;

&lt;p&gt;After reading Pascal’s article about configuring Webpack, I knew the obvious first step was to configure the output path correctly, so that Django can pick the generated files up. However, there is no &lt;code&gt;webpack.config.js&lt;/code&gt; in the newest version of Vue.js; the central place for configuration is &lt;code&gt;vue.config.js&lt;/code&gt;. This file does not exist in a new project so you have to create it manually. But this file does not only take care of the Vue.js config itself, &lt;a href="https://cli.vuejs.org/guide/webpack.html#simple-configuration"&gt;but also wraps the Webpack configuration&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;To set the correct output path in Webpack without Vue, the configuration looks like this (slightly abbreviated from Pascal’s post):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;__dirname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mymodule/static&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="c1"&gt;// Should be in STATICFILES_DIRS&lt;/span&gt;
  &lt;span class="nx"&gt;publicPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/static/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Should match Django STATIC_URL&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="nx"&gt;devServer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;writeToDisk&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Write files to disk in dev mode, so Django can serve the assets&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;To set the same values in the &lt;code&gt;vue.config.js&lt;/code&gt;, use these values:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;path&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;outputDir&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;__dirname&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../mymodule/static/frontend&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;publicPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/static/frontend/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;devServer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;writeToDisk&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Here, &lt;code&gt;mymodule&lt;/code&gt; is the name of the Django app your Vue project belongs to. You can also use the global static directory of your project if you prefer. Vue.js now writes all the files in the correct directory and your Django template should be able to pick up the generated Javascript files:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/javascript"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"{% static 'frontend/js/chunk-vendors.js' %}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text/javascript"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"{% static 'frontend/js/app.js' %}"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;However, Vue.js generates an &lt;code&gt;index.html&lt;/code&gt; file as its entry point. This is unnecessary since we already have a HTML file in place. This is the final piece in our configuration. To &lt;a href="https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation"&gt;suppress this behavior&lt;/a&gt; extend your Vue config as follows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// disable hashes in filenames&lt;/span&gt;
  &lt;span class="nx"&gt;filenameHashing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="c1"&gt;// delete HTML related webpack plugins&lt;/span&gt;
  &lt;span class="nx"&gt;chainWebpack&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;html&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;preload&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;prefetch&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Guess what? That’s it! &lt;br&gt;
Your Vue.js application is now fully integrated in your Django project and you don’t have to worry about things like authentication when communicating with your Django backend and you have all benefits in Vue.js like package management and hot-reloading .&lt;/p&gt;

&lt;p&gt;Are you interested in a more detailed explanation or a sample project? Let me know in the comments or &lt;a href="https://twitter.com/datenheini"&gt;on Twitter&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The post &lt;a href="https://blog.datalifebalance.com/django-and-vue-js-lets-have-fun-together/"&gt;Django and Vue.js: Let’s have fun together&lt;/a&gt; appeared first on &lt;a href="https://blog.datalifebalance.com"&gt;Data Life Balance&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>vue</category>
      <category>django</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
