Zephyr Cloud•5mo ago

MFEs working locally but not on Zephyr deployments

I'm building a mfe application using webpack and they work locally but when I deploy to Zephyr they are not working as expected. Repo: https://github.com/KozielGPC/mfe-example-zephyr-cloud When I access the web panel in the host page, my remote apps are showing as 'offline' also Note I also discovered a bug I guess. When I create an app, publish it on Zephyr Cloud and delete the project in Zephyr Cloud, I am not able to deploy it again from CLI. Well, actually I am able to deploy, it returns me a link and I can access it, but it doesn't appears in the Zephyr panel anymore and I'm not able to create a new one and link to it.

GitHub

GitHub - KozielGPC/mfe-example-zephyr-cloud: Integration with Micro...

Integration with MicroFrontend Architeture using Zyphyr Cloud Provider - KozielGPC/mfe-example-zephyr-cloud

36 Replies

Rodrigo Y.•5mo ago

Hey there Marcio! We're going to take a look at this and see if we can replicate it soon. It's possible we're facing some inconsistencies with our soft-deletion process. We do appreciate your feedback and support!

Márcio Gabriel Pereira de CamposOP•5mo ago

hey Rodrigo, thanks for the feedback! Quick question, how does zephyr handles the remote URL? I got confuse by how should I set in my config file. I thought about something like "remoteApp: isDev ? localhost : zephyr-url", but I didn't find a way to set env vars in zephyr panel

Rodrigo Y.•5mo ago

so, currently we're undergoing some changes in terms of remote resolution. we have a new docs page being cooked as we speak and as soon as I get word on it's deployment I can notify you. to give you a little perspective, before this new changes, we were resolving remotes to the latest version available, meaning, it would be the latest URL deployed for that remote. with the new changes you're going to be able to have a little more control over this resolution through package.json specification and versioning as well as through Environment and Tags on our Dashboard (accessible through DevOps page when in a selected Application)

Márcio Gabriel Pereira de CamposOP•5mo ago

I see. Interesting. But how should it be in my config file? I was following the example in docs about webspack and it uses remotes: { "default_webpack_mf_second": "default_webpack_mf_second@[app2Url]/remoteEntry.js", } but in the code there is a line // You can write your own logic here to determine the actual url window.app2Url = ""

Márcio Gabriel Pereira de CamposOP•5mo ago

I added the zephyr app url on it but it doesn't seems to be correct for me, and in the panel it still shows Offline, besides it's working now and showing both apps correctly

Rodrigo Y.•5mo ago

So, Zephyr replaces the URL for the remote at build time. Simply saying that the URL you define on MF configuration gets replaced with Zephyr deployed remotes. Currently you have no control over this URL but as I said above, we have some docs on new fresh implementation of remote resolution specification being deployed today, so as soon as that is available I'll let you know. The offline part I'm not sure what is happening but I'll ask my team to investigate that one as well

Márcio Gabriel Pereira de CamposOP•5mo ago

Ahhhh got it, so it should not be a problem letting it as localhost then because zephyr will replace it

Rodrigo Y.•5mo ago

Precisely

Márcio Gabriel Pereira de CamposOP•5mo ago

sure, thank you! all right, thanks for the support!

Rodrigo Y.•5mo ago

thank you for reporting these!

Márcio Gabriel Pereira de CamposOP•5mo ago

Hmmmm I changed the app2url for testing purposes and it brokes my app. Shouldn't it have replaced with the zephyr url automatically?

MEE6•5mo ago

GG @Márcio Gabriel Pereira de Campos, you just advanced to level 1!

Márcio Gabriel Pereira de CamposOP•5mo ago

or am I missing something here?

Rodrigo Y.•5mo ago

no, you're not so, we're currently undergoing some changes and we apologize for these that you're facing right now. I'm in the process of updating these examples that you are working right now. can I ask you to try the new configuration that will be on our docs soon?

Márcio Gabriel Pereira de CamposOP•5mo ago

yeah, sure. I was about to ask you which one of the examples can be used and is stable at the moment

Rodrigo Y.•5mo ago

update your zephyr plugin to the latest version

pnpm i -D zephyr-webpack-plugin@0.0.51

