JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

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

18 May 2022 / 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

  1. 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.
Copied to clipboard
git clone https://github.com/syncfusion/ej2-quickstart.git ej2-quickstart
  1. 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.
Copied to clipboard
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

  1. 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.
Copied to clipboard
<!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>
  1. Now, render the Button control using the following JavaScript code in the ~/src/app/app.ts file.
Copied to clipboard
import { Button } from '@syncfusion/ej2-buttons';

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

// render initialized button
button.appendTo('#normalbtn');
  1. Then, map the required Syncfusion packages in the system.config.js configuration file.
Copied to clipboard
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');
  1. After configuring System.js and rendering the Button control, add the required Syncfusion JavaScript styles in the ~/src/styles/styles.css file.
Copied to clipboard
@import '../../node_modules/@syncfusion/ej2/material.css';

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

  1. 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.
Copied to clipboard
npm start
Source
Preview
index.ts
index.html
Copied to clipboard
import { Button } from '@syncfusion/ej2-buttons';

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

    // render initialized button
    button.appendTo('#normalbtn');
Copied to clipboard
<!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/20.1.55/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>
Previous
Next