1

I understand the concept of what I want to do (there is a rather nice question here: Django, REST and Angular Routes)

Django has a route for DRF, Admin, and needs at least one more, for the angular page.

But I'm not sure on the implementation details, particularly in where to put the frontend/static files, what to put in urls.py, and how to configure it for dev+production.

My url patterns currently look like this:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Ideally, in production, I want serve the HTML without touching django - straight from nginx or similar (probably using AWS EB, but that is outside the scope of this question).
For Dev - I don't mind, as long as it works!

Skipping djangos templating system for angular would be great, rather than altering angulars operators. I don't intend to use django templates (except in djangos admin, and DRFs browsable views)

Community
  • 1
  • 1
Chozabu
  • 1,015
  • 1
  • 10
  • 33
  • 1
    Please have a look here, it's about BackboneJS but it's same for AngularJS as far as the reverse proxying is concerned: http://stackoverflow.com/questions/32148124/how-to-deploy-static-website-connecting-to-django-restful-api – bakkal Jan 02 '16 at 18:47
  • 1
    That sums up how I deploy my ng apps, nginx serves the static files, and the ng app hits the Django DRF through the /api route, and if you have other routes like /api-auth or /admin just add them to nginx to forward them to Django – bakkal Jan 02 '16 at 18:49
  • 1
    Note that e.g. angular route in HTML5 mode doesn't have to be tied to the root URL `/`, it can be on `/app` as long as you set the base to `` in your ng app's HTML page (the one that loads the app) – bakkal Jan 02 '16 at 18:57
  • Thanks for the tips ;) – Chozabu Jan 04 '16 at 15:57

1 Answers1

2

For development, I use something like this, at then end of the main urls.py file, to serve static files from various directories:

if settings.DEBUG:
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    from django.conf.urls.static import static

    # this connects STATIC_URL to STATIC_ROOT
    urlpatterns += staticfiles_urlpatterns()

    # connect other paths to directories
    urlpatterns += static(settings.MEDIA_URL, 
        document_root=settings.MEDIA_ROOT)
    urlpatterns += static('/app/', 
        document_root=join(settings.BASE_DIR, '../ng_app/'))

For production, you set the webserver to handle the requests. First the known routes like /admin/, /api/, /api-auth/ and files in /static/.

And then a catch-all route / that would always serve your index.html with the Angular app for any route. So that HTML5 routes in Angular will always load the app first, and the app then uses its own routes to build the correct page from API data.

The actual app files could be anywhere, even on a different server.

C14L
  • 12,153
  • 4
  • 39
  • 52