Extract Auth App

[cillies-finatix]

This is a task from our Board.

Here are some of my notes to this topic:

• For the shared-libraries we need some sort of dependency defined in our package.json
  • It is possible to install a dependency by using a github URL, like npm i -S https://github.com/mandat-project/hackathon-demo.git#market. This issue is, though, that our repository does not include any bundles. Therefore we need to transpile and compile all Vue and Typescript files for all applications that use this dependency.
• The current monorepo structure defines the dependency for vue in the root package.json. This is fine and recommended as long as all the apps should/must use the same vuejs version. For the extraction on the other hand, we need to define all the dependencies again in the corresponding application package.json. This could lead to incompatible versions of our shared-libraries and the applications. The advantage, though, is that we can update each application independently from one another. Furthermore, we could even use Vite for App A and VueCLI for App B or Jest/Vitest or Cypress/Playwright and so on.
• Unittests are not working well, because of the shared-composables. It may get fixed when we have bundles that can be used by Jest without any compilation. Some of the shared-composables are written directly for the browser, that causes some issues when trying to run 'em in a jest environment.

What I tried so far:

Creating a clean application with vite cli

• Generating a complete clean new vuejs application using the vite cli: npm create vite@latest auth-vite.
• Copied all the existing components
• Build failed because on some places we're using "require" directly instead of an "import".
• After some experimental migrations from require to import, it was still failing, so I aborted trying vite-cli any further.

Creating a clean application with vuejs cli

• Generating a complete clean new vuejs application using the vue cli: npx -p @vue/cli vue create auth-clean.
• Copied all the existing components from the auth-app to the newly generated one: cp -r auth/src/ auth-clean/src && cp -r auth/public auth-clean/
• add "resolveJsonModule": true to typescripts compileOptions.
• Build works, but unittests will fail, when the shared-libraries was imported somewhere
• Successfully tested installing a dependency using a github-URL. Downside: A developer has full access to the source-code from this point on. This could lead to deep imports instead of importing the dist-bundles (when we have them).
• Installed root-dependencies to get an independent application: npm i -S @vueuse/components@^11.1.0 @vueuse/core@^11.1.0 axios@^1.7.2 jose@^5.4.0 n3@^1.16.2 primeflex@^3.3.1 primeicons@^6.0.1 primevue@^3.52.0 vue@^3.2.13 vue-i18n@^10.0.4

Still left to do

• refurbish shared-libries so each of them produces a usable dist-bundle that can be imported by any application.
  • typescript files can be compiled easily
  • vue components need more work, I guess
  • for the theme the already generated theme.css file should be enough. In all the application we should only use the css custom properties, no scss-variables.
• fork auth app into a newly created repository (a test-repo) and install the dependencies

[cillies-finatix]

solved in #66