Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to run compiled vue project in django

Previously, I know how to run Vue and Django (jinja2 template) together.
by handling the custom delimiters, e.g delimiters: ['[[', ']]'].

But for some reason, my supervisor just need to run the compiled vue project inside my existing django project. As we can see, the vue has npm run serve or yarn run serve to run it.

Does django can handle this case? If yes, what I should do?

In this case, we doesn't use direct web server like nginx, apache, etc to run.

like image 559
binpy Avatar asked Aug 04 '20 02:08

binpy


People also ask

Can Vue be used with Django?

In this article, we will discuss how to create an API in Django and set up a Vue. js interface to consume it. We will build a handy full stack “to-do” app that uses a Django-based API and interactive Vue interfaces. This will hopefully teach you many of the critical concepts of full-stack web programming.

Can we use Vue JS with Python?

Js and Python work together. To get started with Vue. Js, first you need to make sure you have Node.

Is Django better than Vue?

Because it renders pages on the client-side, Vue. js costs more initial load time, but it gives a better experience when it is necessary to navigate between pages. While Django is a full-stack Python framework and it generates pages on the server-side.


Video Answer


1 Answers

Charanjit Singh answer is correct and your 404 problem is not related to vueJs. Since you are not using a direct web server you are making it harder.

Also If your vue application implements vue-router in history mode that'll cause even more problems since you're not using neither nginx or apache.
My only approach for this is Haproxy that'll make your sub application handle those routes.

For example your app domain is myawesomedomain.com and your vue app is in myawesomedomain.com/myvueapp then you need to configure your Haproxy to let your vueapp handle all routes in myawesomedomain.com/myvueapp/*.

If you don't have a vue-router in your app then you need to place th vueapp folder in your deployed web folder and don't forget to add a routing rule for your html file (I don't know about Django but I did it with symfony and it is working)

Deployed
|
|_vueapp    ===> your compiled folder
|
|_htmlFile  ===> your html file
like image 118
Ahmed Jaouadi Avatar answered Nov 15 '22 11:11

Ahmed Jaouadi