Integration of aurelia-syncfusion-bridge with Aurelia skeleton-navigation-esnext-webpack
25 Oct 20179 minutes to read
Aurelia skeleton-navigation-esnext-webpack uses the Babel transpiler so that we can write our application with esnext code which works well with any standard text editor. This skeleton uses NPM for package management and Webpack for bundling.
The aurelia-syncfusion-bridge plugin brings the Syncfusion Essential Studio for JavaScript Widgets into Aurelia world. So, by configuring aurelia-syncfusion-bridge plugin with Aurelia skeleton-navigation-esnext-webpack, we can use Syncfusion components in Aurelia application.
Synopsis
- Prerequisites
- Aurelia skeleton-navigation-esnext-webpack
- Installation of syncfusion-javascript Widgets and aurelia-syncfusion-bridge
- Webpack configuration
- Bridge registration
- Getting started
- Running the Application
Prerequisites
- NodeJS version >=4.0
In the upcoming sections, we will discuss about the integration of aurelia-syncfusion-bridge with Aurelia skeleton-navigation-esnext-webpack.
To quick start with Syncfusion Aurelia components, we have already configured aurelia-syncfusion-bridge with Aurelia skeleton-navigation-esnext-webpack. Those who are wish to directly getting started with Syncfusion Aurelia components execute the below commands and navigate to here.
> git clone https://github.com/aurelia-ui-toolkits/syncfusion-templates-repository.git
> cd syncfusion-templates-repository/skeleton-esnext-webpack
> npm install
Aurelia skeleton-navigation-esnext-webpack
In this section, we will discuss about the installation of Aurelia project dependencies.
- Download Aurelia skeleton-navigation from this link and extract it.
- From the extracted folder, execute the following commands to install project dependencies.
> cd skeleton-esnext-webpack
> npm install
NOTE
Ensure all the dependencies are installed without any errors.
Installation of syncfusion-javascript Widgets and 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
Webpack configuration
In this section, we will discuss about the configuration of webpack to seamlessly work with aurelia-syncfusion-bridge.
- In
webpack.config.babel.js
, add aurelia-syncfusion-bridge togenerateConfig.entry
section like the below code section.
entry: {
'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */],
'aurelia-bootstrap': coreBundles.bootstrap,
'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1),
'aurelia-syncfusion-bridge': ['aurelia-syncfusion-bridge']
}
- In
package.json
, we need to add the path for Syncfusion Aurelia components inaurelia.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": {
"resources": [
"aurelia-syncfusion-bridge/grid/grid",
"aurelia-syncfusion-bridge/grid/column"
]
}
}
NOTE
To use
ejTemplate
, addaurelia-syncfusion-bridge/common/template
toaurelia.build.resources
inpackage.json
and include the ejTemplate() inmain.js
file.
NOTE
To use any other Syncfusion components in Aurelia application, we need to add specific Syncfusion Aurelia component path to
aurelia.build.resources
inpackage.json
file. For example, To use button component, addaurelia-syncfusion-bridge/button/button
toaurelia.build.resources
inpackage.json
.
Bridge registration
In this section, we will discuss about the registration of Syncfusion bridge with Aurelia.
Register the aurelia-syncfusion-bridge
plugin with Aurelia in our main.js
file which is in src
folder. For example, to register ejGrid
component, we need to import syncfusion-javascript/Scripts/ej/web/ej.grid.min
in main.js
file.
import '../styles/styles.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
import * as Bluebird from 'bluebird';
import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min';
Bluebird.config({ warnings: false });
export async function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
//register aurelia-syncfusion-bridge plugin here
.plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid());
await aurelia.start();
aurelia.setRoot('app');
}
NOTE
To use
ejTemplate
, we need to addsyncfusion.ejGrid().ejTemplate();
in ourmain.js
file.
NOTE
To load button component with grid component additionally, we need to import
syncfusion-javascript/Scripts/ej/web/ej.button.min
and addsyncfusion.ejGrid().ejButton();
in ourmain.js
file.
NOTE
To load all Syncfusion components, we need to import
syncfusion-javascript/Scripts/ej/web/ej.web.all.min
and addsyncfusion.useAll()
in ourmain.js
file.
Getting started
In this section, we will discuss about the creation of Aurelia Syncfusion Grid component.
The below step describes to create Syncfusion Aurelia Grid component.
- Create
grid.html
file insidesrc/samples/grid
folder structure and use the below code example to render the Grid component.
<template>
<div>
<ej-grid e-data-source.two-way="gridData" e-allow-paging=true e-allow-sorting=true e-on-record-click.delegate="recordClick($event.detail)">
<ej-column e-field="OrderID" e-header-text="Order ID" e-text-align="right"></ej-column>
<ej-column e-field="CustomerID" e-header-text="Customer ID"></ej-column>
<ej-column e-field="EmployeeID" e-header-text="Employee ID" e-text-align="right"></ej-column>
<ej-column e-field="Freight" e-header-text="Freight" e-format="{0:C}" e-text-align="right"></ej-column>
<ej-column e-field="OrderDate" e-header-text="Order Date" e-format="{0:MM/dd/yyyy}" e-text-align="right"></ej-column>
</ej-grid>
</div>
</template>
- Create
grid.js
file with the below code snippet insidesrc/samples/grid
folder.
export class Grid {
constructor() {
this.gridData = [{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
OrderDate: new Date(8364186e5), Freight: 32.38
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,
OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,
OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,
OrderDate: new Date(8368506e5), Freight: 51.3
}];
}
recordClick(e) {
//handle event here
}
}
- Add Syncfusion themes in our project by adding the below code snippet in
src/app.html
file.
<template>
<require from="./nav-bar.html"></require>
<!--Add Syncfusion JavaScript themes here-->
<require from="../node_modules/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css"></require>
<require from="../node_modules/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
- Now, we are going to configure the navigation for created Grid sample in
src/app.js
file.
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' },
{ route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: './child-router', nav: true, title: 'Child Router' },
//Add the router configuration for Grid sample here
{ route: 'grid', name: 'grid', moduleId: 'samples/grid/grid', nav: true, title: 'Grid' }
]);
this.router = router;
}
}
Running the Application
To run the app, execute the following command and browse to http://localhost:9000 to see the application.
> npm start
NOTE
We need to execute the below command to overcome the issue
You may need an appropriate loader to handle this file type(cur)
. Since, the Syncfusion JavaScript component’s theme uses.cur
file.
> npm install @easy-webpack/config-fonts-and-images@^3.1.0 --save-dev