# Integration with django

**URL:** <https://discourse.aurelia.io/t/integration-with-django/2152>\
**Category:** Uncategorized\
**Created:** [January 22, 2019, 6:41am UTC](https://discourse.aurelia.io/t/integration-with-django/2152 "2019-01-22T06:41:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nilakshi](https://avatars.discourse-cdn.com/v4/letter/n/9dc877/32.png) [@Nilakshi](https://discourse.aurelia.io/u/Nilakshi)\
**Post date:** [January 22, 2019, 6:41am UTC](https://discourse.aurelia.io/t/integration-with-django/2152/1 "2019-01-22T06:41:01Z")

</div>

Hi,  
I want to use aurelia js with django, so how can i include aurelia in django project

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [January 23, 2019, 6:24am UTC](https://discourse.aurelia.io/t/integration-with-django/2152/2 "2019-01-23T06:24:19Z")

</div>

I think the easiest is to develop them independently, which means you run Aurelia development tool (typically Aurelia-CLI or Webpack) in watch mode, and rebuild distribution files on changes to client folder of your Django project. Then you can server it like a normal website. I don’t know it enough to tell you more than this, but I can help around the first part.

---

<div class="post-metadata">

**Author:** ![Nilakshi](https://avatars.discourse-cdn.com/v4/letter/n/9dc877/32.png) [@Nilakshi](https://discourse.aurelia.io/u/Nilakshi)\
**Post date:** [January 23, 2019, 2:21pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/3 "2019-01-23T14:21:44Z")

</div>

@bigopon can you eloberate it, actually I am new to it and not getting initial setup so that (for aurelia build process).

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [January 23, 2019, 2:48pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/4 "2019-01-23T14:48:48Z")

</div>

Set the build output of the Aurelia program to the client side location of Django. I believe you do this in  
aurelia.json change the line  
“output”: “wwwroot/dist” to -\> client side place django is looking relative to the aurelia project  
you might need some ~/ or …/…/ etc.

---

<div class="post-metadata">

**Author:** ![Nilakshi](https://avatars.discourse-cdn.com/v4/letter/n/9dc877/32.png) [@Nilakshi](https://discourse.aurelia.io/u/Nilakshi)\
**Post date:** [January 24, 2019, 9:38am UTC](https://discourse.aurelia.io/t/integration-with-django/2152/5 "2019-01-24T09:38:39Z")

</div>

Hi @brandonseydel,  
I am using Aurelia CLI/webpack and I am not using aurelia.json, so in this case how can I use it in django?

---

<div class="post-metadata">

**Author:** ![brandonseydel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brandonseydel/32/993_2.png) [@brandonseydel](https://discourse.aurelia.io/u/brandonseydel)\
**Post date:** [January 24, 2019, 1:39pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/6 "2019-01-24T13:39:27Z")

</div>

It does use it though. It imports the aurelia.json and references it to a variable.

**From webpack.config**

```auto
const project = require('./aurelia_project/aurelia.json');
const outDir = path.resolve(__dirname, project.platform.output);

```

---

<div class="post-metadata">

**Author:** ![robertb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/robertb/32/470_2.png) [@robertb](https://discourse.aurelia.io/u/robertb)\
**Post date:** [January 25, 2019, 7:48am UTC](https://discourse.aurelia.io/t/integration-with-django/2152/7 "2019-01-25T07:48:04Z")

</div>

Check out django-webpack-loader. This works great with Aurelia, with minimal setup.

> **[owais/django-webpack-loader](https://github.com/owais/django-webpack-loader)**
>
> Transparently use webpack with django. Contribute to owais/django-webpack-loader development by creating an account on GitHub.

In your django settings:

Add ‘webpack-loader’ to INSTALLED\_APPS

```
WEBPACK_LOADER = {
'DEFAULT': {
    'BUNDLE_DIR_NAME': 'dist/',
    'STATS_FILE': os.path.join(BASE_DIR, 'path_to_aurelia_goes_here/webpack-stats.json'),
},

```

}

In your webpack.config.js you need something like this:  
output: {  
path: outDir,  
publicPath: production ? ‘/static/’ : ‘[http://localhost:9001/](http://localhost:9001/)’,  
filename: production ? ‘[name].[chunkhash].bundle.js’ : ‘[name].[hash].bundle.js’,  
sourceMapFilename: production ? ‘[name].[chunkhash].bundle.map’ : ‘[name].[hash].bundle.map’,  
chunkFilename: production ? ‘[name].[chunkhash].chunk.js’ : ‘[name].[hash].chunk.js’  
},  
devServer: {  
contentBase: outDir,  
// serve main.html for all 404 (required for push-state)  
historyApiFallback: true,  
headers: {  
“Access-Control-Allow-Origin”: “\*”,  
“Access-Control-Allow-Methods”: “GET, POST, PUT, DELETE, PATCH, OPTIONS”,  
“Access-Control-Allow-Headers”: “X-Requested-With, content-type, Authorization”  
}  
},

in the Django template which should house your application:

{% load render\_bundle from webpack\_loader %}  
{% if debug %}  
{% render\_bundle ‘vendor’ config=‘DEFAULT’ %}  
{% render\_bundle ‘app’ config=‘DEFAULT’ %}  
  
{% else %}  
{% render\_bundle ‘common’ config=‘DEFAULT’ %}  
{% render\_bundle ‘app’ config=‘DEFAULT’ %}  
{% render\_bundle ‘vendor’ config=‘DEFAULT’ %}  
{% endif %}

To use this do au run --watch in your aurelia project and run the django development web server.

I think this is all, but if you run into trouble I can help you diagnose it.

R

---

<div class="post-metadata">

**Author:** ![Nilakshi](https://avatars.discourse-cdn.com/v4/letter/n/9dc877/32.png) [@Nilakshi](https://discourse.aurelia.io/u/Nilakshi)\
**Post date:** [January 29, 2019, 11:29am UTC](https://discourse.aurelia.io/t/integration-with-django/2152/8 "2019-01-29T11:29:40Z")

</div>

Hi @brandonseydel  
I am getting this error on browser

vendor-bundle.js:5778 GET [http://localhost:8001/user-list/src/js/kam/app-bundle.jsnet::ERR\_ABORTED](http://localhost:8001/user-list/src/js/kam/app-bundle.jsnet::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

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [October 19, 2019, 9:42pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/9 "2019-10-19T21:42:40Z")

</div>

I have a post that describes another way to integrate:

> [@Enhancing Django with Aurelia](https://discourse.aurelia.io/t/enhancing-django-with-aurelia/3007):
>
> Hi, I put together a little example of a Django application that uses Aurelia to enhance a page. This is not an SPA, it’s using Django templates and the aurelia.enhance() feature. The readme is setup as a tutorial. It starts from scratch and tries to cater to Django developers curious about Aurelia, or Aurelia developer curious about Django. TLDR: If you already know about both and are stuggling trying to get Django and Aurelia to work together, just looks at the changes in the aurelia.json,…

It doesn’t use webpack, instead the Aurelia CLI built in bundle, similar strategy should world though.

---

<div class="post-metadata">

**Author:** ![n6151h](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/n6151h/32/1664_2.png) [@n6151h](https://discourse.aurelia.io/u/n6151h)\
**Post date:** [January 7, 2021, 8:20pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/10 "2021-01-07T20:20:50Z")

</div>

This no longer seems to work.

First of all, it requires webpack-bundle-tracker, which emits a file called “webpack-stats.json”. This is a status file that django-webpack-loader requires. It will (I suppose) have nested objects in it named “app”, “vendor”, etc, however, I’m only seeing an “app” section.

**Note: the examples in django-webpack-loader README use “main” rather than “app”, which doesn’t work.**

Next, when I get everything set up (point BUNDLE\_DIR\_NAME, STAT\_FILE, etc in config/settings.py) and run this, it gives me this error:

```
string indices must be integers

```

Digging a bit, I see that it is looking in webpack-stats.json to find the bundles under the nested “app” objected, in a further nested object called “chunks”. My webpack-stats.json file’s chunks are just a list of file names. But, in the django-webpack-loader code, we have (in webpack\_loader, line 42):

```
    for chunk in chunks:
        ignore = any(regex.match(chunk['name']) …

```

But, “chunk” at this point isn’t an object with a name attribute; it’s just a string. So this dereference fails. Maybe the elements of “chunks” at one time were themselves objects and this has since changed. Or, there’s a command line switch to make the generated webpack-stats.json file use that form. If so, there’s no mention of it anywhere I can find on albeit cursory inspection.

Look, I really like Aurelia, but the bundler / loader moving targets are HUGELY frustrating. It really shouldn’t be this hard.

---

<div class="post-metadata">

**Author:** ![Jenselme](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jenselme/32/39_2.png) [@Jenselme](https://discourse.aurelia.io/u/Jenselme)\
**Post date:** [January 11, 2021, 1:53pm UTC](https://discourse.aurelia.io/t/integration-with-django/2152/11 "2021-01-11T13:53:21Z")

</div>

Can this be an issue with some dependencies at a wrong version? I used `django-webpack-loader` some months ago on a Django/React project and everything worked fine. From what I see [in this issue](https://github.com/owais/django-webpack-loader/issues/227) and [that one](https://github.com/owais/django-webpack-loader/issues/218), newer versions of `webpack-bundle-tracker` are not supported. You can try downgrading `webpack-bundle-tracker` to see whether is solves the issue.

This project also doesn’t seem very active (see [here](https://github.com/owais/django-webpack-loader/issues/253)). So you can try switching to [django-manifest-loader](https://github.com/shonin/django-manifest-loader) which has a similar scope (and is recommended at the bottom of the readme of `django-webpack-loader`).

I hope this helps!