Getting Started With Ignite UI for Web Components

    This topic provides step-by-step instructions for creating Web Components applications with Ignite UI for Web Components

    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
    
    Note

    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 with this code:

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

    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/ --output-filename index.bundle.js"
      },
    
    Note

    This script will use webpack to bundle the index.js file into another file called index.bundle.js and place it into a folder named 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": {
        "build": "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 menu or press CTRL + ` keys)

    2 - Type this command to install the web component polyfills:

    npm install @webcomponents/custom-elements
    

    3 - 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 and lit-html

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

    npm install --save igniteui-webcomponents-core
    npm install --save igniteui-webcomponents-charts
    npm install --save igniteui-webcomponents-maps
    npm install lit-html
    

    2 - Import the Geographic Map modules and ModuleManager in index.js file:

    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
    import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
    // module manager for registering the modules
    import { ModuleManager } from 'igniteui-webcomponents-core';
    

    3 - Register the Geographic Map modules using the ModuleManager

    ModuleManager.register(
        IgcGeographicMapModule,
        IgcDataChartInteractivityModule
    );
    

    4 - Add the Geographic Map web component to the body of index.html file

    <body>
        <igc-geographic-map id="map" height="500px" width="100%">
        </igc-geographic-map>
    </body>
    

    Step 4 - Build and Run the Web Component Project

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

    npm run build
    
    Note

    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 end of body element in index.html file.

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

    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

    Note

    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 map should now be rendered with shape of the world.