CLI Integration - aurelia-ui-toolkits/aurelia-syncfusion-bridge GitHub Wiki

• Ensure that NodeJS version greater than 4.0 is installed.

• Install Aurelia CLI globally by executing the following command.

  npm install aurelia-cli -g

• To create a new Aurelia project, you should run the following command which will show some configuration options to customize your project.

  au new

• Navigate to your project folder and Install Syncfusion JavaScript Widgets to your project by executing the following command.

  npm install syncfusion-javascript --save

• Install aurelia-syncfusion-bridge to your project by executing the following command.

  npm install aurelia-syncfusion-bridge --save

• Open aurelia_project/aurelia.json file and add the below dependencies to the build.bundles.dependencies to seamlessly work with Aurelia and Syncfusion JavaScript components.

  • aurelia-syncfusion-bridge
  • syncfusion-javascript
    • jquery
    • jquery-validation
    • jsrender

  "dependencies": [
         "jquery",
         "jquery-validation",          
          {
            "name": "aurelia-syncfusion-bridge",
            "path": "../node_modules/aurelia-syncfusion-bridge/dist/amd",
            "main": "index",
            "resources": [
              "**/*.js"
            ]
          },
          {
            "name": "syncfusion-javascript",
            "path": "../node_modules/syncfusion-javascript/",
            "main": false,
            "resources": [
              "Content/ej/web/ej.widgets.core.bootstrap.min.css",
              "Content/ej/web/bootstrap-theme/ej.theme.min.css"
            ]
          },
          {
            "name": "jsrender",
            "path": "../node_modules/jsrender/",
            "main": "jsrender"
          }
     ]  

• We need to copy the fonts/images to the location where(common-images) Syncfusion themes expects them, which can be done using copyFiles in aurelia.json:

   "options": {
     "minify": "stage & prod",
     "sourcemaps": "dev & stage"
   },
   "copyFiles": {
     "node_modules/syncfusion-javascript/Content/ej/web/common-images/**/*": "common-images"
   },

• Also, change the stub property to be false in aurelia.json file

 "loader": {
     "type": "require",
     "configTarget": "vendor-bundle.js",
     "includeBundleMetadataInConfig": "auto",
     "plugins": [
       {
         "name": "text",
         "extensions": [
           ".html",
           ".css"
         ],
         "stub": false
       }
     ]
   }

• Register the aurelia-syncfusion-bridge plugin with Aurelia in your "main.js" file.

 import environment from './environment';

Promise.config({
 warnings: {
   wForgottenReturn: false
 }
});
export function configure(aurelia) {
 aurelia.use
   .standardConfiguration()
   .feature('resources')
   .plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.useAll());

 if (environment.debug) {
   aurelia.use.developmentLogging();
 }

 if (environment.testing) {
   aurelia.use.plugin('aurelia-testing');
 }

 aurelia.start().then(() => aurelia.setRoot());
}

The below steps describe to create Syncfusion Aurelia Grid component.

• In src/app.html file, add the following code snippet to your view.

  <template>
  <require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min.css"></require>
  <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require>
  <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>

• In app.js file, add the following code snippet to your view model.

   export class App {
    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
     } 
   }

• To run the app, execute the following command

  au run --watch

• Browse to http://localhost:9000 to see the application. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files.

• Run the below command to build the Aurelia application in production mode.

au run --env prod

• Copy/Move the below folder/files to production environment.
  • scripts folder
  • index.html
  • favicon.ico
  • Assets files mentioned in aurelia.json copyFiles array. Here we mentioned the common-images which is used for Syncfusion themes.