Giter Club home page Giter Club logo

dhivinx / turbo-starter Goto Github PK

View Code? Open in Web Editor NEW
31.0 3.0 1.0 1.53 MB

Monorepo starter with advanced technologies and frameworks such as TurboRepo, NestJS, Vue 3 with Vite, TypeScript and Nuxt.js to facilitate seamless and efficient software development.

JavaScript 2.62% TypeScript 46.07% HTML 0.42% Vue 44.99% SCSS 2.51% Java 0.76% Makefile 2.51% Shell 0.12%
nestjs nuxt nuxt3 starter turborepo typescript vue vue3 capacitor electron monorepo docker docker-compose

turbo-starter's Introduction

Turborepo Logo

Vue Logo Nuxt Logo Nest Logo

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

  • 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:

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.

turbo-starter's People

Contributors

andersbc avatar dependabot[bot] avatar dhivinx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

andersbc

turbo-starter's Issues

Need for Setup Documentation

Thank you for this repo. I am putting it to use already. But it would be nice to have some documentation on how to set this up for educational purposes (Command by command and why). For instance, I'm still trying to understand how you managed to put the config for all the apps in one .env file (I'm guessing the shared config package).

Understanding the setup would allow others to do a similar setup with different stacks. This repo is currently only useful to me because by some luck it contains the stacks that interest me.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.