A CLI to bootstrap new vite-based TypeScript projects. Rely on hand-crafted installation and configuration of the following products:
- vite.js
- TypeScript
- EsLint
- Prettier
- Visual Studio Code Extension recommendations
- Visual Studio Code settings (format & lint your code on save)
- TailwindCSS (optional)
- Lit (optional)
- React (optional)
- Vue.js (optional)
- Svelte (optional)
- Cypress.io (optional)
- Playwright (optional)
- Storybook (optional)
- Ladle (optional)
- Histoire (optional)
npm init @froko/vite-ts@latest
It will ask the following questions:
- Project name
- Template type
- Testing framework
- Component explorer
The CLI will create a new directory named by the project name.
- Vanilla Typescript
- Vanilla TypeScript with TailwindCSS
- Lit
- Lit with TailwindCSS
- React
- React with TailwindCSS
- Vue.js
- Vue.js with TailwindCSS
- Svelte
- Svelte with TailwindCSS
- Cypress.io
- Playwright
- None (if you don't want to benefit from e2e and component testing)
- Storybook
- Ladle (only React)
- Histoire (only Vue.js and Svelte)
- None (if you don't want to benefit from isolated component visualization)
-
npm run dev
: Starts the application at http://localhost:3000 -
npm run build
: Builds the application into thedist
folder -
npm run preview
: Serves the built application at http://localhost:3000
-
npm run cypress
: Starts the application & runs Cypress.io in visual mode -
npm run cypress:ci
: Serves the builtapplication & runs Cypress.io in headless mode
-
npm run playwright
: Runs your playwright e2e tests in different headless browsers -
npm run playwright:ct
: Runs your playwright component tests in different headless browsers -
npm run playwright:report
: Shows the Playwright HTML report of the last test run
-
npm run storybook
: Starts Storybook at http://localhost:6006
-
npm run ladle
: Starts Ladle at http://localhost:61000
-
npm run histoire
: Starts Histoire at http://localhost:6006
All templates provide a simple rating app. While building this product, I wanted to have something more than just a Click-Counter-Button to showcase the capabilities of web components together with sophisticated testing (Cypress.io, Playwright) and visualization (Storybook, Ladle, Histoire).
The rating app looks like this:
Feel free to delete all the sample application related code in the src
folder and start over with your own project!
- Include solidjs templates
- Include Angular templates
- ...