How to implement Angular with Django - django

I have requirement for creating an application using Angular(TypeScript) as frontend and Django as Backend, where I will be working only on Django (backend). Is that creating an REST API only enough to communicate with front end. Is that only possible in the backend in this case?
Normally while working in Django I used to work in forms, views and will renders in the html and create API for it but in this case where I have no idea how angular would work even. Just creating an API only sufficient when communicating with Angular

Yes, creating API's using Django/DRF is sufficient to communicate with an Angular app.
Below is an illustration of a basic architecture of a Django Angular application.
API endpoints in Django will be served via the urls.py files using the DRF (Django Rest Framework. The angular client will send HTTP requests using the Http Client Module and display the retrieved data on the components/pages. A data service created in Angular will use the HTTP client to send and get data. Angular Router will handle navigations to pages and components.

Yes, you will be using Django for REST API views. Forget about templates and Django forms, you will be just sending and receiving JSONs.
If you want to host it together you will be probably serving just index.htm. The tricky part is that you need match all possible app routes to index too (the whole Angular lives there, handling routing on client side. But initial request after reload still can lead to arbitrary url)
More common way is using two separate containers, one for api and one for angular app. Then you can provide server side rendering on angular app (this will be still calling api from it) and separate api without need to handle index.

Related

Using Django REST framework for real-time chat?

I'm trying create a real-time chat app with Django and Vuejs. I would like to use django-rest-framework for this but I don't know how to make it real-time. I have used django-channels before but I'm curious if I can use only django-rest-framework as an alternative or maybe integrated it with django-channels.
You don't have to integrate them, because django channels are sending and accepting json data to websocket, as your rest framework api does. Rest framework is made for api, django channels for websockets, they won't have nothing in common cuz they have different implementations. The only thing you could consider integrating is rest framework auth inside django channels see: How do you authenticate a websocket with token authentication on django channels?
I also am a beginner but from what I know.. rest framework isn't suitable for "real-time" working of web-application cause it can't make a 2-way connection (like.. send data to other memebers in group without them making a call to it) for this purpose django channels is a better medthod cause its making a websocket connection.
do let me know if i m wrong.

Django REST with SPA - what structure

Django REST with SPA "within" or completely stand alone?
I'm diving into a new project where I'll try to build a SaaS web application and I've set on using Django Rest (with Postgres to utilize schemas) and React/Vue on the frontend.
What I'm unsure and what I can't seem to get an answer to is the way people structure these frameworks. E.g, on https://www.valentinog.com/blog/drf/ the author writes:
I see the following patterns (which are common to almost every web
framework):
React in its own “frontend” Django app: load a single HTML template
and let React manage the frontend (difficulty: medium)
Django REST as a standalone API + React as a standalone SPA
(difficulty: hard, it involves JWT for authentication)
Mix and match: mini React apps inside Django templates (difficulty:
simple)
And here are my advices.
If you’re just starting out with Django REST and React avoid the
option 2.
Go for option number 1 (React in its own “frontend” Django app) if:
you’re building an app-like website
the interface has lot of user interactions/AJAX
you’re fine with Session based authentication
there are no SEO concerns
you’re fine with React Router
Why is this beneficial, and is it actually different from having a stand alone rest api and a standalone SPA? The reason I wanna use Django is so I don't have to worry about authentication and authorization, and I also plan on utilising the admin panel - will this "not work" if I were to use two completely standalone applications for the backend and frontend? (e.g django rest with the sole purpose of exposing the api and the frontend to consume it).
What alleged benefits do I get from having django rest and SPA in the same "root" project

How should I implement reCaptcha v3 if my front and backend live on different domains?

I have several websites (SPAs), each one running on it's own domain. All these SPAs use the same API, which is hosted on another domain.
I'd like to implement reCaptcha v3 on my SPAs, but I'm not really sure how exactly the entire validation process would work.
Who would be in charge of receiving the callback from Google's service? If the backend, how does the frontend validate itself to the backend?
The SPAs are made with Vue and the backend is a Django app with Django Rest Framework. The backend is stateless, so there are no cookies.

Sharing authentication in Django

we are developing an application using Angular2 as frontend and Django as a backend. A Django backend is already in place, while the Angular2 application is in development. We chose, for obvious reasons, to use Django REST as a way to communicate with the backend.
The application login and the backend login are done in two different pages but of course the login domain and the user base is the same. The two login are working properly by themselves, but we wanted to find a way to implement a transparent login (so an user can log into any of the two application and be recognized by the other one without re-logging).
The Angular frontend is currently using Token Authentication. The server does send the csfr and session cookie along with the token. Moving to the backend, the csfr cookie is preserved, while the session is not, so a new login is required (of course, backend and Angular frontend are on different subdomains but in the same domain, the cookies are set on the domain, with two dots: '.domain.com') .
Is it possible to do what we desire? Could someone help us find the proper way to do it?
We've done some research and found Django CAS, but it's not clear for us what's about and if it fits our use case.
Thank you very much

Where should stripe be integrated in single page application with django backend

I am new to stripe integration. I've looked at couple of examples but I'm unsure where I should integrate stripe in my application. My front-end is in Angular and the backend is in django. Should I integrate stripe in Angular code base or django code base?
Both. Front-end: either use Checkout (Embedded Form) or their Custom Form. This will spit out a token that you must process on the server side. If you are using routing or have a complex app, then you probably want a library to abstract away from Stripe's default behaviors, as it uses a simple form action. This will cause a reload or redirection from the page which could be a problem if you don't want to leave the app. I prefer this lightweight wrapper, though others exist: https://github.com/tobyn/angular-stripe-checkout
Server: You include their library for your language (Python if you want) in a script written to process the token. This is what actually sends the charge to Stripe. Just doing the front-end side only sends them a token which shows up in the logs but does nothing. This is where you create a new customer, charge, subscription, etc. according to the API for your language.
Once you've got that set up, then you'll probably want to listen for their webhooks, save the user that is created in your backend with its created from the initial payment, etc.
You can integrate it both in the front-end and back-end, but if it's a single page app and the backend is REST-ful it makes sense to do it in Angular
See this article for example: https://www.airpair.com/javascript/integrating-stripe-into-angular-app