aurelia syncfusion bridge with Aurelia SPA Template

This integration is based on the blog "Building Single Page Applications on ASP.NET Core with JavaScriptServices"

Prerequisites

• .NET Core SDK 1.1
• NodeJS version >=6.0

Creating a SPA project

Create simple Aurelia application which was discussed here and follow the below steps to integrate aurelia-syncfusion-bridge

• Install syncfusion-javascript Widgets and aurelia-syncfusion-bridge by executing the following commands.

npm install syncfusion-javascript --save

npm install aurelia-syncfusion-bridge --save

• Set the environment variable to development mode by executing the following command.

setx ASPNETCORE_ENVIRONMENT "Development"

Note: After executing the above command, restart our command prompt to make the change take effect.

• In webpack.config.vendor.js file, add aurelia-syncfusion-bridge to entry.vendor.

entry: {
    vendor: [
          ……….
          …………
          'jquery',
          'aurelia-syncfusion-bridge'
    ]

• In webpack.config.js, add jpg,cur,gif file support to module.loader

module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
            { test: /\.html$/, loader: 'html-loader' },
            { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
//Add support for jpg,cur,gif file
            { test: /\.(png|woff|woff2|eot|ttf|jpg|gif|cur|svg)$/, loader: 'url-loader?limit=100000' },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    }

• In package.json, we need to add the path for Syncfusion Aurelia components in aurelia.build.resources to load the aurelia-syncfusion-bridge component source into webpack. For example, to render ejGrid component, we need to add the following path.

"aurelia": {
    "build": {
      "includeDependencies": "aurelia-*",
      "resources": [
        "aurelia-syncfusion-bridge/grid/grid",
        "aurelia-syncfusion-bridge/grid/column"
      ]
    }
  } 

• Export jquery to window object and register the aurelia-syncfusion-bridge plugin with Aurelia in boot.ts file which is in ClientApp folder.

import 'isomorphic-fetch';
import { Aurelia } from 'aurelia-framework';

/** Export jQuery to window object **/
import * as $ from 'jquery';
window['jQuery'] = $;
window['$'] = $; 

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

export function configure(aurelia: Aurelia) {
    aurelia.use.standardConfiguration()
     .plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid());

    if (IS_DEV_BUILD) {
        aurelia.use.developmentLogging();
    }

    aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
}

Note: We used ejGrid component to getting started with SPA templates, if you wish to render some other component, you have to do the necessary changes in package.json and boot.ts.

• We can render Syncfusion Aurelia components inside ClientApp/app/components/ folder.

Run the application

Run the below command and navigate to http://localhost:5000 to launch the application.

dotnet run