This project implements a Multi Page App, all batteries included under 5Kb, based on the Van.js library.
A dependency-free router is also included, featuring nested routes that can be loaded dynamically, reducing the bundling size significantly.
CSS support is provided by goober, a less than 1KB css-in-js solution.
Centralized theming for your components, the theme object provides information about the colors, shape, transitions, typography common to your components. See theme.js
For most of the project, a website comes in 3 different forms:
- a landing page for unauthentated user.
- an application for the authenciated user.
- an application for the adminitrator and support people
Instead of creating 3 different repositories, multi page apps allows to use one repository, hence sharing code is as easy as it can get, no more duplications of components, vite configs, themings and so on.
Each app is located at the src/pages directory.
A collection of reusable components such as buttons, input, alert is available at components
For an enhanced developer experience, this project is built with Vite.
Install the dependencies:
npm installStart a development server:
npm run devBuild a production version:
npm run build<dist>/index.html
<dist>/admin.html
<dist>/storybook.html
vite v4.3.9 building for production...
✓ 37 modules transformed.
dist/index.html 0.69 kB │ gzip: 0.40 kB
dist/storybook.html 0.69 kB │ gzip: 0.41 kB
dist/admin.html 0.76 kB │ gzip: 0.42 kB
dist/assets/router-00fe99d8.css 0.89 kB │ gzip: 0.48 kB
dist/assets/notFound-b8464423.js 0.10 kB │ gzip: 0.11 kB
dist/assets/formLogin-f93433b9.js 0.47 kB │ gzip: 0.32 kB
dist/assets/landing-30eb12da.js 1.02 kB │ gzip: 0.53 kB
dist/assets/admin-2cc5bb6c.js 1.63 kB │ gzip: 0.83 kB
dist/assets/storybook-01f85d43.js 7.50 kB │ gzip: 2.39 kB
dist/assets/router-5c735e0c.js 7.87 kB │ gzip: 3.80 kB
✓ built in 140ms
Preview the production version:
npm run previewVisualize the bundle size:
npm run bundle-visualizerPlease open a bug or feature request at van-kit GitHub