Getting Started with Syncfusion JavaScript (Essential JS 2) library and Meteor Framework

10 Jul 20232 minutes to read

This article provides a step-by-step introduction to configure Syncfusion JavaScript (Essential JS 2) library and build it in the Meteor framework.

Prerequisites

Setup development environment

1.Open the command prompt from administrator mode, and install the Meteor using the following command line.

on Windows:

    choco install meteor

on OSX/LINUX:

    curl https://install.meteor.com/ | sh

> Refer to [this documentation](https://www.meteor.com/install) for more information about installing `Meteor`.

2.Run the following command line to create a new project under ej2-meteor folder after installing Meteor.

    meteor create ej2-meteor

ej2 meteor new project

3.Now, navigate to the created project location ej2-meteor, and install the required default dependencies from the command prompt.

    cd ej2-meteor
    meteor npm install

ej2 meteor npm install

Configure Essential JS 2 control in application

1.Install the @syncfusion/ej2 npm package in the application using the following command line.

    meteor npm install @syncfusion/ej2 --save

ej2 meteor npm ej2 install

For getting started, the Calendar control will be added in the new application.

2.Open the application in Visual Studio Code, and add the <div> element inside the <body> element in ~/client/main.html file for rendering the Calender control.

    <head>
        <title>ej2-meteor</title>

        ....
        ....
    </head>

    <body>
        ....
        ....

        <h2>Essential JS 2 Calendar</h2>
        <!--HTML element which is going to render as Essential JS 2 Calendar control-->
        <div id="element"></div>
    </body>

    ....
    ....

3.Then, import the Syncfusion JavaScript styles, and render the Calender control inside the Meteor.startup method in ~/src/client/main.js file.

    ....
    ....

    import './main.html';

    // import Syncfusion Essential JS 2 styles from node_modules
    import '../node_modules/@syncfusion/ej2/material.css';

    import { Calendar } from '@syncfusion/ej2-calendars';

    Meteor.startup(() => {
        // initialize calendar control
        let calendarObject = new Calendar();

        // render initialized calendar
        calendarObject.appendTo('#element');
    });

    ....
    ....

4.Finally, run the following command line to run the Meteor application.

    meteor

Open the localhost URL in the web brower.

ej2 meteor build

The Calendar control will now be rendered in the browser.

> If you face any memory issue when running the above command line, increase the memory by adding `TOOL_NODE_FLAGS --max-old-space-size=4096` system environment variable. Refer to this [GitHub issue](https://github.com/meteor/meteor/issues/9568#issuecomment-359785483) for more information.

Running on mobile emulator/simulator

Refer to this tutorial for running the Meteor application in mobile emulator or simulator. Meteor on Windows does not support mobile builds, so this will not work on Windows.