Lit-Mobx-Vaadin Starter Kit
This starter kit features Lit, Mobx and Vaadin elements.
- Mobx - State management library
- Vaadin - Routing and UI components
- Playwright - Testing library
- TypeScript - Type checking
- Storybook - Component library
- ESLint - Code linting
- Prettier - Code formatting
- Node.js 16.8 or later installed
- We recommend using the starter.dev CLI to create your own copy of this kit.
npm create @this-dot/starter -- --kit lit-mobx-vaadin
yarn create @this-dot/starter --kit lit-mobx-vaadin
- Follow the prompts to select the
lit-mobx-vaadinstarter kit and name your new project.
cdinto your project directory and run
yarn startto start the development server.
- Open your browser to
http://localhost:8000to see the included example code running.
starters/lit-mobx-vaadin/src directory you will find a few directories organizing the project. Files are organized in directories under
src as such:
api- contains functions that can be used to contact the Starter.dev API
components- contains re-usable components used inside of the project
pages- contains page components that are rendered when certain routes are visited
styles- contains stylesheets used by multiple components
yarn devruns your app for development, reloading on file changes
yarn start:buildruns your app after it has been built using the build command
yarn buildbuilds your app and outputs it in your
yarn testruns your test suite with Web Test Runner
yarn test:integrationruns your test suite with Playwright
yarn storybook- Starts the Storybook UI.
yarn storybook:build- build Storybook as a static web application
yarn lint- runs the linter for your project
yarn prettier- Formats code for the entire project.
yarn analyze- generate manifest for web components
Kit Organization / Architecture
Routing for this kit is handled by Vaadin Router
UI Components are located inside the
src/components folder. The extended/overridden Vaadin components have their own dedicated folder. Make sure to import these components from this folder and not directly from the installed module.
Pages are located inside
src/pages. Each one represents a route. These pages have some shared styles defined in the
PageMixin. This mixin can be extended if shared functionality between pages is required.
Styling and Theme
The project uses Vaadin Components as the main component framework. Usage of CSS variables is encouraged for theming. The default “Lumo” theme has been extended with some custom variables.
build command creates a working app using web components, so you can deploy it to any hosting provider that supports a static site.