Bundling not addressed

[AlainBaslter]

I came across this repo from here https://help.syncfusion.com/aurelia/overview and I thought ahh great perhaps Syncfusion has already addressed the issue of bundling Aurelia Syncfusion Bridge in this seed project. So I went and looked at bundle.js hoping to find how to bundle this lot. Nada. My app is nearing completion and now I need to address bundling. I got the rest of the dependencies to bundle ok but I don't quite know how to bundle Aurelia Syncfusion Bridge + Syncfusion itself. Currently I configure useAll() and that's a sizable payload. I'd like to trim things down to only the widgets I am using. I don't the data visualization pieces for instance. Some guidance as to how to bundle this lot in the Typescript variant of these templates or in general would be very useful. PS: The job is not done until its deployed and that means bundling and minimizing. Thanks.

[karthickthangasamy]

@AlainBaslter Thanks for you kind words.

We can use and bundle specific component(s) by using the below code snippet.

[main.ts]

plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid().ejButton().ejTab());

If you are using any template related components include ejTemplate() in the above plugin registration process.

plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid().ejTemplate().ejTab());

Could you please let us know more information about configurations (package.json, webpack.config.js).? Those files help us to provide exact solution at the earliest.

[AlainBaslter]

@karthickthangasamy I am familiar with this approach...

plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.ejGrid().ejButton().ejTab());

And that's what I plan to do once I know for sure all the widgets my app uses and there are no more usages anticipated.

If and when I do it like this does it mean that the Aurelia bundler will automatically trace out the dependencies and bundle it for me? Or do I need to configure bundles.js too? That's the aspect that I am not sure about. Have you tried the gulp bundle task? I have not and I'll give it a spin soon.

Thanks

[karthickthangasamy]

@AlainBaslter Yes, we already tried this. Please provide application in repo, I will definitely look into this and provide you solution.

Thanks, Karthick

[karthickthangasamy]

@AlainBaslter We explored further about bundling of Aurelia application with Syncfusion components. We recommend the below to bundle specific components in production.

To deploy the application in production, we need to configure build/bundles.js and build/export.js.

In build/bundles.js, we need to include aurelia-syncfusion-bridge and its resources in bundles.

If you are using button component, then you need to include ejButton resources in build/bundles.js as like the below code section

"dist/aurelia-syncfusion-bridge": {
      "includes": [
        "aurelia-syncfusion-bridge",
        "aurelia-syncfusion-bridge/button/*.js",
        "text"
      ],
      "options": {
        "inject": true,
        "minify": false,
        "depCache": false,
        "rev": false
      }
    }

To use ejTemplate, add aurelia-syncfusion-bridge/common/template.js to dist/aurelia-syncfusion-bridge To use all components, add aurelia-syncfusion-bridge/**/*.js to dist/aurelia-syncfusion-bridge.

In build/export.js, you need to include Syncfusion themes in normalize array.

--
'normalize': [
     
  //
  include Syncfusion theme
     
  [
       
  'syncfusion-javascript', [
         
  '/Content/ej/web/ej.widgets.core.bootstrap.min.css',
         
  '/Content/ej/web/bootstrap-theme/ej.theme.min.css',
         
  '/Content/ej/web/common-images/**',
         
  '/Content/ej/web/bootstrap-theme/images/**',
         
  '/Content/ej/web/responsive-css/ej.responsive.css'
       
  ]
     
  ],
     
  [
       
  //
  include font-awesome.css and its fonts files
       
  'font-awesome', [
         
  '/css/font-awesome.min.css',
         
  '/fonts/*'
       
  ]
     
  ],

Then run the below command to export the application in production.

gulp export

The app will be exported into export directory preserving the directory structure.

We are working on to update our user guide documentation for production build, we will let you know once we complete and publish the changes in our UG link.