Using Ignite UI CLI to jump start your Web Application Development

Introduction

Modern Web Application Developments introduces the complexity of dependencies for JavaScript libraries. You just want to use a JavaScript library, but the JavaScript library may be referencing/depending on other 5 libraries. Solving dependencies is time-consuming for new users and you may be giving up with using the library.

CLI (Command Line Interface) tool is very handy!

To solve this challenge, many CLI tools are available nowadays to reduce your groundwork. For Angular, Angular CLI is available and it creates a skeleton with referencing necessary dependencies. This allows you to get started with Angular development within 5 minutes.

Introducing Ignite UI CLI

Our Ignite UI provides two types of component sets for modern web app development. One is Ignite UI for JavaScript, HTML5/JavaScript based components which you can build very rich modern LOB applications for Desktop and Tablets. Another one is Ignite UI for Angular, Native Angular, Material based components which would be the best for creating LOB applications for mobile and tablets. Both require 3rd party libraries to use its powerful features like any other JavaScript frameworks or libraries and setting those necessary files is pain points when you just get started with our Ignite UI components or every time you want to start a new project.

This is the main reason for us to provide Ignite UI CLI. Ignite UI CLI is a Command Line Interface tool to scaffold for both Ignite UI for JavaScript and Ignite UI for Angular. In this entry, I am walking through from the beginning to create your first project with Ignite UI CLI.

Prerequisites

In order to use Ignite UI CLI, you need to install the followings to your environment.

• Node.js
• npm (bundled with Node.js)

Install

Open terminal or console and type following command to install Ignite UI CLI. You may need to run this as Administrator in some cases. 

npm install -g igniteui-cli

After completing the install, you can check the version with the following command.

ig -v

If Ignite UI CLI is installed, you will see this screen. I am using Ignite UI CLI 1.2.0-beta.1 for this entry.

Start Using Ignite UI CLI

If you type "ig -h", you will see available commands, but I recommend using our guide, which prompts you for options and you can select them by using cursor keys.

To start Ignite UI with the guide, simply type the following command.

ig

Define name of the project

When the guide starts, first you will enter a project name you will be working on.

Choose framework

Ignite UI CLI currently provides 3 options to choose for the framework you are going to use. Angular, jQuery, React. In this entry, I choose Angular.

Choose type of project

Here comes a confusing part. Now you have two options. One is Ignite UI for Angular, which is an obvious option when you are going to use Ignite UI for Angular for this project. Another one is Ignite UI Angular wrappers, which is an Angular Extension provided for Ignite UI for JavaScript. You can find more details about extensions and available packages in Ignite UI Package and Repo Name Changes. In this entry, I use Ignite UI for Angular.

Add components or views

After choosing the type of project, the structure of the project has been generated and now you can choose the component (a view with single control) or view (a view with multiple components generated from templates) repeatedly.

Add component

When you select to Add component, You will choose a group of components, then choose component to be placed. The latest Ignite UI CLI provides 3 groups, Layouts, Scheduling, Grids&Lists.

In this entry, I chose Grids&Lists group then, added a Grid. The name of added component is "myGrid". 

Add View

When you select add View, you can add a view provided by Infragistics. Views represent specific business scenarios and look like more completed. 

After adding a component and a view, you will see the output like below:

Build and Run!

When you choose complete, Build process gets kicked and after completion, you can open a browser to localhost's address specified in the terminal. Links on the side bar navigate you to pages generated by Ignite UI CLI.

How to run an existing project created by Ignite UI CLI?

If you receive or download a project, which was generated by Ignite UI CLI, you can run the project by using the following command in the project folder/directory.

ig start

Build starts automatically then project starts. If you want to add components or views, simply type "ig" in the project folder/directory.

Conclusion

Ignite UI CLI has been built to jump start using Ignite UI libraries. You can use this tool to learn how to use our libraries and also you can extend generated views to match your business needs.

If you would like to know more detail about Ignite UI CLI or would like to see the source code, you can visit our GitHub page.

Let's get started!