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

Django Vue.js integration 🔥 How to integrate Django and Vue | Django casts #7
This Django Vue.js Tutorial is about how to integrate Django and Vue.js projects to render a Vue.js object on a Django page. At the same time the Vue.js object is bundled by Webpack from several Vue.js components.
The main idea of this Vue Django Tutorial is to show how to make Django and Vue frameworks work together as a single app.
The Django Vue.js Integration Tutorial is about: how to use and set up the django-webpack-loader and webpack-bundle-tracker libraries.
Follow me @:
Telegram: t.me/red_eyed_coder_club
Twitter: / codereyed
Facebook: redeyedcoderclub
** Web Scraping course **
is available via Patreon here:
/ red_eyed_coder_club
or its landing:
red-eyed-coder-club.github.io...
Links:
github.com/owais/django-webpa...
www.npmjs.com/package/webpack...
The minimal example of the vue.config.js file:
gist.github.com/zaemiel/1bcde...
➥➥➥ SUBSCRIBE FOR MORE VIDEOS ➥➥➥
Red Eyed Coder Club is the best place to learn Python programming and Django:
Subscribe ⇢ / @redeyedcoderclub
Django Vue.js integration - How to integrate Django and Vue | Django casts #7
• Django Vue.js integrat...
#django #djangovue #redeyedcoderclub

[@RedEyedCoderClub]

What video should I make next? Any suggestions? *Write me in comments!* Follow me @: Telegram: t.me/red_eyed_coder_club Twitter: twitter.com/CoderEyed Facebook: fb.me/redeyedcoderclub Help the channel grow! Please Like the video, Comment, SHARE & Subscribe!

[@ivan_inanych]

Сразу заметил русский акцент, но не придал значения, но потом увидел, что пользователя зовут Олег)) Олежа, благодарю за видео, познавательно!

[@RedEyedCoderClub]

Спасибо. Там есть и другое видео без использования дополнительных пакетов вообще.

[@novackirr]

@@RedEyedCoderClub хорошая работа, олег

[@MarcoAurelio-sv2tk]

YOU ARE THE MAN!!! TNX

[@RedEyedCoderClub]

Thank you!

[@muhammadhfashaan7581]

u are the best

[@RedEyedCoderClub]

So, my friends, I've made another video about Django and Vue.js integration. But this video is about how to get a production ready code, and this approach doesn't require Django-Webpack-Loader and Webpack-Bundle-Tracker plugins. kzbin.info/www/bejne/aZa3pYmPbMmogM0

[@anonymousghost5384]

Linux and open source editor you are awesome

[@RedEyedCoderClub]

Thanks for comment

[@jakubschulz4353]

Cool! I was looking for this!

[@jakubschulz4353]

...but unfortunately it doesn't work for me. Frontend does not work for me. I found that after changing publicPath to '/', localhost in vue works fine, while in django only the header is still loading. Do you have an idea what this might be? I'm using vue 2, maybe that's the problem?

[@RedEyedCoderClub]

What does it mean "does not work"?

[@jakubschulz4353]

@@RedEyedCoderClub in console of vue project I have: "Failed to load resource: net::ERR_ADDRESS_INVALID" and "0.0.0.0:8080/favicon.ico:1 Failed to load resource: net::ERR_ADDRESS_INVALID" errors

[@RedEyedCoderClub]

favicon is not a problem as usual. Is the Vue object rendered on the Django's page?

[@jakubschulz4353]

@@RedEyedCoderClub as I wrote, only the header is loaded

[@tdye]

Love your videos! Please keep creating. Are you able to make a video on deploying a Vue + Django project with a fully functional database? Perhaps to Heroku?

[@RedEyedCoderClub]

Thank you! I'll make this video, but a bit later.

[@gmartinsfilho]

video muito, muito bom

[@RedEyedCoderClub]

Thank you!

[@alexpimentelminga6551]

Could you update the tutorial, using vue + vite + django?, since vue CLI no longer recommends using it and it doesn't work well anymore.

[@RedEyedCoderClub]

Thanks for the suggestion, I'll think about it

[@heljhumenad]

is it need to run both runserver for django and npm run for vue side to run the entire project?

