A boilerplate for Full stack VueJS and nestJS

by Vue.js Examples

Monorepify

A boilerplate for Full stack VueJS and nestJS and other typescript frameworks too. But i believe you can add JS frameworks too (with little modification).

I like monorepos for code sharing between multiple projects in a single codebase. For other frameworks like angular, react, nest, express, There is wonderful tool called NX. They don't support Vue (for now). That's why i created this boilerplate. But you can you any JS Frameworks with little tweaks!

A list of commonly used resources that I find helpful are listed in the acknowledgements.

Built With

Getting Started

Required Versions

  • node - v12.13.1
  • npm - v6.12.1
  • yarn - v1.21.1
  • vue - v4.1.1
  • nest - v6.5.9

Prerequisites

Tools and Services need to run this app.

  • node
# Mac and Linux using nvm (node-version-manager)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

nvm install v12.13.1
  • yarn
# Mac
brew install yarn

# Debian / Ubuntu
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
  • nestjs
# Mac and Linux using nvm (node-version-manager)
npm i -g @nestjs/cli

Installation

  1. Clone the repo
# SSH
git clone git@github.com:emjimadhu/monorepify.git

# HTTPS
git clone https://github.com/emjimadhu/monorepify.git
  1. Install NPM packages
yarn install

Scripts

  • yarn dev:all:start - Starts Development server for shared, vue and nest,
  • yarn dev:all:build - Builds shared, vue and nest,
  • yarn dev:vue:start - Starts vue development nest,
  • yarn dev:vue:build - Builds vue,
  • yarn dev:vue:lint - Lints vue,
  • yarn test:vue:unit - Unit testing for vue,
  • yarn test:vue:e2e - End to End testing for vue,
  • yarn dev:nest:start - Starts nest development server,
  • yarn dev:nest:build - Builds nest,
  • yarn dev:nest:lint - Lints nest,
  • yarn prod:nest:start - Starts nest in production mode,
  • yarn dev:shared:start - Starts shared development nest,
  • yarn dev:shared:build - Builds shared,
  • yarn dev-shared:vue:start - Starts shared and vue in development mode,
  • yarn dev-shared:nest:start - Starts shared and nest in development mode,
  • yarn dev-shared:vue:build - Builds shared and vue,
  • yarn dev-shared:nest:build - Builds shared and nest,
  • yarn utils:remove-node-modules - Removes all node_modules folders

Directory Structure

  • root: Project root holds all the fies of the project
    • apps: Holds client(VueJS) and server(NestJS) projects (You can add any client or server frameworks in here in addition or replace with existing ones. See section Add other frameworks in How To)
      • vue: A Vue project created using vue-cli
      • nest: A Nest project created using nest-cli
    • libs: Holds all the common codes you can share between projects
      • shared: A shared module for common code sharing across projects in this work space.
    • readme-images: Holds all the images for README.

How to

  • Code Scaffolding

    • VueJS

      • cd apps/vue
      • # Run any vue-cli commands in here

    • NestJS

      • cd apps/nest
      • # Run any nest-cli commands in here ex: nest g m <module-name>

    • Shared (Typescript)

      • cd libs/shared
      • # Creae any number of codes that you want to share and make sure you export the files in index.ts

  • Add other frameworks

    • Angular (Example)

      • cd apps
      • ng new <app_name>
      • Remove node_modules and package-lock.json in <app_name>
      • tsconfig.json: Put ../../tsconfig in extends field of tsconfig and remove common tsconfig options which can be shared across projects.
      • tslint.json: Put ../../tslint in extends field of tslint and remove common tslint options which can be shared across projects.
      • Run cd <root_directory> && yarn utils:remove-node-modules && yarn install
      • Look at branch enhancement/new-angular-app for example setup
    • I believe you can add other typescript frameworks with this same steps! (You can even add native JS frameworks with little of tweaking)

GitHub