Changing from Django form to ReactJS - django

Currently I have a django sign up form rendered with a django template. I'm starting to switch to ReactJS so I wanted to change that form to a Modal window rendered with react.
The modal will replace the form so it will contain a form in its body containing the same input fields as the django form, before starting i need to know if the modal will work the same as the form or do I need to do some changes like binding it to the django view.

I'm using this setup now for the frontend of one project. This is far from trivial and took me some days to figure out. Start with this webpack-django library. You will need to setup your paths carefully along the road. Also for decent development experience, you will need to run webpack in watch mode as the rendering is dealt by django server, not webpack-dev-server (I run this mode in the start script of packages.json). After you can make this work, you will have some obstacles like: csrf tokens and confilct of urls.py with react-routing.
Well, I'm not being more speficic because not sure if you want to follow down this road. Also it requires a tutorial on setting up npm, webpack,django that would raise tons of questions. Besides, I would not recommend doing this just for a login form. You can give up on django forms and build your modal in vanilla javascript/html/css using django's template engine and bootstrap.
Hope this helps!

Related

How to use react-router and Django templates

Folks,
I am pretty sure I am not the first one to stumble on this problem. But somehow I am unable to find any relevant resources out there.
Here is my issue, I have a backend in Django and my front completely written in Reactjs- React Router - Redux (nice combo right).
when entering the url webhost.com/, django provides me with a page with links to a bundle that is my whole react application and different stylesheets
The problem arise when I want to refresh a page, the browser still tries to query the server even though a route exists in my react-router configuration.
I had a look at the answer here (catch-all option) React-router urls don't work when refreshing or writting manually , but I don't quite understand it and I am afraid to have a new redux state everytime Django will provide the user with a new page.
You can setup up a wildcard url pattern that will render the same view that gets rendered when a request is sent to webhost.com. I don't know if that's going to retain your store though.

When to use Angular with Django?

I have a pretty basic question.
Consider a CRUD web application built on Django. You have templates that render data. Those templates might have forms where you submit data to the backend, and that might reload the page to display changes. Sometime, you can make those requests over AJAX, for example when you need to update data on the UI. You can also submit forms with AJAX and update the HTML with it.
On the other hand you have single page applications. You serve a static file, and there is no reload of pages. You have data that comes from an API and populates some front-end template.
What are some guidelines for when to use what? Not in a mutually exclusive way, but within one Django project, what are some reasons/considerations to use a Django template/forms/AJAX approach and when to use Angular?
Thank you.
Something to consider is how "interactive" you want the client-side to be.
I am in the process of converting an existing Django app to use Angular (and django-rest-framework). The app was highly interactive and relied on a lot of custom JQuery to get various widgets working just right. JQuery's constant looping through the DOM made it pretty slow. I am finding that using Angular instead of JQuery is much faster.
So if you have a lot of complexity in the front-end, I would recommend Angular.

Single-page login in Django app

I'm currently using out-of-the-box django.contrib.auth to handle authentication in my Django app. This means that the user starts at a log in page and is redirected to the app on successful login. I would like to make my app single-page, including this login process, where a redirect doesn't happen, but maybe a "hot" template switch-out or some fancy client-side div magic (that still remains secure). My Google searching turned up pretty short, the closest solution dealing with putting a log in form on every page.
Any direction or ideas here would be much appreciated. I would obviously prefer to work within the existing confines of django.contrib.auth if possible, but I'm open to all solutions.
I'm not sure I understand your question completely. I think you want to have a single page. If so, put logic in your template that checks to see if the user is authenticated. If not, display a login form that POSTS to the appropriate django.contrib.auth view. You can supply an argument to this view to have it redirect back to your page. When you come back, the user will be authenticated, so you won't display the login form.
Have a look at Django-Easy-Pjax https://pypi.python.org/pypi/django-easy-pjax - it works like a charm and is well documented. Everything you like is being made with AJAX requests: links, forms using GET and forms using POST.
Essentially you only need to add a data-pjax="#id_of_the_container_where_the_result_goes" attribute in your a and form tags.
And the great thing about it: It updates the title and location bar of your browser.
One caveat: If you want to upload files in some form, this is not supported by Easy-Pjax, so you might want to use some workaround jQuery library for that.

Create custom django widget for timefield with now option

I have models with datetimefields and timefields. When the user interacts with these fields in a form they often just need to enter the current time. I need a now link almost exactly like what shows up in the django admin, so the user can just click it and the current time gets put in the field.
I tried looking through the django source but it seems to utilize some frontend javascript which I'm not very familiar with. Is there a simple way to make a widget that can be easily used in a timefield and datetimefield?
So this is not on the admin panel? As in on the site? Then this is not really a question to be posed to Django, I suggest tagging javascript. If you are unfamiliar with javascript, then tag jquery, they have things for this.
In case you're lazy, here's a start:
Here
jQuery premade
Javascript methods
Sorry, but this is more of a UI issue than a Django issue. Hope I helped, though.

Integrate existing blog code into Django-CMS?

If I already have a blog app done with Django and I want to use it with my new Django CMS site, is it okay to simply drop it into my new Django CMS project as a decoupled app and match anything /blog/ to the blog app as apposed to a Django CMS plugin? I guess what I need to know is when is it best to write my Django app as a plugin vs an entire app?
Thx
JeffC
Yes, but you don't just drop it into the urls.py, instead you can write an AppHook to tie your blog's URL scheme to a particular page in your CMS.
Plugins on the other hand are useful if you want to inserts particular aspects of you app into other page's placeholders - for example to show your latest 3 posts on the frontpage.
You might also want to include your blog's paths in a breadcrumb or menu on your site - in that case you need to write a custom Menu too.
Finally, it might also be useful to make use of django cms's placeholders in you blog model. His would allow you to post a variety of content via plugins.