[@RedEyedCoderClub]

No, the idea of the video is to show how to use Vue.js as a static frontend for Django.

[@felix30ua]

Олег, спасибо! А если frontend после build, как подключить эти файлы?

[@RedEyedCoderClub]

I can't explain it in comments.

[@felix30ua]

@@RedEyedCoderClub можно в видеоролике)

[@RedEyedCoderClub]

it'll be the next video.

[@RedEyedCoderClub]

@@felix30ua I've made the video about it - kzbin.info/www/bejne/aZa3pYmPbMmogM0

[@saxon5115]

Will this work to add django to a current project that I have in vue?

[@RedEyedCoderClub]

It should work. Consider watching also this video about Django and Vue integration: kzbin.info/www/bejne/aZa3pYmPbMmogM0 It's a different approach to do it.

[@nhanNguyen-wo8fy]

---- ---- 1:20 django app ---- 4:30 create new views vuejs app ----- 6:00 install additional package

[@RedEyedCoderClub]

Thanks

[@bishwobhandari5132]

when i added a routing in vue js app. The django server is not serving those urls. have you tried yet? how to handle routing in vue js in the django server?

[@RedEyedCoderClub]

You have to make a request from Vue to the URLs have been described in urls.py. Routing in Vue is for Vue, not for Django. Django reacts only on requests, that are passed through routers in urls.py files.

[@mrgriboman371]

I'm facing the following issue "Error reading /app/frontend/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?" As far as I can see 'webpack-stats.json' isn't being generated at all (or maybe it is, in some weird place). What can be the problem?

[@RedEyedCoderClub]

Check your code please. Also there is another video about Django & Vue.js integration without using of django-webpack-loader. kzbin.info/www/bejne/aZa3pYmPbMmogM0

[@subhajitkarmakar558]

I am getting OSError:Error reading F:\worknpractice\django_python_stuffs\project\djangovue\frontend\webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

[@RedEyedCoderClub]

Are you sure webpack has generated the file and the path is correct? Check your code please. And especially all paths.

[@vkashpoudel8771]

@@RedEyedCoderClub same problem with me aswell. I did as you tought us but finally i am getting [Exception Type:OSError] please help me for this problem.

[@RedEyedCoderClub]

Check your code, please

[@shuaibb.a.7962]

You are probably using latest version, downgrade to @0.4 as explained in this video then go back to your frontend and remove directory DIST/

[@captainmujheri]

Hey, can you plz make a video on How deploy this on a server.

[@RedEyedCoderClub]

Thanks for your suggestion

[@bishwobhandari5132]

I was going to ask the same thing. right now my dev server is working. Django is serving the Vue application. but when I build Vue files for production and have Django serve static file, I am having difficult time. it would be nice if you make one for that and deploy in like a Linux server or something.

[@RedEyedCoderClub]

it'll be the next video. To be exactly it'll be the video about how to get bundled static files (from npm run build) working with Django project. The result - the production ready Django project.

[@captainmujheri]

@@RedEyedCoderClub ahh, I am waiting for that, and thanks for your efforts :)

[@RedEyedCoderClub]

@@captainmujheri It's done - kzbin.info/www/bejne/aZa3pYmPbMmogM0

[@chillichilli5231]

Hi, sadly I couldn't make it work. For example: config.devServer didn't allow "hotOnly" or "public" Could you share the version numbers of all necessary js/py libraries?

[@RedEyedCoderClub]

Check your code please, also there is another video about Django and Vue integration with a different approach

[@jpongthep]

@@RedEyedCoderClub I get same error. My vue.config.js already contain the existing code as follow. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true })

[@rishabhprajapati8423]

watchOptions isn't a property of devServer as well

[@RedEyedCoderClub]

@@rishabhprajapati8423 Consider watching of my another video about Vue and Django integration: kzbin.info/www/bejne/aZa3pYmPbMmogM0 It's a different approach, but it's a completely working idea. Was tested in another video about Deploy Django on server: kzbin.info/www/bejne/in3LnKCOo9Kaq6s

[@zalderac4900]

@@rishabhprajapati8423 I made it work with changing it into a dictionary with the same options. Like it was shown in the error message

