Integration with django

1

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

1 Like
2

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.

3

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

4

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.

5

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?

6

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);
7

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

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/’,
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

1 Like
8

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

1 Like
9

I have a post that describes another way to integrate:

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

1 Like
10

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.

11

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 and that one, 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). So you can try switching to 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!

1 Like