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$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
                { test: /\.html$/i, use: 'html-loader' },
                { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
                //Add support for jpg,cur,gif file
                { test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' },
                { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } },
                { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } },
                { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
        ]
    }

• 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(PLATFORM.moduleName('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.

• Import Syncfusion themes in ClientApp/app/components/app/app.html file as like the below code snippet.

<require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css">

• 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