I am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).
Related
Is it possible to use Django template together with React? If so, how should I do that?
You have to create two separate projects:
(I would think about it as backend and frontend)
Backend = Django/Flask/FastAPI or any other framework
Frontend = React application
If you have these two services you can start thinking about communication between them (the easiest by REST). So you should provide some API available for you're frontend to ie fetch the data.
Guys as you may know when using Vanilla JS you can just deliver html files to Django and just code between the lines in Python language in order to create the functionalities that you need in your backend side of your web application. However this is not the case when we use React JS. Is there any similar way(as vanilla JS and html files)for integrating REACT.JS and Django(except for using rest api endpoints)?
Maybe using react and Django are two different technologies and you need APIs to interact whereas this is not the case writing vanilla js in Django HTML files.
It's called React Server-Side Rendering. If you add Django to this and search for it, you'll get a couple of hits, like this tutorial bellow:
https://medium.com/meural-product-development/setting-up-server-side-rendering-with-react-redux-and-django-4d6f4d2fd705
Looks doable as long as you are somewhat proficient in Node as well.
I am new to web development I want to create an application using React and Django but all tutorials show that by using REST API.
is there a way to use Django and react without REST API and perform CURD.
I recommend also reading this blog post https://www.valentinog.com/blog/drf/, where Django and React are integrated via mini React apps inside Django templates.
I am not sure if it is the best approach, but may be useful.
React JS is a frontend JavaScript library. Whatever data is received by React from the backend, it's supposed be in JSON format and Django, if used without REST FRAMEWORK, doesn't pass JSON objects. It passes Query sets instead which are not acceptable and iterable in React. So, you have to use Django REST Framework, which makes use of serialisation and deserialisation for CRUD operations and hence creating REST APIs.
No, it's not possible.
Because even ReactJS is supposed to be on client side(Frontend). npm run build generates HTML/CSS/JS bundle for your app.
For backend, you might need node-express/Django rest... etc
HERE is complete guide to integrate your app.
Yes, you can do that with Django but in the end you need a API, no matter if it is REST or GraphQL because Django take care about the backend and React do all the stuff in the front end and you will need a way to connect both (and you do that by using an API)
I recommend you to use Django Rest Framework if you want to use a REST API or Graphene if you want to use a GraphQL API, here is a very cool tutorial to start with graphql.
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I am developing an app with an AngularJS front end and a Laravel API backend. The Laravel backend just listens for requests, process them and returns an answer. Front and back end are different independent apps... so far. I did it in such a way in order to be able to develop a mobile app later on which could consume the API. Im using also JWT to authenticate users, so Im not using Laravel's sessions at all. At this point I only require a webapp. I built a webapp which uses angular ui-router.
So far so good. The front end and the back end work well. However some of the front end views will be public and require share buttons, they also require to be indexable by Google.
I've read there are some alternatives.
Make some hack using the apache mod_rewrite in order to serve the angular app for people and a static version of it served directly by the backend. I think this would not be very difficult using Laravel.
Using Prerender.js. Which as far as Im concerned does pretty much the same job than option 1 but in a more complete manner.
However I am thinking about using a third alternative. Given that I only require the webapp now and the API is working I am thinking about using Laravel's built-in webapp functionality. I can use the controllers, directives and factories from angular and let Laravel handle the webapp routing.
An advantage of this is that I can render the meta tags using Blade (this fixes completely the SEO issues) and serve the rest of the contents using angular and the API.
Do anyone of you can see drawacks of such a solution or do you know a better way to accomplish SEO purposes using angular and Laravel?
Render Site :
You will have to render the pages from server side if you want to make it SEO friendly. But yes, what if you serve the server rendered pages to bots only. And for real users client side rendering will work.
Read about the Rendertron which will detect the user agent and accordingly serve the html.
Meta Tags :
Use Sluggable and replace id with slug in urls. You can follow https://oodavid.com/article/angularjs-meta-tags-management/