and then add the following property to the package.json of the host/shell application

  // package.json
  // ...
  "zephyr:dependencies": {
    "default_webpack_mf_second": "zephyr:default_webpack_mf_second@*"
  }

  // package.json
  // ...
  "zephyr:dependencies": {
    "default_webpack_mf_second": "zephyr:default_webpack_mf_second@*"
  }

Márcio Gabriel Pereira de CamposOP•5mo ago

it should be under dependencies key or outside it? Anyway, I tried both and none of them worked 😦

Márcio Gabriel Pereira de CamposOP•5mo ago

btw I got this when tried under dependencies key

Márcio Gabriel Pereira de CamposOP•5mo ago

Rodrigo Y.•5mo ago

can you share the package.json content please?

Márcio Gabriel Pereira de CamposOP•5mo ago

{
  "name": "default_webpack_mf_first",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "external-remotes-plugin": "^1.0.0",
    "react": "catalog:react18",
    "react-dom": "catalog:react18",
    "zephyr:dependencies": {
      "default_webpack_mf_second": "zephyr:default_webpack_mf_second@*"
    }
  },
  "devDependencies": {
    "@babel/core": "catalog:babel",
    "@babel/preset-react": "catalog:babel",
    "babel-loader": "catalog:babel",
    "html-webpack-plugin": "catalog:webpack5",
    "webpack": "catalog:webpack5",
    "webpack-cli": "catalog:webpack5",
    "webpack-dev-server": "catalog:webpack5",
    "zephyr-webpack-plugin": "^0.0.51"
  }
}

{
  "name": "default_webpack_mf_first",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "external-remotes-plugin": "^1.0.0",
    "react": "catalog:react18",
    "react-dom": "catalog:react18",
    "zephyr:dependencies": {
      "default_webpack_mf_second": "zephyr:default_webpack_mf_second@*"
    }
  },
  "devDependencies": {
    "@babel/core": "catalog:babel",
    "@babel/preset-react": "catalog:babel",
    "babel-loader": "catalog:babel",
    "html-webpack-plugin": "catalog:webpack5",
    "webpack": "catalog:webpack5",
    "webpack-cli": "catalog:webpack5",
    "webpack-dev-server": "catalog:webpack5",
    "zephyr-webpack-plugin": "^0.0.51"
  }
}

Rodrigo Y.•5mo ago

alright, its outside of dependencies, root level of the package.json properties

Márcio Gabriel Pereira de CamposOP•5mo ago

I guess it worked now! Yay! btw I got some time accessing an old version and trying to understand why it didn't work 😅

Márcio Gabriel Pereira de CamposOP•5mo ago

thanks again for the support man!

Rodrigo Y.•5mo ago

glad it worked! thank you for reaching out! as soon as that docs page lands I'll let you know here

Márcio Gabriel Pereira de CamposOP•5mo ago

sure, thank you!

Márcio Gabriel Pereira de CamposOP•5mo ago

just pointing that it still shows as offline

Rodrigo Y.•5mo ago

can you try and build the remote one more time? or did you already?

Márcio Gabriel Pereira de CamposOP•5mo ago

I tried again and still not online

Rodrigo Y.•5mo ago

I see, we're going to look into that as well thanks again!

Márcio Gabriel Pereira de CamposOP•5mo ago

thank you!

MEE6•5mo ago

GG @Márcio Gabriel Pereira de Campos, you just advanced to level 2!

Rodrigo Y.•5mo ago

hey @Márcio Gabriel Pereira de Campos its a long read but its there if you want to take a look it has insights on the package.json specification I sent to you earlier https://docs.zephyr-cloud.io/how-to/dependency-management

Márcio Gabriel Pereira de CamposOP•5mo ago

Awesome! I will take a look for sure. After our conversation I did a small project testing some things -> https://github.com/KozielGPC/mfe-setup-zephyr-cloud

GitHub

GitHub - KozielGPC/mfe-setup-zephyr-cloud: Microfrontend Setup usin...

Microfrontend Setup using Zephyr Cloud provider. Contribute to KozielGPC/mfe-setup-zephyr-cloud development by creating an account on GitHub.

Rodrigo Y.•5mo ago

awesome! glad to know things were working out! btw, our QA team already began investigating the issue with your offline remotes and we should reach a resolution next week thank you again for your input

Márcio Gabriel Pereira de CamposOP•5mo ago

nice! I'll keep an eye in these channels. Thanks for the support!

Gaming

Programming

MFEs working locally but not on Zephyr deployments

Did you find this page helpful?