Nest Vue
Nx monorepo starter: dockerized NestJS backend, Vue frontend, and NGINX; data via Prisma / TypeORM + GraphQL; Jest + Cypress testing; Jenkins CI/CD.
Overview
The nest-vueNx monorepo template is a comprehensive solution for developing web applications. It includes a backend built with NestJS and Fastify, a frontend built with Vue, and testing capabilities using Jest and Cypress. Data is accessed through Prisma/TypeORM and GraphQL. The template is managed by Yarn with PnP enabled and runs on Docker with NGINX + Node.js. It also supports SSL with certbot and has CI/CD capabilities with Jenkins.
Features
- Nest 9 Backend: A progressive Node.js framework for building efficient, reliable, and scalable server-side applications. It is configured with Fastify for better performance.
- Vue 3 Frontend: A JavaScript framework with a declarative and component-based programming model for developing user interfaces. It comes with Vite, Vitest, and TailwindCSS 3.
- NGINX: A high-performance HTTP server and reverse proxy with simple configuration and low resource consumption.
- Database of Choice: Agnostic data access through Prisma 4, TypeORM 0.3, and GraphQL via Mercurius. It includes setups for PostgreSQL and MongoDB, but other databases can be configured and used.
- Nx 14: An extensible build framework with computation caching to rebuild only what is necessary. It includes CLI generators for Nest and Vue plugins.
- Yarn 3: A slim dependency management system using Plug'N'Play for smaller repositories.
- Docker: Allows for consistent environments both locally and on remote hosts by spinning up the database, backend, and frontend.
- Jenkins: Provides a base CI/CD pipeline that can be customized to meet specific requirements.
- Certbot: Generates SSL certificates for both local development and remote hosts.
Summary
The nest-vueNx monorepo template is a powerful solution for developing web applications. It combines the NestJS backend framework with the Vue frontend framework, allowing for efficient and scalable development. The template includes many useful features such as database access through Prisma/TypeORM and GraphQL, testing capabilities with Jest and Cypress, and CI/CD capabilities with Jenkins. It is highly customizable and supports a range of frameworks and libraries through official Nx plugins. Overall, the nest-vueNx monorepo template provides a comprehensive and flexible solution for web application development.
- Nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vitepress
VitePress is a static site generator designed for creating documentation websites. It offers a lightweight and fast development experience using Vue.js and Markdown, with features such as live-reload, theming, and customizable layout components.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Prisma
Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.
- Fullstack
A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Docker
A website that uses Docker for containerization to streamline development, testing, and deployment workflows. This includes features such as containerization of dependencies, automated builds and deployments, and container orchestration to ensure scalability and availability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.