[@Alik2202]

all done and i'm getting error saying 'expected string or bytes-like object'. Can you pls answer ?

[@RedEyedCoderClub]

Please, check your code attentively. Also I think that it's better to use this version of integration: kzbin.info/www/bejne/aZa3pYmPbMmogM0 How to deploy it on server: kzbin.info/www/bejne/in3LnKCOo9Kaq6s

[@billy-cg1qq]

How do I know that this is the right and the easiest way of doing it? He's a Russian computer scientist.

[@RedEyedCoderClub]

the approach has some flaws, but there is another video: kzbin.info/www/bejne/aZa3pYmPbMmogM0

[@billy-cg1qq]

@@RedEyedCoderClub God damn it. I hate web development and all the tools needed to just set up a frontend and a backend. it's not supposed to be that complicated all I need is something to interact with and a place to store my data. It has not to be that complicated.

[@RedEyedCoderClub]

There's an opinion that having two apps is the right way to do it. One app is the Django app, and the other - a Vue app. We have to use Django Rest Framework to return JSON objects, and the Vue side requests for them with fetch() or axios.js library. Also we host them separately too. This approach (kzbin.info/www/bejne/aZa3pYmPbMmogM0) is a bit easier. We have no need in DRF, and two apps, we can use Webpack and Vue.js components. As you know - all approaches have their own pros and cons.

[@MedievalChips]

Hey, what about vue fetch tried that before?

[@RedEyedCoderClub]

Not sure that got your question correctly. Can you elaborate more?

[@MedievalChips]

@@RedEyedCoderClub Similar to Axios there is a fetch api for VueJs that can make get,post,delete requests. So you can just attach vue library and write request with fetch data over http like we used to do with jQuery

[@RedEyedCoderClub]

Of course I know about the fetch() function. And I had written two videos with it: kzbin.info/www/bejne/rnK4gHZqe82VY9E kzbin.info/www/bejne/bXi6fKlmaLSmm80 But this video is about "integration" of Vue to Django, about how to make them work together like a single app.

[@MedievalChips]

@@RedEyedCoderClub Great, I will check them out. I was just wondering which approach do you think is better the Axios/fetch way or integration with this webpack. I am currently also looking into graphene. Maybe a mix of api, fetch and django views? What do think? P.S. love the videos you are making, exactly what I am interested in. Пока!

[@user-gm3ch6te5c]

are you from Russia...??

[@RedEyedCoderClub]

yep

[@krukru4500]

"Error during template rendering In template C:\Users\Victory\Desktop\djangovuejs\djangovue\templates\index.html, error at line 9" I have such an error comes out at the end when starting the server, help, what can it be?

[@chanjack]

I met the same error. Did you fix it?

[@krukru4500]

@@chanjack as I understood this is a compatibility problem, I reinstalled python and the libraries were installed, plus the libraries need to be installed via cmd, and not via ide cmd

[@RedEyedCoderClub]

It's better to use this version: kzbin.info/www/bejne/aZa3pYmPbMmogM0 how to deploy it on a server: kzbin.info/www/bejne/in3LnKCOo9Kaq6s

[@Wurstfinger-rl1zi]

Doesn't work for me. Always getting a blank page no matter how many times I re-do everything... the app.js just cannot be found.

[@RedEyedCoderClub]

Check your code again!

[@alexi_space]

After I set my vue.config.js my app is stop working

[@RedEyedCoderClub]

What doesn't mean stop working? Also there is another video about Django + Vue integration, that doesn't require to use any Django packages.

[@deki90to]

'str' object has no attribute 'joinpath'

[@RedEyedCoderClub]

That's right. In Django 3 BASE_DIR is an instance of the Path class, not str. Check your code.

[@spicemasterii6775]

Why not just use NodeJS instead of Django?

[@blabla-kk8bl]

if you are ready to invent every think yourself then use node. Django has stable libraries whic node has nothing stable like django one. ex. stripe subs., user management ....

[@RedEyedCoderClub]

Exactly!

[@spicemasterii6775]

Thank you both! Looks like learning Django is worth the effort.

[@user-mn2ks5zc3g]

Проблема с os