Getting Started With Ignite UI for Web Components

    The Ignite UI for Web Components is a complete set of Web Components components designed to enable developers to build the most modern, high-performance HTML5 & TypeScript apps for modern desktop browsers.

    Setting Up Computer

    Before you can run Ignite UI for Web Components, there are 2 steps to get everything on your machine set up to run any Web Components app, including Ignite UI for Web Components, and to build Web Components apps. To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with Web Components requires NodeJS, it’s sort of like an ASP.NET app running in the browser and requires ASP.NET runtime deployed on the server. For development, there is nothing better than Visual Studio Code to build Web Components apps. Getting started is easy, just download and install both Node.js and Visual Studio Code.

    Step 1 - Create the Web Component Project

    1 - Open a command line and create a directory named wc-html

    > mkdir wc-html

    2 - Change the command line path to the newly created directory

    > cd wc-html

    3 - Initialize npm in the directory

    > npm init -y

    4 - Install the webpack bundler and the webpack cli as a developer dependency

    > npm install webpack webpack-cli --save-dev

    Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

    5 - Open the project in VS Code

    > code .

    6 - Create a new file named index.html

            <title>Getting Started with Ignite UI for Web Components</title>

    7 - Create a new folder named src, and within that folder create a new file named index.js. Your project structure should look like this:

    8 - Update the package.json file to include a build script using webpack

      "scripts": {
        "build": "webpack src/index.js -o dist/index.bundle.js"

    This script will use webpack to bundle the index.js file into another file called index.bundle.js and place it into a folder name dist.

    If a javaScript heap out of memory issue occurs while building you can increase the heap size by using this build command instead:

    "scripts": {
        "build2": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack src/index.js -o dist/index.bundle.js"

    Step 2 - Install Polyfills

    1 - Open a terminal in VS Code (View -> Terminal, or CTRL+`) and install the web component polyfills package using npm

    > npm install @webcomponents/custom-elements

    2 - Import the web component polyfills into index.js

    import '@webcomponents/custom-elements/custom-elements.min';
    import '@webcomponents/custom-elements/src/native-shim.js';

    Step 3 - Install Ignite UI for Web Components

    1 - Install the Ignite UI for Web Component using npm. In this example, we will install the Spreadsheet web component.

    > npm install igniteui-webcomponents-core
    > npm install igniteui-webcomponents-excel
    > npm install igniteui-webcomponents-spreadsheet

    2 - Import the ModuleManager and the web component modules into index.js

    // module manager for registering the modules
    import { ModuleManager } from 'igniteui-webcomponents-core';
    // spreadsheet modules
    import { IgcExcelModule } from 'igniteui-webcomponents-excel';
    import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet';

    3 - Register the web component modules with the ModuleManager

    // register the modules

    4 - Add the igc-spreadsheet web component to the body of index.html

        <igc-spreadsheet id="spreadsheet" height="500px" width="100%">

    Step 4 - Build and Run the Web Component Project

    1 - Open a terminal in VS Code and execute the build script

    > npm run build

    This command will run the build script we created earlier. The build script will generate a file named index.bundle.js in a folder named dist

    2 - Add the index.bundle.js script to the body of index.html after the igc-spreadsheet.

        <igc-spreadsheet id="spreadsheet" height="500px" width="100%">
        <script src="dist/index.bundle.js"></script>

    3 - To run the project, launch a local development server. In this example, we are using Live Server. Right-click within the editor of index.html and select Open with Live Server


    Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the Visual Studio Marketplace.

    4 - Navigate to the index.html using a web browser on your local server, and the Ignite UI for Web Components spreadsheet should now be rendered in your browser.