Usage with Vite web app

[ekafyi]

I'd like to share how I run a Vite app in this monorepo. (Yes this repo is called nextjs-monorepo-example 😆 but just in case people want to make quick SPA web apps that don't require Next.js' features...)

Steps:

1. Add a Vite app. I used the default template by running yarn create vite in the apps directory (you may do it in any other directory, ofc).
2. Copy tsconfig.json from existing sample app, eg. https://github.com/belgattitude/nextjs-monorepo-example/blob/main/apps/blog-app/tsconfig.json
   • I modified "baseUrl": "." because eslint complains about vite.config.ts being outside of src. I did not need to modify anything else, but depending on your other configs (the base config, eslint config, your vite project config) you may need to modify other stuff.
   • Alternatively it's probably possible to use the Vite project's tsconfig as it is (again, whether it works or not depends on various configs). If you do this, make sure to add the paths to local dependencies you want to import.
3. Add the local dependency to your Vite project's package.json — see https://github.com/belgattitude/nextjs-monorepo-example/blob/main/apps/blog-app/package.json#L98-L99 for example
   • We can do this from the CLI, yarn workspace my-vite-project add @your-org/ui-lib
4. But wait 🙅🏽‍♀️. Vite import does not automatically read tsconfig paths, we need to tweak the vite.config.ts a little, as discussed in Import module mapping / custom path resolution vitejs/vite#88. I use the solution by kfurles here: Import module mapping / custom path resolution vitejs/vite#88 (comment)
   • You can also install a package https://github.com/aleclarson/vite-tsconfig-paths for the same purpose
5. Import the local components, everything works out of the box including all type definitions ✨

[belgattitude]

Nice sharing, haven't payed with vite yet. But definitely on my list.

I'm busy holidaying for 2 weeks... but I'm not against adding vite here too.

Feel free if want to open a pr totally possible to merge it as an example

Thx