Getting Started with Syncfusion JavaScript (Essential JS 2) library from a seed application

22 Jul 2021 / 3 minutes to read

This article provides a step-by-step introduction to configure Syncfusion JavaScript (Essential JS 2) library and build a simple JavaScript web application from a github quickstart seed repository.

This quickstart seed application is integrated with System.js configuration. Refer to System.js know more details about System.js and its functionalities.

Prerequisites

Set up development environment

Open the command prompt from the required directory, and run the following command to clone Syncfusion JavaScript (Essential JS 2) quick start project from GitHub.

git clone https://github.com/syncfusion/ej2-quickstart.git ej2-quickstart

Now, the application is cloned in the ej2-quickstart folder. Run the following command line one by one to navigate to ej2-quickstart folder, and install the required npm dependent packages from the command prompt.

cd ej2-quickstart
npm install

The quickstart application preconfigures the dependent @syncfusion/ej2 package in the ~/package.json file. So, running the command line npm install will install all required Syncfusion JavaScript packages in application.

ej2 typescript seed local setup

Configure Syncfusion JavaScript control in application

After configuring the local development environment, open the application in Visual Studio Code, and add the Syncfusion JavaScript UI controls in application. For getting started, the Button control is added in the application ~/src/index.html and ~/src/app/app.ts files.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    ....
    ....
</head>

<body>
    <div>
        <!--HTML button element, which is going to render as Essential JS 2 Button-->
        <button id="normalbtn">Normal</button>
    </div>
</body>

</html>

Now, render the Button control using the following JavaScript code in the ~/src/app/app.ts file.

import { Button } from '@syncfusion/ej2-buttons';

// initialize button control
let button: Button = new Button();

// render initialized button
button.appendTo('#normalbtn');

Then, map the required Syncfusion packages in the system.config.js configuration file.

System.config({
    paths: {
        'npm:': './node_modules/',
        // Configure Syncfusion package path
        'syncfusion:': 'npm:@syncfusion/'
    },
    map: {
        app: 'app',

        // map the umd files from Syncfusion Essential JS 2 packages
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

System.import('app');

After configuring System.js and rendering the Button control, add the required Syncfusion JavaScript styles in the ~/src/styles/styles.css file.

@import '../../node_modules/@syncfusion/ej2/material.css';

The quickstart application is preconfigured with the above System.js settings and imported styles.

Finally, the quick start project is configured with Syncfusion JavaScript UI control, and run the following command line to run the application in web browser.

npm start

Source

Preview

index.ts

index.html

import { Button } from '@syncfusion/ej2-buttons';

    // initialize button control
    let button: Button = new Button();

    // render initialized button
    button.appendTo('#normalbtn');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="margin: 50px;">
        <!--element which is going to render-->
        <button id="normalbtn">Normal</button>
    </div>
</body>

</html>

Contents

Prerequisites
Set up development environment
Configure Syncfusion JavaScript control in application

Contents

Prerequisites
Set up development environment
Configure Syncfusion JavaScript control in application