https://github.com/vaadin-learning-center/crm-tutorial-typescript

Reference implementation of a Spring Boot + Vaadin web app, with the UI in TypeScript and Web Components.
https://github.com/vaadin-learning-center/crm-tutorial-typescript

spring-boot typescript

Last synced: 8 days ago
JSON representation

Reference implementation of a Spring Boot + Vaadin web app, with the UI in TypeScript and Web Components.

• Host: GitHub
• URL: https://github.com/vaadin-learning-center/crm-tutorial-typescript
• Owner: vaadin-learning-center
• License: unlicense
• Created: 2020-06-17T13:21:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-08-30T16:26:11.000Z (about 3 years ago)
• Last Synced: 2024-04-08T17:09:17.252Z (7 months ago)
• Topics: spring-boot, typescript
• Language: TypeScript
• Homepage:
• Size: 1.03 MB
• Stars: 7
• Watchers: 4
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  



# Vaadin CRM in TypeScript

Reference implementation of a Spring Boot + Vaadin web application.

The UI is built with reactive components using TypeScript and LitElement.

The backend is built with Java and Spring Boot.

This is a TypeScript-based version of the [Vaadin CRM](https://github.com/vaadin-learning-center/crm-tutorial) application which is used as an example in the [Building Modern Web Apps with Spring Boot and Vaadin](https://vaad.in/37pHRmY) tutorial series. 

See the [Vaadin FAQ](https://vaadin.com/faq) for more details on the difference between the Vaadin Java and TypeScript APIs.

## Key differences from [Vaadin CRM](https://github.com/vaadin-learning-center/crm-tutorial)

### Styling

#### How to use the Vaadin Lumo / Material theme in my app?

This project includes a helper file

[frontend/utils/lumo.ts](https://github.com/vaadin-learning-center/crm-tutorial-typescript/blob/master/frontend/utils/lumo.ts)

which is needed for importing Lumo styles into TypeScript views (see issue [#18](https://github.com/vaadin-learning-center/crm-tutorial-typescript/issues/18) for simplifying this in the future).

See the comments in the file for more info.

##### Applying the Lumo styles globally to the light DOM of the application

`frontend/index.ts`:

```ts

import './utils/lumo';

```

##### Applying styles into the shadow DOM of a LitElement based component/view

`frontend/components/list-view/list-view.ts`:

```ts

import { Lumo } from '../../utils/lumo';

@customElement('list-view')

export class ListView extends LitElement {

  // ...

  static styles = [Lumo];

  // ...

```

#### How to create styles for my view?

View and component styles are saved in a plain `.css` file next to the view/component `.ts`.

`frontend/components/list-view/list-view.css`:

```css

/* ... */

.toolbar {

  margin-bottom: var(--lumo-space-m);

}

/* ... */

```

`frontend/components/list-view/list-view.ts`:

```ts

import { Lumo } from '../../utils/lumo';

import styles from './list-view.css';

@customElement('list-view')

export class ListView extends LitElement {

  // ...

  static styles = [Lumo, styles];

  // ...

```

##### Writing styles directly in the `.ts` file of the view/component

It's also possible to write the styles directly in the `.ts` file if you don't want to create a separate CSS file for them.

`frontend/components/list-view/list-view.ts`:

```ts

// Make sure to import also `css` from 'lit-element'

import {css, customElement, html, LitElement, property} from 'lit-element';

import { Lumo } from '../../utils/lumo';

@customElement('list-view')

export class ListView extends LitElement {

  // ...

  static styles = [

    Lumo,

    css`

      .toolbar {

        margin-bottom: var(--lumo-space-m);

      }

    `

  ];

  // ...

```