After reading this article about separating server and client, Separate REST JSON API server and client?
I want to know if this problem also exists in Django.
In Django, are these 2 separate phenomenons?
Django is MVC. Take out the view, have django as the backend and just send JSON. Create a separate say Emberjs or Angularjs app. Make these clients access backend's REST resources. In this case, how can you put the projects together to deploy to Heroku? Can you just deploy a "JAVASCRIPT-HEAVY-CLIENT" to Heroku, and have it just talk to ur REST server?
Since Django is MVC, don't completely take out the view, but integrate Emberjs/Angularjs into the View, but still use REST resources? In this way, you can put all the angularjs components/js files into the static folder and deploy to Heroku.
Are these the same? and realistically, how do you put them together to be able to deploy to Heroku?
Heroku is a application server platform. It's not really designed to serve static code.
The approach I've previously taken is to build the Django part normally, and have a single view that serves out a bootstrap template for everything under the JS App root.
Say I have a {Angular,Ember} app living at mydomain.com/app/, then everything under that will serve the bootstrap template (which includes serialised values queried from database) and calls the JS boostrap method to startup your app, and then the app takes over routing from that point, and renders out it's views.
At this point, all the data for the views is coming from django-rest-framework/django-tasypie.
Using this method and leveraging django-pipeline & django-boto's S3 storage backend, You should be able to serve a decently sized project with Django & {Angular,Ember}
Related
I would like to create a React SPA, which is fed by querying a Django REST API.
I was reading this, and I encounter this point:
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)
It seems that in case of an SPA (Single Page Application), it would be better to choose 1. As far as I understand, the React app would just be a big file with all the required css, html and js, right?
So we just create this file, and serve it on a specific endpoint of the Django app. Then, I do not understand the benefits of the "standalone" way of doing things. We would need two different domains, it would cause issues with authentication, and the standalone SPA would in fact just be serving a static file right? Is there a reason why it would be interesting to use a standalone SPA?
But when I read React in Django or React as a standalone?, it is advised to keep front-end and back-end separated. I wonder what I am missing, and what is the benefit of creating a standalone React SPA. reactjs - React in Django or React as a standalone? - Stack Overflow mentions that it would allow backend to be reused by different applications, but I do not understand what would prevent my backend from being reused if it is serving a static file. My backend will not disappear, it will still be here, ready to be reused, right?
pt1. yes the react app is bundled into a couple of files that you can use in your html template
pt2. standalone would be interesting if you already have a large Django project running, and you cannot afford migrating everything to a React SPA
pt3. You are correct in stating the backend is just another application serving content, and can be accessed like any other API. The difference lies in the content being served: When creating a React SPA, the backend is only concerned about what data is requested and what data needs to be persisted to the database. Now your frontend code can focus on specific frontend problems, such as user experience and browsing/navigation of the user: For example utilizing the Redux store, where you can store your JWT token in the browser session, or cache already retrieved data that might be useful on other pages. This offloads the backend considerably because you don't need to send the same data twice.
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 in the process of porting my website front-end to Angular JS. The backend is based on Django.
I initially planned to develop a restful API for Angular to fetch data from backend.
However, I've found that the easiest way would be to generate partials templates in Django. Is there any disadvantage of this approach that I'm missing?
Currently I don't plan use any data binding.
The problem with your approach is that you're side stepping one of the things Angular is spectacular at which is routing.
I've recently started creating a Django website which uses Angular Js and had a difficult time wrapping my head around how I would use django templates with angular templates.
To sum it up;
I created an app named band which has one page.
I setup Django rest framework to handle crud operation via a restful service for the band app.
I have one template for band, which does NOT use inheritance or anything since this interferes with routing. (I struggled with this a bit, maybe i'm off but below is my determination and direction)
The reason for the struggle is typically in Django you have a server side web framework. Angular is a client side framework. Django separates it's template directory from static directory content. Your JavaScript angular files will be looking for template includes which it needs to find. My particular production server setup uses Django (Mod-WSGI) to handle rendering the template while static content like images, js and css are rendered by NGINX. Basically I just decided okay since Angular aims to be for SPA (single page applications) I would simply have a django template for band which does not inherit from a base master page or anything like that and mostly leave up everything in that band template to be rendered and updated via angular.
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!