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 toSystem.js
know more details aboutSystem.js
and its functionalities.
git clone https://github.com/syncfusion/ej2-quickstart.git ej2-quickstart
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 linenpm install
will install all required Syncfusion JavaScript packages in 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>
~/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');
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');
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 aboveSystem.js
settings and imported styles.
npm start
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/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>