10

I'm fairly new to both Django and Angular. I recognize this is subjective and there are likely many ways to do it, but I'm wondering what best practices people can recommend for laying out such an application. I'm specifically thinking of the case of rich, SPA with the backend being mostly or entirely a RESTful API server, but then I'd like to have a common approach for any apps that serve significant views from Django. (I haven't done enough to decide if the latter warrants using Angular or may be more trouble than its worth).

Specifically:

What are pros/cons of maintaining the front-end code in a separate directory/repository from the backend versus, say, inside a "static" subdirectory of the Django app? In my case I'm the sole developer for now, which has some impact on this decision, but I can still consider myself separate "teams" of back-end, front-end, designer, etc. in the sense that my workflow will put me in one of these roles at a time.

My setup is basically a development machine, SCM in GitHub, and hosted publicly on WebFaction (shared web hosting). I will down the line want to easily grab projects on different development machines, but the primary workflow is just one dev, one prod installation. That said, I'm interested in best practices in real-world projects as I hope a future job may be working with Django.

ADDED: Another point I'm very unsure about is whether the Angular app should/must be bootstrapped by Django. That is, should the front page be served by Django and injected with any data?

PROS:

  • Can configure URL paths and even API endpoints that change from dev to production, without any alternate config and without these being hard-coded in front-end.
  • This is maybe necessary for authentication? Unclear to me having not done this yet...
  • Allows use of tools like the Django debug toolbar app.

CONS:

  • Couples the front-end to the back-end. What If I want to swap out the latter? What if I want the front-end to work in a sandbox with mock data?
  • Seems to strongly favor moving all Angular stuff into the Django app layout. At the same time, I don't like having a mix of Angular partials in one place and Django template(s) in another. I am already resolved not to mix NG and DJ templates, as I don't believe much good will come of this.
Jason Boyd
  • 1,192
  • 1
  • 9
  • 19

1 Answers1

4

I also started as solo developer on Django as BE with AngularJS FE. I've put AngularJS files in static folder and everything is fine.

Cons are definitely that you have FE and BE mixed up in one project, but I think that shouldn't matter since you are solo developer. Even if you decide once to hire additional developer (to split FE and BE work) your work wouldn't have any conflicts since one of you would work totally independent.

One of the pros for me is definitely I did entire login process via Django (templating as well) and once login went fine I served rest of the FE (entire AngularJS part).

For Django REST I've used TastyPie. It's great REST enhancement for Django and easy to set up.

Slaven Tomac
  • 1,552
  • 2
  • 26
  • 38
  • Thanks Slaven. I'm wondering, do you mean doing the login process via Django was facilitated by having the Angular app inside the Django app, or just that the two frameworks were a good fit together? If the former, I'm not clear why that would be. – Jason Boyd Feb 18 '14 at 13:43
  • 1
    No, entire login process was done via Django (no AngularJS at all) and if user is logged in I serve FE application (e.g. index.html which is AngularJS app). BTW, I saw you mentioned : "I am already resolved not to mix NG and DJ templates", you won't have absolutely any template from Django except login screen and if you like you can remove that one too). If you are going to use AngularJS as FE everything should be done there and use Django only for REST API. (I cheated a bit and used it for login process as well) – Slaven Tomac Feb 18 '14 at 13:49
  • Ah, I think I follow. Is the index.html here a static file then, or a Django view? I grok you're saying when users hit any URL into the app, Django essentially routes them to a login page unless they're logged in, and the Angular app basically doesn't "know" about this. Correct? – Jason Boyd Feb 18 '14 at 13:53
  • 1
    Correct. AngularJS doesn't know about this. – Slaven Tomac Feb 18 '14 at 13:56
  • Was this helpful to you? – Slaven Tomac Feb 18 '14 at 14:07
  • Sorry I'm not marking as "answered" because I'm hoping to hear others' experience with approaches to Angular/Django. The question may get closed as too subjective, but I hope it doesn't as I find this whole topic to be not very obvious. Your input helps a lot. – Jason Boyd Feb 18 '14 at 14:23
  • Of course, but still you can mark it as 'useful'. Thanks! – Slaven Tomac Feb 18 '14 at 14:24
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47765/discussion-between-jason-boyd-and-slaven-tomac) – Jason Boyd Feb 18 '14 at 14:25