Learn how to install and use our new Kendo UI Template Wizard to quickly create powerful Angular, React and Vue applications.
One of our goals on the Kendo UI team is to help you build great apps fast. With that in mind, today we’re happy to announce that there is a new Kendo UI Template Wizard for Visual Studio Code 🎉
In this article you’ll learn how to install the extension, and how to use it to create powerful Angular, React and Vue applications.
The Kendo UI Template Wizard is a Visual Studio Code extension, and as such you’ll need to have Visual Studio Code installed to use it.
Once you have Visual Studio Code installed, go ahead and open it, head to the extensions tab (#1 in the image below), and use the search bar (#2 in the image below) to search for Kendo UI Template Wizard.
Select the Kendo UI Template Wizard, and then click the green Install button to add the extension to Visual Studio Code.
And... that’s it! You now have the extension installed and ready to go, so let’s see what it can do.
To launch the Kendo UI Template Wizard you’ll need to use the Visual Studio Code command palette, which you can open with Ctrl + Shift + P (Cmd + Shift + P on macOS). With the palette open, search for the Kendo UI Template Wizard Launch option, and select it to launch the wizard.
From here, the process of building an app is pretty simple. First, give your project a name and path.
Next, select whether you’d like to use React, Angular or Vue.
For the third step, you need to create any pages you want to appear in your application. The wizard allows you to start pages from four pre-configured templates: Blank, Form, Grid, and Chart.
If you’re trying the wizard for the first time, go ahead and create a page using each type so you can see how everything works.
After you create your pages, hit the Next button one last time. This will take you to the final step of the process, where you’ll choose which of the preconfigured Kendo UI themes you’d like to start your app with. (And you’ll be able to customize your theme further later on.)
Next, click the create button, and the wizard will generate your new application, as well as a link to open your app up in Visual Studio Code.
With your app now created and ready to go, let’s look at what you can do with it.
To run your app you’ll first need to install its npm dependencies by running
npm install from your terminal or command prompt.
TIP: You can open your terminal or command prompt directly in Visual Studio Code using Ctrl+`.
Next, run your app using
ng serve for Angular,
npm start for React, or
npm run serve for Vue.
And just like that, you now have a multi-page application set up and ready to go!
One final tip: now that you have your app, you can use the Kendo UI ThemeBuilder to customize the visual appearance of your theme directly in the browser.
If you’re interested, check out the following documentation articles for detailed steps on using ThemeBuilder to customize your app’s theme.
The Kendo UI Template Wizard makes it trivial to quickly scaffold new apps for React or Angular, so give it a shot. And when you do—let us know what you think. The extension is available on GitHub, so create an issue if you run into issues or have any feature requests.
TJ VanToll is a frontend developer, author, and a Principal Developer Advocate for Progress. TJ has over a decade of web development experience, including a few years working on the jQuery and NativeScript teams. Nowadays he helps web developers build awesome UIs with KendoReact.
Subscribe to be the first to get our expert-written articles and tutorials for developers!