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).
Related
I have an existing vue js project and for backend I want to use django, what came to my mind was to use rest api to communicate with the backend without any integration. is that what everyone is doing or my approach is old school and I have to put the vue project in django directory and go through the whole collectstatic thing?
sorry if my question is too basic.
i don't know hows people doing, usually me and my team did like the python just access the index.html from the Vue build folder when production mode.
but in development mode, we just separate two of them. the python running as the endpoint API (need to enable cors mode in dev), and the Vue run in development mode.
I new to the web development.
Right now, I am using Angular 2 as front-end and Django-Rest-framework as back-end. While browsing the tutorials online, people often build the angular2 app (ng build) and then place those built files under the django project. But my question is, doesn't this approach defeat the purpose of decoupling? Can you provide me the pros and cons of these two approaches?
Ask Django to host the built angular project, and deploy it as one instance.
Separate both frontend and backend, and deploy them as two instances.
Thanks in advance.
I don't see a reason to host an Angular app inside a Django project, most apps will separate frontend from backend and deploy them to different servers (at least in my experience) to ensure easier maintenance, that way if your backend has any bugs, you'll have an easier time finding where the bug is and how to fix it.
Mixing both would mean that if for some reason front or backend have any problem, THE WHOLE app will have said problem and result in a bad user experience.
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.
I have a very large django project with many features that uses django as backend framework. My project lets users use both a website and a iOS app.
I am researching using a monolithic app (currently using monolithic) vs micro services, I watched this video but one part really throws me off. At 1:05, he previews his 'monolithic' app before he changes to micro services, which to me looks like a single project with a bunch of different apps.
1) Are these technically just folders and not apps? These (what i would assume he calls folders) all have a models.py and views.py and most have a admin.py.
2) What makes this a monolithic app? Is it just because he doesn't simply use django-admin startapp in the terminal to create these 'folders'?
3) Or are microservices multiple projects connected and not simply multiple apps in a single project?
My biggest confusion is with the previewed project in the video because before then I thought I had a good grasp on these concepts. I was simply looking to change to microservices, after this part in the video I'm not sure I even know what a monolithic app really is.
The main difference between a monolith and a microservice is more about how they are deployed. A monolith is one large app that must be deployed all-or-nothing. Microservices are many "apps" that work together to achieve their purpose, and each can be deployed separately. Typically monoliths are more difficult to deploy, and involve more risk since the entire system can crash if they are badly deployed. For Microservices, each only handles part of the business processing so, in theory, if one is deployed badly only part of the app goes down.
This is just a conflation of terminology.
In the context of monolithic apps vs. microservices, "application" refers to a web application, or in this case more specifically a WSGI application. A Django project is usually deployed as a WSGI application. So a monolithic app would be a deployment of a huge Django project, while microservices would be multiple smaller Django projects that are deployed separately.
"Monolithic app" may sometimes be used to refer to a Django application, i.e. a python module that is in INSTALLED_APPS. However, in that case you wouldn't be talking about microservices.