Aurelia + Django boilerplate or tutorial?

Help Requests
1

Is anyone here using Aurelia with Django? I would be grateful if anyone would point me towards a boilerplate project or tutorial showing how to build apps with Aurelia and Django.

There are enough differences between Rails, .net, etc. that it is hard for me to apply those patterns to the Django framework.

2

I have a Django app where I plan on rewriting the front-end with Aurelia. Basically I look at Django and Aurelia as two different worlds. You don’t need to worry about Django templates at all. Your Aurelia app is just static and talks to your Django APIs. So you could use Django Rest Framework or graphene-django (GraphQL) for your backend and Aurelia for your frontend.

That said, if you just want to throw aurelia in here and there into an existing django app, I’ve read there is a way to augment your site with aurelia, but I haven’t been able to get it to work yet. It seems to be easier to augment a page with angular 1 or vue.js from my experience.

3 Likes
3

I’ve managed to include an Aurelia application “inside” a Django project: It works like a charm!
Just add your bundle in templates/index.html

<body aurelia-app="main">
    <script src="{% static 'js/vendor-bundle.js' %}" data-main="aurelia-bootstrapper"></script>
</body>

If you don’t like the Django Template Language you can even remove it totally from your app and do everything using the Aurelia routing, i18n and fetch.

Since they are two separate projects they live in two different directories, so you have to write a task to copy your bundles from the Aurelia scripts directory to the Django static/js directory.
If you created the Aurelia project from the CLI (RequireJS, Gulp) you can change the path of your app-bundle.js from aurelia.json:

"targets": [
  {
    "id": "web",
    "displayName": "Web",
    "output": "scripts",
    "index": "index.html",
    "baseDir": ".",
    "useAbsolutePath": true,
    "baseUrl": "/static/js"
  }
],

You also want to make sure the paths of your assets (fonts, locale, etc.) match the static directory.
You can also build your Aurelia application to be used “outside” the Django project with little changes (e.g. to consume the Django API from a different URI).

By the way, I’m using Django REST Framework, otherwise wouldn’t make so much sense to use a full-fledged client-side web framework.
I suggest matching the Aurelia routing with the API endpoints, whenever possible, to be consistent between the two sides.

I haven’t run my project in production yet so I can’t tell about performances but Aurelia and Django match really well and are a pleasure to code at the point you feel guilty.

3 Likes
4

It just occurred to me that you could likely take the base aurelia gist.run project and augment a page with similar code: https://gist.run/?id=ed084601e77842c8c9b7863f52b2365a

5

I am particularly interested to see how Aurelia Script might make it easier to enhance a Django template with some dynamic functionality. A lot of work has been put into the, server-side rendered, Django template language, so I am hopeful to use it in conjunction with a client-side framework. Most tutorials I have seen tend to reduce Django to being a REST server. It seems there should be a middle way, where Django handles most end-to-end features and Aurelia provides some enhancement.

6

Hi @i5ar,
my django things are in different folder, and its not working by giving that path as you mention above

7

Hi @i5ar,
my django things are in different folder, and its not working by giving that path as you mention above

8

I am getting this error on browser

vendor-bundle.js:5778 GET http://localhost:8001/user-list/src/js/kam/app-bundle.js net::ERR_ABORTED

I have given path in aurelia-json
“output”: “/home/nilakshi/nilakshi/uamproject/src/kam/static/js/kam”
my django project is in nilakshi->uamproject, and aurelia-project is inside nilakshi->aurelia-project

9

Did you run python manage.py collectstatic?

1 Like
10

I am hopeful that Django could be to Aurelia what Laravel was to Vue. I.e. it could hopefully become a common companion, with complementary design principles.

1 Like
11

It’s pretty straightforward, use the Chrome DevTools to inspect your script source.
It’s important you start with a really basic Aurelia app so it’s easier to debug.
If you have fonts in your asset you also need to change the path inside vendor-bundle.js or app-bundle.js (if you import the font indirectly).
If you have your app localized you also need to change the path inside app-bundle.js.

1 Like