Integration with django


#1

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


#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


#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