Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/miguelramos/vtx

VTX, vite multi-apps, libs and packages.
https://github.com/miguelramos/vtx

cli monorepo vitejs vuejs

Last synced: about 2 months ago
JSON representation

VTX, vite multi-apps, libs and packages.

Awesome Lists containing this project

README 

        
# VTX Workspace manager for vite



Vtx is an wrapper on vite cli tool to manage multi apps, libs and custom packages on monorepo style focus only with typescript support.



## Dependencies



- Node > 12

- yarn



## Install

Start to install cli as a globals package on your system. Monorepo is managed by yarn so it is mandatory using yarn as your dependency manager.

Install as:



```

yarn global add @websublime/vtx-cli

```



After this you will have binary vtx available as your cli tool.



## Setup

Vtx cli tool can create, serve and build apps or libs. Run vtx --help for more info on the cli tool. 



```

Usage:

  $ vtx [root]



Commands:

  [root]

  create-workspace

  create-app

  create-lib



For more info, run any command with the `--help` flag:

  $ vtx --help

  $ vtx create-workspace --help

  $ vtx create-app --help

  $ vtx create-lib --help



Options:

  --host [host]           [string] specify hostname

  --port            [number] specify port

  --https                 [boolean] use TLS + HTTP/2

  --open [path]           [boolean | string] open browser on startup

  --cors                  [boolean] enable CORS

  --strictPort            [boolean] exit if specified port is already in use

  --force                 [boolean] force the optimizer to ignore the cache and re-bundle

  -b, --lib          [string] use specified lib to build

  -p, --app          [string] use specified app to run

  -c, --config      [string] use specified config file

  --base            [string] public base path (default: /)

  -l, --logLevel   [string] info | warn | error | silent

  --clearScreen           [boolean] allow/disable clear screen when logging

  -d, --debug [feat]      [string | boolean] show debug logs

  -f, --filter    [string] filter debug logs

  -m, --mode        [string] set env mode

  -h, --help              Display this message

  -v, --version           Display version number

```



### Workspace

Start to create a workspace for your apps. Just run:



```

vtx create-workspace

```



And answer to the questions from the cli to config your workspace.

Vite config produced will have a config to resolve every entry  from your workspace and also will automatic resolve alias for your apps and libs that are created with this tool.



### Vue App

After creating your workspace you are ready to add as many apps as you want. Inside your workspace directory run:



```

vtx create-app

```



And answer the questions to perform your app config. Then perform install.



```

yarn

```



### Lib

Inside your workspace directory run:



```

vtx create-lib

```



### Run

By default your first app will be the default app to serve. If you want to run a different app just define the name the app you want to run.



```

vtx dev --app my-app

```



Or you can adjust your package.json script to run different apps like:



```

"scripts": {

  "dev": "vtx dev --config ./vite.config.js --debug",

  "dev:ready": "vtx dev --config ./vite.config.js --debug --app ready",

  "build": "vtx build",

  "preview": "vtx preview"

}

```



Vtx supports all options from vite-cli plus --app and --lib.



### Build



To build just run:



```

vtx build --app todo

```



For type application will produce dist normally. The particular case goes for lib as:



```

vtx build --lib services

```



When your lib as created, is package.json as config entry for rollupOptions where you can pass vite rollupOtions as vite documentation describe. The lib will be created with the name that to you gave it and get necessary options from workspace package.json.



It is mandatory to indicate which type and name you are building.



### Config



Vtx saves the configuration on root of your workspace in package.json. You can review it there.



```

"config": {

  "packages": {

    "todo": {

      "name": "todo",

      "namespace": "@workspace/todo",

      "dir": "/workspace/vtx/temp/my-awesome/apps/todo",

      "type": "application"

    },

    "services": {

      "name": "services",

      "namespace": "@lib/services",

      "dir": "/workspace/vtx/temp/my-awesome/libs/services",

      "type": "lib"

    }

  },

  "default": "todo",

  "namespace": "@workspace",

  "root": "/workspace/vtx/temp/my-awesome"

}

```



You can then manually perform config on your app to resolve and include a lib. On package.json of your app you can add the lib as dependency:



```

"dependencies": {

  "@lib/services": "^1.0.0"

}

```



And on the tsconfig you can resolve typings and imports:



```

"paths": {

  "@workspace/todo/*": [

    "./src/*"

  ],

  "@lib/services": [

    "../../libs/services/src/index.ts"

  ]

}

```



yarn workspace will resolve your dependency and perform the necessary link to it.



## TODO



More info about the tool



## Publish



- Run yarn changeset on branch

- Request PR