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 dirctory

> 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

<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.config file to include a build script using webpack

  "scripts": {
    "build": "webpack src/index.js -o dist/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 name dist.

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

Step 3 - Install Ignite UI for Web Components

  1. Install the Ignite UI for Web Component using npm *\\*** todo update this**\*. 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 ModuleManager.register( IgcExcelModule, IgcSpreadsheetModule );

4. Add the `igc-spreadsheet` web component to the body of **index.html**
`` ## Step 3 - Build and Run the Web Component Project 1. Open a terminal in **VS Code** and execute the **build** script <pre style="background:#141414;color:white;display:inline-block;padding:16x;margin-top:10px;font-family:'Consolas';border-radius:5px;width:100%"> > npm run build </pre> > [!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 body of **index.html** after theigc-spreadsheet`.
  1. 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.

  1. 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.