python - Django send_mail application - hook it up with Yeoman frontend

Question

I'm using Django as backend and Yeoman as frontend. I'm new to both. My frontend local server is running on localhost:9000, and my backend server is running on localhost:8000.

I just built an email sender application following the Django tutorial. It is working perfectly and consists of:

A form:

class ContactForm(forms.Form):
    name = forms.CharField()
    email = forms.EmailField()
    telephoneNr = forms.IntegerField()
    message = forms.CharField(widget=forms.Textarea)

A view:

from django.core.mail import send_mail
from django.shortcuts import render, render_to_response
from django.http import HttpResponseRedirect, HttpResponse
from mailsender.forms import ContactForm

def contact(request):
    if request.method == 'POST': 
        form = ContactForm(request.POST)
        if form.is_valid():
            success = True
            name = form.cleaned_data['name']
            email = form.cleaned_data['email']
            telephoneNr = form.cleaned_data['tlf']
            message= form.cleaned_data['melding']
            receiverEmail = ['[email protected]']
            text = message +'
'+name +'
'+str(telephoneNr)

            send_mail('Contact form', beskjed, email, receiverEmail)
            return render(request,"result.html")

    else:
         form = ContactForm(
    return render(request, 'contactform.html', {'form':form})

And my HTML:

<h1>Contact us</h1>

{% if form.errors %}
  <p style="color: red;">
    Please correct the error{{ form.errors|pluralize }} below.
  </p>
{% endif %}

<form action="" method="post">
  <table>
    {{ form.as_p }}
  </table>
  {% csrf_token %}
  <input type="submit" value="Submit">
</form>

If I visit localhost:8000/contactform, the contact form is displayed just as I want, and it does send emails.

I need help figuring out how to hook up this view to the Yeoman frontend - as searching the Internetz (and SO) leads me to the path of confusion. Should I use Tastypie? I really want to keep this logic in the backend. Any help pointing me in the right direction is greatly appreciated.

Answer 1

First off, you should consider not using Django templates & forms at all. (Supposing you're working on some bigger stuff)
Django is a really cool framework, but I found those 2 building blocks of it somewhat limited (https://stackoverflow.com/a/17383408/1432478).
The JS framework, that you use with Yeoman should take care of building HTML.

Django-Yeoman integration

Development architecture

Yeoman should serve html (templates replacement) and other static files + take care of JS framework of your choice.
If frontend needs to obtain/submit some data from/to the backend, it should issue a request to the very same server that is serving static content (Under the bonnet Yeoman is using Node.js as this server).

But wait ... how Node.js server is supposed to know about backend logic?
Yo can use grunt-connect-proxy to forward any request to another server - in this case Django.
I found this grunt-connect-proxy setup guide particularly helpful.

By issuing backend requests to the very same socket address (IP:port), you don't have to perform CORS or crazy stuff like parsing whole of your frontend code when building the production-ready version of your app in order to replace the socket address used in development with the one suitable for production.

Production & Deployment

When you run grunt it'll package production-ready version of your frontend static files in dist subdirectory.
Before submitting your django application as a package you basically copy htmls and the rest of the static content files to static/your_app.
I decided to serve Angular's htmls as static content - making them Django's templates would cause too much fuss (conflicting markup, static loaders, and so on ...). When some django project (containing your django app) is deployed, the static files, that were in dev setup served by node, are going to be served by django.
In other words: in production you need only one server - the one used by django.

It's only during development, that you need to benefit from fuzzy-buzzy stuff offered by yeoman, such as:

• LiveReload
• linting your code
• generators
• ...

Note: I've read that Yeoman team is planning on providing a better way of integrating yeoman with web frameworks. Not sure how they want to do it, perhaps a similar solution to generators (separate generator per framework).

Sample

Yo can check out a django app I'm currently working on: https://github.com/vucalur/django-wibses/
It uses Angular JS and above I just described the architecture of it :)
Note: It is so not-finished-yet :) But as of today development setup is done, except for CSRF protection.

Tastypie

We are considering using Tastypie in the mentioned app, but only when writing RESTful API manually will become arduous. So I think whether to use Tastypie or not is up to you.

Further reading

I based my setup on this.

But if you know something about Java web apps, you should take a look at those (I wanted my Django-Yeoman integration work similarly to how Java(Maven)-Yeoman integration works):

• http://addyosmani.com/blog/making-maven-grunt/
• https://github.com/trecloux/yeoman-maven-plugin (mentioned in Addy's post)
• http://blog.tartachuc.org/2013/06/11/tomcat-maven-angular-grunt-et-yeoman-sont-dans-un-bateau/ (mentioned in Addy's post)
• http://naleid.com/blog/2013/01/24/calling-gruntjs-tasks-from-gradle/
• http://blog.tfnico.com/2013/07/considerations-for-javascript-in-modern.html (not directly related, but still worth reading)