Starter Kit: Software Development Project with TurboRepo

This repository serves as a ready-to-use toolkit and project skeleton that enables a swift start in building innovative software applications. It leverages advanced technologies and frameworks like TurboRepo, NestJS, Vue 3 with Vite, TypeScript, and Nuxt.js to facilitate seamless and efficient software development.

Table of Contents

• Features and Contents
• Prerequisites
• Getting Started
• Getting Started with Docker
• Environment Variables
• Volar and Visual Studio Code (Takeover Mode)
• Top-Level Scripts
• Visual Studio Code Extensions
• Enhancements and Bug Reports
• Contribution
• License

Features and Contents

• TurboRepo: The repository is configured to work with TurboRepo – a tool that simplifies the management of multiple interconnected repositories within a single project. This allows you to focus on feature development while TurboRepo handles organization.

• NestJS: The backend of the application is built on NestJS, a Node.js-based framework that enables the creation of scalable and modular APIs. Fully integrated with TypeScript, NestJS offers performance and readable code.

• Vue 3 + Vite: The user interface is based on Vue 3, the latest version of the popular JavaScript framework. We also use Vite, a fast and modern tool for building user interfaces.

• TypeScript: The entire project is written in TypeScript, enhancing code safety and facilitating refactoring and maintenance.

• Nuxt.js: The repository also includes a sample configuration for Nuxt.js, a framework for creating Vue.js SSR (Server-Side Rendering) applications. This ensures SEO performance and fast content loading.

• Electron: The project can also be packaged as a desktop application using Electron, allowing you to create cross-platform applications.

• Capacitor: Capacitor is integrated to enable building native mobile apps using web technologies.

• Docker: Docker is utilized to containerize and manage application deployment.

• Shared Package: The repository incorporates a shared package to enhance code reusability and maintainability.

• Test Configuration with Vitest and Jest: The repository includes a pre-configured setup for testing using Vitest and Jest. You can easily write and run unit tests for your Vue components and TypeScript code. Simply utilize the provided test configuration and harness the power of Vitest's rapid testing capabilities along with Jest's robust testing framework.

Prerequisites

Suggest to install globally in dev environment:

• pnpm
• nest-cli

Getting Started

# 1. Clone the repository
git clone https://github.com/DhivinX/turbo-starter.git

# 2. Enter your newly-cloned folder
cd turbo-starter

# 3. Install the project and build packages in libs folder
pnpm install

# 4. Dev: Run web with hot reload 
pnpm dev-web # or make dev-web

# 5. Dev: Run API project with hot reload 
# Note that you need to create the .env file in the project root directory beforehand

# You should copy the .env.example file and rename it to .env
cp .env.example .env

# Then you can configure database access and other server settings
pnpm dev-api # or make dev-api

# 6. Or run API and WEB projects with hot reload parallel
pnpm dev # or make dev

Getting Started with Docker

# 1. Clone the repository
git clone https://github.com/DhivinX/turbo-starter.git

# 2. Enter your newly-cloned folder
cd turbo-starter

# 3. Install the project and build packages in libs folder
pnpm install

# 4. Copy env.example to .env.local and pass wished variables:
# Change DATABASE_HOST to "postgres"
cp .env.example .env.local

# 5. Build image:
make docker-build-local

# 6. Run API and WEB projects development process with hot reload in docker container 
make docker-run-local

Environment variables

.env.example

# Frontend: API server connection configuration
VITE_WEB_DEFAULT_LOCALE="en"
VITE_WEB_API_URL="http://localhost"
VITE_WEB_API_PORT=3000

# Backend public url
API_PUBLIC_URL=http://localhost:3000

# HTTP / HTTPS server config
API_HTTP_PORT=3000

# Cross-Origin Resource Sharing domain origins
# More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
API_HTTP_CORS=["http://localhost", "http://localhost:8080", "http://localhost:8081", "http://localhost:8082", "app://localhost", "capacitor://localhost"]

# Keys required for hashing passwords and tokens
# They should be filled with random, unique strings
API_SECRETS_PWDSALT="123456"
API_SECRETS_JWT="123456"

# Database type: postgres, mysql, sqlite etc.
# More info: https://typeorm.io
DATABASE_TYPE="postgres"

# Database connection config
DATABASE_HOST="localhost"
DATABASE_PORT=5432

# Database name and user credentials
DATABASE_NAME="turbonv"
DATABASE_USER="postgres"
DATABASE_PASSWORD="root"

# Disable this in the production version of the application
# More info: https://typeorm.io/faq#how-do-i-update-a-database-schema
DATABASE_ENABLE_SYNC=true

Volar and Visual Studio Code (Takeover Mode)

Volar is now Vue - Official extension so, takeover mode is no longer needed in version 2.0. Please enable built-in TypeScript and JavaScript Language Features extension, if you was disable this extension before.

Top-Level Scripts

DEVELOPMENT

• dev - run all applications simultaneously with hot reload
• dev-api - run API project with hot reload
• dev-web - run WEB project with hot reload
• dev-web-electron - run WEB project in electron application with hot reload
• dev-nuxt - run nuxt application with hot reload
• dev-mobile - run mobile application with hot reload

BUILD

• build - build all packages and applications
• build-api - build API project application
• build-web - build WEB project application
• build-web-electron - build electron application with web project
• build-nuxt - build nuxt application
• build-mobile - build mobile application

RUNNING

• start - start all applications
• start-api - start API project application
• start-web - boot up a local static web server that serves the files from dist
• start-nuxt - start nuxt application

MOBILE

• mobile-android - build mobile application and open in Android Studio
• mobile-ios - build mobile application and open in Xcode

COMMON

• test - run tests for all packages and applications
• lint - lint all packages and applications
• clean - remove dist directory from all packages and applications

Visual Studio Code extensions

{
  "recommendations": [
    "vue.volar",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "visualstudioexptteam.vscodeintellicode",
    "mikestead.dotenv",
    "firsttris.vscode-jest-runner"
  ]
}

Required

• vue.volar - Vue Language Features (Volar)
• syler.sass-indented - Sass syntax highlighting.
• dbaeumer.vscode-eslint - VS Code ESLint extension.
• editorconfig.editorconfig - EditorConfig for VS Code.

Optional

• mikestead.dotenv - DotENV - Support for dotenv file syntax
• visualstudioexptteam.vscodeintellicode - IntelliCode

Enhancements and Bug Reports

If you find a bug, or have an enhancement in mind please post issues on GitHub.

Contribution

If you have ideas for enhancing this starter or want to add new features, feel free to submit pull requests. Your contribution can help other developers kickstart their projects even faster!

License

This starter kit is provided under the MIT license.