This template represents a starting point for creating new applications using TypeScript + Vue 3 + Vite + Express + Tailwindcss + Bulma.
This MVP starter template should help get you started developing and verifing your ideas quickly.
**Important note: *Even though the template can be used as a starting point / reference for any production application, it is geared more towards testing / verifying your ideas without the hussle of starting the project from scratch and integrating the technology into this unusual stack. ***
The project does NOT have integrated database adapter. This is intentional, for a few reasons:
- Certain developers prefer No SQL over SQL solutions and vice versa,
- Developers use different vendors for their database solutions,
- Developers have opinions regarding database adapters / drivers,
- It requires none setup with Docker / database instance for connection,
- Everyone knows how to manipulate JavaScript Arrays / Objects to query the data,
- I find it appealing not to deal with SOLID principles when testing ideas I might scrape tomorrow. Save yourself some time and only improve upon things when you validate the idea first :)
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
The repository includes the following directory structure:
- Frontend / UI code is located in
src/client
directory, - Backend / Server is located in
src/server
directory, - Mock (file) database is located in
src/db
directory, - Shared models / functionality is located in
src/common
directory.
There is no integrated database adapter / persistent layer in the project! If you missed why, please refer to the first few paragraphs of the instructions.
The setup helps me validate my ideas quickly, without worring too much about design decissions / separation of concerns and persistent layer. The setup is very flexible and forigving.
Note that with the great power comes great responsibility.
The project uses a code stack that allows me to be fast when coding / prototyping with UI's and API part. For these reasons I have chosen the following technology in order to validate ideas very quickly:
- TypeScript - Strongly typed programming language that builds on JavaScript,
- Vue 3 - An approachable, performant and versatile framework for building web user interfaces,
- Vite - Next Generation Frontend Tooling,
- Express - Fast, unopinionated, minimalist web framework for Node.js,
- Tailwind CSS - A utility-first CSS framework,
- Bulma - the modern CSS framework that just works,
- Other tools and libraries (complete list).
Node >= v16+
or higher,npm >= 8+
or higher.
By cloning the repository locally and changing the remote:
$ git clone git@github.com:ognjenjevremovic/mvp-starter.git
$ cd ./mvp-starter
$ git remote remove origin
$ git remote add origin git@<version-control-host>:<your-username>/<your-project-name>.git
Or by simply creating a new project directly from the Github UI, using Use this template
functionality.
To run the Frontend / UI code:
$ npm run start:start:watch-client
To run the Backend / API code:
$ npm run start:start:watch-server
To run both commands in a single terminal session:
$ npm run start
Note: Vite is configured as a Proxy server, proxying all requests from ^/api/.*
to http://localhost:8000
where API (server application) is listening for incoming requests. If you were to deploy the application to remote (or use it with Docker), without Vite, you will need to setup NGINX / Apache accordingly.
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing
Lint with ESLint
npm run lint
MIT. See LICENSE for details.