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
Related
I've already gotten my fair share of Bootstrap and Django but never tried out other frontend frameworks like Angular, React, etc. and finally wanted to try SvelteKit. So I'm really inexperienced and new with this sort of stuff.
Currently I've already set-up my Django project as well as a SvelteKit project by following the tutorial on their website.
My problem is that I'm confused about how to combine Django and SvelteKit now. Do I just run both servers simultaneously on different ports and get the data from Django JSON APIs into my Svelte frontend or is there some kind of approach to this? I thought that maybe there's a way to get my Django app to render the Svelte files from the Svelte server for me. I just feel really lost at the moment so if anyone could help me or has some resources I could read to get more familiar with the topic, since I didn't find a lot online, that'd be great!
Many thanks in advance!
First, understand the difference between Svelte and SvelteKit. SvelteKit is a front-end + server solution that is a layer above vanilla Svelte. SvelteKit adds things like routing and support for sever(less) functions.
If you want to use Django for all your server-side processing, you should just use (vanilla) Svelte to write independent web components that you call from html served by Django. No need to use SvelteKit if you aren't using any of the extra framework features.
How to write a web component with vanilla Svelte
How to write a web component with SvelteKit.
If you want to just write your API's in Django and do everything else from SvelteKit, I would run both Django and SvelteKit servers from different subdomains and/or ports. Like django.example.com and kit.example.com or example.com:8000 and example.com:3000.
SvelteKit also provides a low-level handle() hook that can bypass SvelteKit, but usually JS/node.js is still used. I think it would be tricky to pass a request from SvelteKit to Django.
I find myself having the same question, it's not perfect but I got it to work with the following:
Create a directory that will contain everything, e.g. my-project
Inside the directory create your Django project, e.g. django-svelte, with django-admin startproject django-svelte
From my-project/django-svelte create an app to contain the svelte app, e.g. frontend, with python manage.py startapp frontend
Inside frontend create two subdirectories templates and static; inside each of them create a frontend directory. (You should have frontend/templates/frontend and frontend/static/frontend in the end)
Inside my-project initialize a svelte-kit project, e.g. client, with npm init svelte client
Inside client install all packages and add #sveltejs/adapter-static with npm install and npm i -D #sveltejs/adapter-static
Replace the content of svelte.config.js with:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
paths: { base: "/static/frontend" }, // Adjust according to where you collect static files and the name of the Django app
adapter: adapter({
pages: '../django-svelte/frontend/templates/frontend', // Adjust according to the name of the Django app
assets: '../django-svelte/frontend/static/frontend', // Adjust according to the name of the Django app
fallback: null,
precompress: false
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
This will write your HTML, JS and CSS files inside the frontend app.
Create a build with npm run build
Collect static files in Django with python manage.py collectstatic
Run Django with python manage.py runserver or other servers
I'm sure there are simpler ways though :-)
I made a simple template for svelte and django. please check this link: https://github.com/Pei2tech/svelte4django. What you need to add routing to support svelte instead of using sveltekit.
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.
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.
I've built out a basic django application, and I'm looking to incorporate react+redux into the app. I've come across several react+redux templates like the react-redux-starter-kit and redux-webpack-es6-boilerplate:
These are awesome, except they both run node servers. I'm wondering:
Does there exist some sort of a tutorial or template that has the same features (webpack, Hot Module Replacement, linting, testing, abides by Fractal Project Structure guidelines, etc...) but does not run a node server, so I can just copy it into my django application (I realize I'd have to do a fair bit of configuration to get everything working smoothly).
Is it ok to run the webpack server within my django application? (Basically node would be running within django) Are there any downsides in doing this?
I've tried altering the above two templates, but they are pretty dense and complicated. Any advice would be very much appreciated!
I don't see any reason to mixing up django and react app.
I would prever leave them as two independent parts of your application: SPA (react + redux) + API (django)
If you already have django app and just need to add some react pages into, then build react app as static files and place it outside your django project, and configure your reverse proxy server (nginx) to load those new pages as static pages (react).
I'm trying to shape a project with AngularJs and Restangular, as a web app, and Django / Tastypie as an API called by the app.
I have :
- an angular app doing well when run with the web-server script from the seed app.
- a django / Tastypie API returning json when urls are called.
But I don't know how to connect them ! How do I start the app with my Django API ? How should I load it ? I don't find many examples on the web ...
Many many thanks for your help.
There're two main integration libraries, Djangular and Django-Angular
Djangular provides various scenarios, but the one that makes most sense to me is this:
Create your Django app, and use Tastypie/DRF as you can to produce
an API.
Use Djangular to create a new app with manage.py startangularapp
<app_name>, which gives you the base layout for including angular.
Define a 'passthrough' url for each app, in your urls.py that points
to an index.html for each app, which as minimum contains <div
ng-view></div>.
In your app.js provide routes using the $routeProvider. You'll
need to inject DjangoProperties in to the dependencies, and use
DjangoProperties.STATIC_URL to get the right path.
Write a service that consumes the your API from 1.
Write the rest of your AngularJS app around this API
Share and Enjoy!