What are the options to configure a reactjs and django application? - django

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.

Related

Svelte(kit) with Flask Backend - Some Questions

I am currently diving into the world of Svelte(kit) and I am at the point where I need some help with my decisions.
I will use Flask for the Backend so I tried to serve Svelte from Flask (like in this Git) and for the start, it looks fine.
But i prefer Sveltekit over Svelte, so i tried to serve Sveltekit in the same way as Flask, but I only got "%svelte.head% %svelte.body%" text on the page. What do i need to change?
Why serve Sveltekit from Flask instead of Svelte? For example, i do like the Routing in Sveltekit more than in Svelt. But I don't see the Point to use Endpoints while I could fetch the Flask API direct from the .svelte Page instead of fetching to the Endpoint to fetch then to the Flask API. Or what's wrong with my thinking?
Svelte vs svelte-kit
What you seem to be missing is the difference in svelte and svelte-kit.
Svelte itself makes it easy to write reusable fast and small components. These are independend of any server components. Svelte-kit builds on top of that, to create a full web framework, with potential server components.
In practice that means it provides multiple adapters to deploy a web app built with it to different places, such as netlify, as a express app, or just as a set of static html files, for github/gitlab pages.
For all adapters that are not static solutions, using svelte kit also adds the option to have server side rendering, which can often result in a better user experience.
Svelte-kit Endpoints
Your question about endpoints ties into that. The reason why you would have something to gain from making these endpoints from within svelte kit is twofold:
In your specific case, javascript/nodejs are usually faster then python,
and more importantly, if the endpoints are made with svelte kit, they can be used as part of the server side rendering procedure.
Since everything is happening on the same machine, that can dramatically speed up the whole process.
There is also the aspect that having services with different languages interact can be a large cognitive overhead, and the dtos you are transferring can be difficult to manage.
Approaches
If your existing server component is small, or still in the middle of being built, its probably a good option to switch to svelte-kit entirely, for the resulting speedup, simplicity of only working in one language, and a lot of convenience features that svelte-kit affords you. For that option you would have to familiarize yourself with svelte and svelte-kit a lot more though.
Here is some documentation by svelte-kit on endpoints as well as hooks which are very handy for managing user state.
Endpoints are fairly simple, so as long as you have a good grasp on what you are achiving in them, and some javascript/nodejs knowledge, it shoudln't be too hard.
If your existing server component in python can not be rewritten for a svelte-kit app, because of some unavailable dependencies, or because it's simply too large, you do still have the option of deploying the svelte-kit app as a static page, and then making direct requests to your python based service.
There is also the option of using svelte-kit endpoints as a proxy to make requests to your python service. This strategy fit's more into a microservice architecture, or if you are only making a new frontend for a existing backend application. Still, under the right circumstances a good option.

How to break a django website into microservices

So, I am new to this "monolith vs microservices" architecture debate and I have pretty much understood most of it. From my limited understanding I get it that in microservice architecture each feature(lets say) is a separate app. Now I need some clarification with respect to django for implementing microservices. Heres my question
Should I make every microservice aka the app a different django project altogether OR should I make every app aka the microservice inside one django project and keep them isolated (as in loosely coupled) ?
Microservice architecture simply states that your each service should be independent of each other.
Its also not necessary to create one micro-service in java and one in python since they are not related.
So yes, ideally your each micro-service is a separate django project.
The best way to break this, first list down all the possible modules in your site or app.
Then go through :
https://microservices.io/patterns/decomposition/decompose-by-business-capability.html
https://microservices.io/patterns/decomposition/decompose-by-subdomain.html
These are two recommended pattern of how you should divide modules / domain into micro-services.
well, you can use database routers in django ... that does the trick ... one wSGI file per app communicating with your NGINX server
The main purpose of micro service is to serve the specific business, for example you are running a cloud kitchen then Django project can have many sub projects under one master project or you can run each project as separate service, it up to you.
Service
backoffice
finance
rider
kitchen
now we will set the url for each service like
Endpoints
backoffice.mycompany.com
finance.mycompany.com
rider.mycompany.com
kitchen.mycompany.com
Once our app is up the service load will not effect other service.
The microservice should be completely independent so it should not belong to one Django project. You should be able to deploy each service independently with its own database, so even you split the project into separate apps they still share one physical database and you can not deploy them separately. Therefore, you could potentially create separate Django project for each 'microservice' but this does not make much sense. You put lot of overhead for creating a microservice and also using Django framework is not a best choice for MSA , have a look at Flask.

Django REST and React implementation model

I am currently creating a website hosted by Django. I plan to use React as my frontend framework. I have done some research on putting them together but most say that I should go for the SPA model and have separate web servers for frontend and backend. The problem is that I wish to use apache as a prod server with django and avoid having 2 separate servers. I have read about the hybrid model and having django serve static files with react.
My Biggest concern is security as I have already setup apache for security and I aware that node.js is somewhat insecure.
What would the best approach be. The separate SPA model or the hybrid model.
I'd say it's okay to go for hybrid model if the project is small and you are the only one working on it and you only want to make things done. I think it's kinda messy to create apps like this unless they don't really worth the time.
But if it's a big project and more than one developer is working on it or will work on it then i highly recommend going with separate web servers one serving frontend app and one django app.
Also note that you don't really need 2 different servers. You can use one server for both and use 2 different which is still not necessary and you can use one web server to serve both.
And security not something that different models can cause to downgrade or upgrade. It's up to you to configure the server and write both frontend and backend apps secure enough to do the work for you.
There are more than one web servers that are as secure as they can be and they work with both django and react pretty well. I used nginx many times to host both django and react apps and i had no problem causing by nginx itself whatsoever.
And for last piece of advice if you will; Creating good quality apps requires a lot of time and energy, working with different technologies that do really good for what they are made for and if you are planning to be a really good developer you should come out of your comfort zone and adapt with new technologies that comes out and they are coming out pretty rapidly which requires you to learn constantly and do things in way you are not used to yet and making things work even if they doesn't seem to be good together at the first look.

Django Rest Framework + Angular 2

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.

Incorporating react redux into django

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).