quick-start-guide.asciidoc

title	order	layout
Quick Start Guide	10	page

Quick Start Guide

We recommend the following steps to create a new Vaadin application with a UI written in TypeScript.

Note	Support for TypeScript requires Vaadin 15 or later. See the Vaadin release page to learn more about the latest version.

• use start.vaadin.com to create a new project (step 1)

• download a project archive and start the app in Dev mode (step 2)

• add a new TypeScript view to the app (step 3)

• access the backend from the new TypeScript view (step 4)

If you are migrating an existing Vaadin 14 application, please check the Upgrading from Vaadin 14 page.

Step 1 - Create a new project at start.vaadin.com

Note	Make sure to select TypeScript implementation when adding views.

Step 2 - Unzip and run the project in Dev-Mode

Run mvn spring-boot:run in the console and open the application at http://localhost:8080. After that, all modifications in frontend directory are compiled and reloaded automatically. Refreshing browser is enough to get the updates.

Note	When running the project the very first time, be patient all maven and npm dependencies need to be downloaded.

Note	If you’d rather run the spring project from the IDE, first run the maven goal mvn compile to prepare the environment.

Step 3 - Add a new client-side view and set a route path for it

First add a new route for URL http://localhost:8080/help. View content will be defined later in component 'app-help':

frontend/index.ts

router.setRoutes([
  ...
  {
    path: 'help',
    component: 'app-help',
    action: async () => { await import('./views/help/app-help'); }
  },
  ...
]);

Next using TypeScript create 'app-help' view component presenting a vaadin-button. onClick method is registered as click listener for the button and it just shows a message in browser inspector console:

frontend/views/help/app-help.ts

import {LitElement, html, customElement} from 'lit-element';
import '@vaadin/vaadin-button/vaadin-button';

@customElement('app-help')
export class AppHelp extends LitElement {
    render() {
      return html`
        <vaadin-button @click=${this.onClick}>Read More</vaadin-button>
      `;
    }

    onClick() {
      console.log('clicked');
    }
}

Step 4 - Access the back-end from the new TypeScript view

Continue with the Accessing back-end from TypeScript page for more details on how to consume server-side endpoints.