I'm am trying to add a reactive Vue js on the frontend and have Django serve the different pages on the backend. But how do you add these guys together?? I have found different ways to do so, but I can't find a good explanation on the why they are tying them together that way. I was hoping for a comprehensive explanation as to how these 2 are added together but also the why? I am still new to both of these frameworks so I am trying to understand not only how to do something but the reason for my doing them. Thanks in advance.
There are many guides on internet about how to use Vue and Django together. I provide you the main differences and a sample link of implementation for each one.
There are two main options for that:
Using Vue in Django templates
Separating Vue and Django projects
Option 1 is usually used when you want to use vue in some parts of the app or just making some reactive components. Your routes are handled by django and your passing data to frontend by passing data to views. In some cases you're a backend developer and don't want to spend time on frontend so you use this option whenever you need. For implementation check out this link.
Option 2 is when project is large and complex or you prefer to make a SPA (check this link) so you separate frontend and backend projects and interactions between these two is via API. So you run your frontend project separately and routing and other stuff is handled by vue. For implemetaion check out this link.
Related
I want to use Django Rest Framework as an API and am looking for a way to "couple" the frontend / HTML/CSS/JS to it.
To put it in perspective, I am used to the way Django "usually" does it, by naming HTML templates and 'rendering' them when going to a particular URL.
Now, with DRF, it appears that this functionality has fallen away and everywhere I look it's just "react.js or vue.js" as the answers to consume the API.
What are my options for the front end? Can I not just do it all within the 'usual' Django framework, simply, as it was done before. And why do no resources talk about this?
Thanks, let me know if you require further info.
DRF is just additional layer for Django which help to implement API. You can use Django for render html on server side and serve it to browser. You don't need use DRF for it. But if you assume that you frontend app will be interactive, dynamic and complicated then it is not best way to solve it.
More popular approach suggest to separate it on frontend application (react or vue) and backend with REST API for interact with. It allow move all things related with UI on frontend app and only keep state on server.
By the way Django was developed for generate html on server and for site like this https://www.washingtontimes.com/news/ but world changing. Resources talk just about popular things
I've been working with the django framework and mostly have been using html templates for its front end but im wondering whether i should switch to React if it's a big project? Alternativelyl, can i create a user interface application without using React as front end or is React / ReactRedux advisable when using Django?
Can you achieve greater functionality with React when manipulating the front-end as opposed to using views in Django?
Advice for when to use React does not have to do something with Django. It mainly depends on the complexity of the application that is to be developed. If you have, or will have a Web application with a complex frontend, containing many functionalities and quirks, which can grow to a large codebase, it is a good idea to use one of today's popular frameworks such as React, Vue or Angular. They allow you to divide the large codebase into components and manage them more easily.
So, the short answer is - if it is going to become a large and complex application, it is a good idea to use React. Otherwise, Django templates will be just fine.
If your application's frontend getting larger and larger and you feel that your are repeating too much html page for example , you might want to use a SPA and component based framework to reuse the components across the application.
If you want to separate backend and frontend code to acquire more maintainability and separation of concerns that might be the reason
If There will be more than one clients(Web, IOS, Android etc.) it is a good idea to separate backend code from frontend(client)
Frontend framework will bring more structure to your application therefore it will be more easier to maintain the project
Otherwise Django templates are good to build a fast project like a few form entries and an introduction page etc.
There are plenty of tutorials and helpful posts how to use Django and Vue properly (in various options) all over the Internet.
But I didn't find a single one who describes how to create a Django application which consists of more than one app, each having it's own part of the Vue frontend.
I am creating a Django application with a Vue frontend, and it will have a lot of apps that can be plugged into the main system very easily (using a custom framework). But this only is the backend. I'd like to enable each Django app for having a "plugin" part of the frontend as well: e.g. a set of Vue components that are rendered "dynamically" in the frontend when this app is added in INSTALLED_APPS.
How can I provide "plugin hooks" in Vue to load those components? All the things I have seen (dynamic/lazy component loading with webpack using webpack-loader, etc.) is not what I want. It only describes how to load a component that is predefined later in the http request timeline.
How am I supposed to "merge" all the components? Can I simply create components in static folders and let ./manage.py collectstatic do the magic?
It doesn't matter if the application is a SPA or maybe I have to use Django templates (with Vue components included) - both would be a viable method.
Maybe this even is a webpack question and should be: How do I bring Vue (or React, etc) to collect its sources from different subdirectories like foo_app/static/, blah_app/static/, bar_app/static - is there a way to tell Vue/Webpack/etc to search in myproject/*/static for Vue components to merge?
And can I include "all components" (dynamical amount) than in another component, which is needed for such a system?
Can anyone enlighten me here - is that completely impossible? Or am I thinking in the wrong direction?
Thanks.
I have a couple of VueJS apps in my django site and I'm planning to add more.
I bundle them with webpack with the help of django-webpack-loader.
https://github.com/owais/django-webpack-loader
I am using reactjs for frontend and Django REST API for the backened. What is the best possible way to integrate both?
which of these two is a good option?
Running two servers for frontend and backend?
or
replacing django templates with reactjs?
Your help is highly appreciated.
Few options here
Django templates with react.
Not my preferred method. Essentially, you are blending django templating and jsx. The benefit here is low over head. It requires little configuration and allows you to write react and leverage the django templating language in the same file. If you need to get something up and running quickly, its a great solution. Have a look at this library https://github.com/Frojd/django-react-templatetags
Using django webpack loader
This will allow you to separate your react code from django code but still keep all your code to one repository. You need to configure django settings to find your react code. Then on your prod/dev server, have your web server point to the directory where your static react code lives or write a django url and view that will serve the react apps index file. It will be located in /static/ after you configure correctly and run python manage.py collectstatics. Benefits here are that it keeps the code to one repository but still isolates the python and javascript code. This is a middleground solution of the three. Quick note. You won't have react hot reload with this method for development. Here is the library that helps you configure this setup https://github.com/owais/django-webpack-loader
Having 2 separate applications
Similar to what you are doing right now, have a separate react repository, either served by a nodejs backend or deploy the code to a cdn service like amazon s3 and serve the one page app from there. And then as its counterpart, have your django app on a separate server with its consumable rest api (will need to configure allowed cors) . This method requires a lot of operational work: deploying, configuring, and management of 2 separate code bases. If you have the time and resources I do recommend this setup. The decoupling of the 2 apps allows this solution to scale the best
What do you mean two servers? You mean two projects/repositories?
Yes, you can keep frontend in the separate project. It make sence if you have multiple clients for your backend (like mobile apps and web). Different developers can have permission to edit only their repositories. Also it make sence if you are going to use some microservices structure for your project. But more simpliest way is to keep frontend and backed in the same project. Try to check some tutorial about Django+reactjs apps.
This might be a silly question that might relate to my ignorance about angular js, but is it possible to use a Django framework mostly for backend and database interactions, in conjunction with an Angular JS app/website?
I know angular js still requires Node Js for serving the data so, it seems like that would be a conflict. There was a similar but slightly more technical and specific from what I was looking for here: Django, REST and Angular Routes
What alternatives do I have if I want to experiment with Angular JS but need some database functionality?
Also how do you go about the fact that your code will be open to everyone?
Not a dumb question. But yes, it is totally doable. I put together a git seed for an angular web app with a django rest framework api. Check it out, I think it is exactly what you are looking for. Clone it down and try it out! Easy instructions to follow.
Angular-Django Seed
There is no dependency on NodeJS whatsoever. Your web framework handles server requests, and your angular app runs in the browser. You would use Django to serve the files used by the angular runtime, typically this includes a mix of HTML, JS and CSS files.
Your angular app may request data from the server, in which case it would 'call into' your Django code via an XHR request using the built in $http service (or possibly $resource service).