[Luigi Container] Context not received on Azure deploy

[BossHogg97]

Hi, i'm working in container mode with Vue3 framework.

Inside client app i have the following code inside main.ts for receive context from Core App.

import LuigiClient from '@luigi-project/client'
....
LuigiClient.addContextUpdateListener((context) => {
  // Load context inside pinia Store
  plantId.value = context.plantId
  token.value = context.token
})

During local development all working fine but when i deploy my code on Azure it seems that contextUpdateListener is not able to receive the data from Core app. I also tried to use LuigiClient.getContext() method and i have the same situation. On local is working and on Azure the object is empty.

Following the code of Core App

<script setup lang="ts">
  import '@luigi-project/container'

  // Define variable for get component ref
  const luigiContainerRef = ref(null)

 const contextObj = {
        plantId: plantId.value,
        token: token.value,
      }

const contextJson = JSON.stringify(contextObj)
</script>
<template>
  <div class="mfe-container">
    <n-card :content-style="{ padding: 0 }" class="h-full" id="col1">
      <luigi-container ref="luigiContainerRef" :viewURL="props.url" :context="contextJson" />
    </n-card>
  </div>
</template>

I implemented the code like @ndricimrr told me in the discussion #3588
Any helps? Thanks

[ndricimrr]

Hi @BossHogg97 ,
The deployment strategy or place shouldn't have any effect on the functionality. Could you provide some more context into the situation, so we can troubleshoot.

1. What kind of web server are you using in the Azure Deployment, and is that the same as in the local web server. I can suspect that some missing configurations on one side could cause an issue, if something is missing.
2. Not an expert with VueJS , but what kind of rendering are you using, server-side/client-side
3. Do you get any console errors/warnings.
4. Maybe the most important question. How are you hosting your Core-App and Client App. Are they under the same domain. How does the Core App URL compare to the Client App url ("props.url" from your example). Note that you need to set specific CSP policies to allow communication with microfrontend if they are not in the same domain.

[BossHogg97]

Hi. I'll try to answer all points.

1. I use NGINX as web server
2. I'm rendering client side
3. I don't have any warning or error
4. Core and Client App are on the same domain.

I made a step ahead. The problem is also on dev environment (localhost) when i build the client app (via Vite)

[ndricimrr]

Hi,
How are you enabling custom element usage on your Vue project. Which version of Vue are you using, so I can try if I can reproduce it

[BossHogg97]

Inside vite.config.ts i set this parameters for treat luigi-container as custom component:

plugins: [
      vue({
        template: {
          compilerOptions: {
            // treat all tags with a [luigi...] as custom component
            isCustomElement: (tag) => tag.includes('luigi'),
          },
        },
      }),

And the current version is the following "vue": "^3.3.9",

Thanks

[BossHogg97]

Hi @ndricimrr after several test i discovered that in develop mode the client is initialized correctly insted when i build the Client app and i run the preview the Client is not initialized.

Following the code inside the main.ts of Core App

import LuigiClient from '@luigi-project/client'

console.log('Client initialized : ', LuigiClient.isLuigiClientInitialized()) // This return false on build mode

I also tried to manually init Luigi but nothing change.

if (LuigiClient.isLuigiClientInitialized() === false) {
  console.log('Init the client here')
  LuigiClient.luigiClientInit()
}

I also added the defer-luigi-init to tag of index.html

I started with the code below from your repo

 /**
   * Starts the handshake with Luigi Core and thereafter results in initialization of Luigi Client. It is always ran by default when importing the Luigi Client package in your micro frontend. Note that when using `defer-luigi-init` to defer default initialization, you will need to initialize the handshake using this function manually wherever needed.
   * @since 1.12.0
   * @memberof Lifecycle
   * @example
   * LuigiClient.luigiClientInit()
   */
  luigiClientInit() {
    if (this.luigiInitialized) {
      console.warn('Luigi Client has been already initialized');
      return;
    }

I don't know if the problem of no context in BUILDED mode depend by the Client not initialized.

Thanks

[BossHogg97]

Hi, i solved the problem of build mode of Client App (or on Azure environment). It's seems that Client app is too fast and try to use context data before it's available.

I used a Timeout inside main.ts of Client app. And a watch function that detect the context update on Client.

Following main.ts

setTimeout(() => {
  LuigiClient.addContextUpdateListener((context: LuigiClient.Context) => {
    plantId.value = context.plantId
    token.value = context.token
    productionId.value = context.productionId

    keycloak.token = mfeStore.token

    isContextLoaded.value = true
  })
}, 500)

Following the watch function inside startup component:

watch(isContextLoaded, async () => {
    if (isContextLoaded.value) {
      console.log('Context is loaded. I can start loading data')

     // Here start operations with context data
    }
  })

I'd like to thanks once again for you support @ndricimrr

[ndricimrr]

Hi @BossHogg97 ,
Glad that was helpful. This is an interesting scenario so I would move this to the discussion section as it might be easier for other people to find it there if they have similar issues.