Django Vue.js integration 🔥 How to integrate Django and Vue | Django casts #7

In this video we'll talk about integration  of a Vue.js project into a Django project.   And the result looks like this. The Django development server is started on localhost:8000 - it's the default Django address. And this H1 header is rendered by Django Template Language exclusively. And at the same time we can see the Vue object, that uses static files: JavaScript, image, and CSS styles bundled  by Webpack from several Vue.js components. For example... The H1 header... And I have to reload the page to see the changes. And, for example, App.vue And we can see auto-reload effect. In some cases this setup is very convenient. So let's start it. Usually I use virtual environments for my projects, and I have activated the virtual environment for this project. So... first of all I have to install Django. And now I want to create a Django project. and let's say it will be djangovue, for example. Then I change directory (cd) to djangovue. Let's apply migrations. and let's run the server Ok, it's working. We can see the Django Welcome page. Great! Now at the level of the manage.py file I want to create a new folder - the templates folder, for example. And inside the templates folder  i'm creating a new file... Let's say it'll be the index.html And let's fill it with some content. For example... H1 - something like this. And Django doesn't aware of the templates folder yet... so... In the settings.py file... in the TEMPLATES list in the DIRS list I want to specify a path to this folder. BASE_DIR .... its .joinpath() method takes the templates name as an argument. And the .joinpath() will  return an instance of the PosixPath class so i just... convert it to a string. and then in the root urls.py file I'm creating a new URL pattern - the root URL pattern. And all requests to the root  address will be handled by TemplateView class. I am calling its .as_view() method and the name will be...   index, for example, but it doesn't necessary for  the video. So I have to import the TemplateView And the as_view() method of the TemplateView class   have to get the name of the HTML template,  that should be rendered. so... the template_name parameter gets a new value - index.html... This index.html And let's test it... F5... And we can see our H1 header. Pretty usual and nothing special. The next step... Now I have to create a new Vue.js app. I hope, that you have Node.js installed. so I am changing directory to the  directory with my Django project   I am on the level of the manage.py file. So... Let's install the Vue.js globally -g means global installation.  It will take some time Ok. And here in the Django project on the level of the manage.py file I'm creating a new project and the name of the Vue app... will be frontend. And again it will take some. I choose Vue 3. Ok. Then change directory to frontend, like Vue said. and let's start the development server. I've got Vue object. And now I want to bind them together. To do it I have to install and set up additional packages. The first one is the django-webpack-loader for the Django side, and the second one is the webpack-bundle-tracker for the Vue side. I need the version 0.4.3. So.. let's install it. I want to start with the webpack-bundle-tracker for the Vue project I need to change directory to frontend [ typing... ] And now I have to change Webpack settings. To do it in the frontend folder I have to create the vue.config.js file   and for the sake of brevity let's  copy the settings from my Gist The link will be in the description to the  video. The main parts here are: the publicPath it's a default road for Vue.js projects, the outputDir is a default directory for bundled files then I want the Webpack creates only one file -   so splitChunks is equal to false. The main line here is the filename. It's the path of the webpack-stats.json file. And this webpack-stats.json file will be created in  the current directory - in the frontend directory.   That's all with the Vue part and now - the Django part. So, I have to install django-webpack-loader it's a Django app, and so I have to  append the INSTALLED_APPS list with the   'webpack_loader' from its github page we can just copy and paste this block of code  into the settings.py module... somewhere here and we can delete this line. Then in the index.html file I have to load the render_bundle filter [ typing... ] Then somewhere here... I want to render_bundle 'app' and 'css' styles Ctrl + C and at the bottom, but before the </body> tag... I want to paste here JavaScript files. And the mount point for Vue objects by default is the div block with the app id. So, let's restart our servers Django... name os is not defined...  Ok. here the stats file... I forgot to change this value. Here I have to specify the path, where webpack-stats.json will be located. I said in the vue.config.js file, that the webpack-stats.json will be located at the frontend folder So here I have to use the BASE_DIR again .joinpath()... the first argument will be frontend, and the second argument the webpack-stats.json. and convert it to a string. And that's all. Let's run the server. Ok. Let's run the Vue server and we can see the webpack-stats.json is created and let's open the Django page... F5... And we can see rendered Vue.js object. If you like the video please leave  a like and subscribe to the channel! Thanks for watching! you

Channel: Red Eyed Coder Club

Views: 11,055

Keywords: python, django, vue, django vue integration, django vue.js integration, django webpack integration, django webpack, webpack with django, django vue, django vue.js, django vue work together, vue into django, how to integrate django vue, django vue integrate, integrate django vue, vue js django, vue js with django, combine django and vue, django vue js, vue django, django vue js tutorial, django and vue, django vuejs, vue and django, django and vue js, vue with django

Id: toO2Clnbjhw

Length: 12min 2sec (722 seconds)

Published: Sat Nov 21 2020