Serving Angular app using Django

Question

I have a DjangoREST-Nginx-Gunicorn build, and I am using angular as the frontend.

This is the first time I work with this stack together, although I'm very familiar with Django. From what I'm used to, I'm serving pages using render with django templating.

Since I am using REST and angular, the project build is kind of different and I wonder how should I serve the angular app through this stack.

This is my project build

├── client
│   ├── client-app
│   └── index.html
├── gunicorn_start.sh
├── run
│   └── gunicorn.sock
└── server
    ├── config
    ├── __init__
    ├── manage.py
    ├── __pycache__
    ├── requirements.txt
    ├── static
    ├── urls.py
    └── views.py

What I wish to do, is to serve client/index.html and let the angular app handle everything from there on.

What would be the right way to do so?

EDIT: I have in views.py

def index(request):
    return render(request, 'client/index.html')

But I get an exception

TemplateDoesNotExist at /

thebjorn · Accepted Answer · 2017-08-26 06:35:14Z

1

The template is not being found either because TEMPLATE_DIRS is not set, or because your template isn't inside an app/templates folder, where app is in INSTALLED_APPS (and you have 'django.template.loaders.app_directories.Loader' in TEMPLATE_LOADERS).

ps: if you're not doing anything in your view, i.e. just rendering the template

def index(request):
    return render(request, 'client/index.html')

then you can do it in your urls.py:

url(r'^$', TemplateView.as_view(template_name='client/index.html'))

(or maybe you just spelled / wrong? it should be ^$...)

answered Aug 26, 2017 at 6:35

thebjorn

27.6k12 gold badges107 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bluesummers Over a year ago

as you can see there is no templates folder... So how should I go about this? I really don't want to have a template/client folder inside of client folder

thebjorn Over a year ago

I thought you said you were very familiar with Django...? If you don't want Django to find your template in your app, then list its folder in your TEMPLATE_DIRS setting. Perhaps a better question.. why do you want Django involved in serving a static html page? It seems very inefficient.

bluesummers Over a year ago

If i include it in TEMPLATE_DIRS I have to stick to the client/templates/client structure which I want to avoid. Eventually I passed this idea, I'm going to store the angular app on aws S3

thebjorn Over a year ago

That's not true at all. You can add only the directory containing the template to TEMPLATE_DIRS, and it can be anywhere on your file system.

Emad Fani · Accepted Answer · 2017-08-26 06:01:14Z

1

when domain entered you should redirect the user to client/index.html and then using angular-router you can do pretty much everything you have done using php or django routes for more info about angular routing

answered Aug 26, 2017 at 6:01

Emad Fani

5654 silver badges13 bronze badges

4 Comments

bluesummers Over a year ago

Can't see how to get this through, I've created a views files under server, created routing from urls to a view in views and in the view I wrote render(request, 'client/index.html') and it doesn't work

Emad Fani Over a year ago

put you'r index.html file in you'r root file in server it will render by default if you'r using apache based servers

bluesummers Over a year ago

I'm not going to do that, the index html is part of the client folder which has a lot of relative routing. I am getting a TemplateDoesNotExist error

Emad Fani Over a year ago

../client/index.html i guess should work if not i don't know bro

Collectives™ on Stack Overflow

Serving Angular app using Django

2 Answers 2

4 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Related