Integration with django


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


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.


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


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.


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?


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

From webpack.config

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


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

In your django settings:

Add ‘webpack-loader’ to INSTALLED_APPS

    '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/’,
filename: production ? ‘[name].[chunkhash].bundle.js’ : ‘[name].[hash].bundle.js’,
sourceMapFilename: production ? ‘[name].[chunkhash]’ : ‘[name].[hash]’,
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.



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

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