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.
- node - v12.13.1
- npm - v6.12.1
- yarn - v1.21.1
- vue - v4.1.1
- nest - v6.5.9
Tools and Services need to run this app.
# 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
# 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
# Mac and Linux using nvm (node-version-manager) npm i -g @nestjs/cli
- Clone the repo
# SSH git clone [email protected]:emjimadhu/monorepify.git # HTTPS git clone https://github.com/emjimadhu/monorepify.git
- Install NPM packages
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
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 frameworksin
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.
# Run any vue-cli commands in here
# Run any nest-cli commands in here ex: nest g m <module-name>
# Creae any number of codes that you want to share and make sure you export the files in index.ts
Add other frameworks
ng new <app_name>
tsconfigand remove common tsconfig options which can be shared across projects.
tslintand remove common tslint options which can be shared across projects.
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)
Subscribe to Vue.js Examples
Get the latest posts delivered right to your inbox