Excited to see some Vue!!! How do you handle the hardcoded “localhost” urls for production? The latest Vue-cli scaffolding has .env files where you can configure your environments so you don’t have to hard code urls like localhost. But I don’t believe you can use those environment variables in the webpack config. It also looks like you aren’t using vue-cli to scaffold your app, so how would you build this app so you could deploy to production without having to modify those hard coded “localhost” urls?
Also just to answer, yes in fact you can use env in webpack. But if for some reason you can't, you can always get the dotenv plugin or simply create your own code to do it. But you can also create a config.js file instead and put in your important global variables in a module. Either way, I'd make sure you have just one class for each service you make calls to (then inherit or dependency inject it into whatever local api class you make for your features basically just make sure that your services aren't heavily coupled in case you need to switch them out.
very cool tech like you say, this is a step up from world. In a way this approach has much more potential to be used for good & cooporation since it requires both parties implementing a common build process; rather than say, throwing some sketchy thing onto your site with no defined way to share info +1 for vue3 too great videos
Firstly, forgive my English, I'm Brazilian and I don't know the line. Would it be possible to demonstrate how we would upload a CI/CD with micro-front-end? I mean, make a build for a server like "vercel" for example where the two front-ends talk to each other... I would be very grateful!
very cool!what would you do if the consumer doesn't know anything about how many micro-frontends are available and where they can be found?it would be nice to see how to handle this, when you have to discover the remotes during runtime.Thank you
@@jherr I was thinking to a situation when the host doesn't know about the micro frontends location upfront; instead this info being provided at runtime with a lookup service or smth
@@nicolp7748 oh, you can do an asynchronous load of the remote entry and get called back after that completes so you can subsequently asynchronously load the individual remote modules.
@@nicolp7748 I wish I could but I've got a long backlog of video content to get through and I'm not getting a lot of requests for the intersection of Vue and Module Federation. I would recommend reading up on asynchronously loading components in Vue. For example; vuejs.org/v2/guide/components-dynamic-async.html . This should work find in Module Federation with the import coming from a remote instead of an NPM library.
@@pratikwadekar4981 Either that or use a store that you import from NPM and build time but add to your shared dependencies in Module Federation in singleton mode so that Webpack knows to use the exact same module at runtime.
Just a quick question. Is there any way to have the type definition to be exposed by the 'growlers' project ? Defining the types in the consuming app prevents any compilation error in it, and in the case of different teams working each on a remote this could be problematic, as API changes in the store could go unnoticed.
The type definitions can't ride along with the compiled code. But honestly that wouldn't work either because your loading the code at runtime. My recommendation for Typescript for MF is for both the host and remote application to bring in an npm package (most likely a private one) that has the "contract" for the MFE. And then the host application knows what to expect from the MFE, and the remote knows what contract to comply with for the exposed code.
Hey Jack, great content as usual! I am very familiar with using frameworks like single SPA. Is there a way that when you run a production build without web pack dev server, it will automatically output a static remote entry.JS file? This way, when you upload your code to the cdn , it will automatically have a static asset for you?
Yep. You just need to change the `webpack.config.js` to be a function that sets the `outputPath` based on the `mode` provided to the function. In development mode set it to `localhost` and in production mode set it to your asset CDN url.
Bro I have a question, on your store.ts file, in line 46: " store.filteredTaps = filter();" What is that line suppose to mean? If you call store.filteredTaps, will it run the filter function?
So after we set `alcoholLimit` then we need to re-run the filter to apply that setting and to get back the list of beverages that match that filter settings. So that's why we call `filter()` there.
@@jherr ah yes I forgot webpack has two config for different environment. still, it means that in production build we need to store those "fragment js script" somewhere then? and also we need to make sure it exists otherwise any frontend that refers to it wouldn't have succesful build. edit: I like your video on this. sonfar the most detailed example in youtube. cheers.
@@glowiever This should help you. th-cam.com/video/MU8_LP8R_ZI/w-d-xo.html You can do all the work in a single webpack.config.js file. Federated Modules are just JS files, so they should be deployed to an asset store like S3. In which case it's unlikely that they shouldn't disappear.
Nice video! But why if you update the data into the hv-taplist.json file , is not automatically updating into the page?How can you do this without refreshing the page?Thanks!
I think yes. I mean how could you connect for example the Taps list component (in the consumer application) with its data source (in this case the json file, which is in the growlers app), so that updating the file with new beverages will also live update the Taps component on the external consumer app?
@@veronicab2937 Ah, ok. If that's for consumers then it's not hot reloading, which is a development feature. For live updating you will want some type of websocket connection. You could go with GraphQL subscriptions on something like AWS Amplify, or use Google's Firestore, which also has live updating on a data store change through websockets.
At this point you are my favorite content creator by far. Thanks for your awesome work! Best voice aswell!
2023 update: Valley Growlers is now Valley Public House. Oh, and they're still using an Iframe...
Hahah! And if you know that much we should meet up for beers or coffees. :)
Excited to see some Vue!!!
How do you handle the hardcoded “localhost” urls for production?
The latest Vue-cli scaffolding has .env files where you can configure your environments so you don’t have to hard code urls like localhost. But I don’t believe you can use those environment variables in the webpack config.
It also looks like you aren’t using vue-cli to scaffold your app, so how would you build this app so you could deploy to production without having to modify those hard coded “localhost” urls?
Lol I love that he actually loved your comment but never answered it
Also just to answer, yes in fact you can use env in webpack. But if for some reason you can't, you can always get the dotenv plugin or simply create your own code to do it.
But you can also create a config.js file instead and put in your important global variables in a module.
Either way, I'd make sure you have just one class for each service you make calls to (then inherit or dependency inject it into whatever local api class you make for your features basically just make sure that your services aren't heavily coupled in case you need to switch them out.
Thank you for this, Jack! Super clear! Off topic question: which VSCode theme are you using?
very cool tech
like you say, this is a step up from world. In a way this approach has much more potential to be used for good & cooporation since it requires both parties implementing a common build process; rather than say, throwing some sketchy thing onto your site with no defined way to share info
+1 for vue3 too
great videos
Dude, You always have such pleasant scenic backgrounds. Where do you live? 😃
Portland Oregon
Firstly, forgive my English, I'm Brazilian and I don't know the line.
Would it be possible to demonstrate how we would upload a CI/CD with micro-front-end?
I mean, make a build for a server like "vercel" for example where the two front-ends talk to each other... I would be very grateful!
Appreciate it. This video is truly useful. Thanks for sharing!
hello, how to create this project scratch from by ourself? what is commands to create it from zero? thank you.
very cool!what would you do if the consumer doesn't know anything about how many micro-frontends are available and where they can be found?it would be nice to see how to handle this, when you have to discover the remotes during runtime.Thank you
You could do something with Storybook. They've recently done Webpack 5 integrations. Is that the kind of discoverability you are interested in?
@@jherr I was thinking to a situation when the host doesn't know about the micro frontends location upfront; instead this info being provided at runtime with a lookup service or smth
@@nicolp7748 oh, you can do an asynchronous load of the remote entry and get called back after that completes so you can subsequently asynchronously load the individual remote modules.
@@jherrcould you help with an example using vue ? Thanks, and great videos!
@@nicolp7748 I wish I could but I've got a long backlog of video content to get through and I'm not getting a lot of requests for the intersection of Vue and Module Federation. I would recommend reading up on asynchronously loading components in Vue. For example; vuejs.org/v2/guide/components-dynamic-async.html . This should work find in Module Federation with the import coming from a remote instead of an NPM library.
your videos and explanations are pretty cool, thank you, you makes it easier for beginners on these subjects, like me
Thank you.
Great video sir❤
This is incredible, thanks!
That was awesome, Thanks, man.
Hi Jack, we use Vue.js at my workplace. Does your book (or will it) have examples and how-to for Vue? Thanks!
Sorry it does not. ;( I am a big Vue fan though.
@@jherr I'm still really enjoying the rest of your videos, and subscribed. Thanks for the great content!
@@mikestu7 You're welcome!
How do I make the host app communicate with the mfe's ? Or even two different mfe's interact with each other ?
You can use a shared store for that.
@@jherr So I need to expose this shared store through module federation ?
@@pratikwadekar4981 Either that or use a store that you import from NPM and build time but add to your shared dependencies in Module Federation in singleton mode so that Webpack knows to use the exact same module at runtime.
You always make such awesome content! Thanks
Just a quick question. Is there any way to have the type definition to be exposed by the 'growlers' project ? Defining the types in the consuming app prevents any compilation error in it, and in the case of different teams working each on a remote this could be problematic, as API changes in the store could go unnoticed.
The type definitions can't ride along with the compiled code. But honestly that wouldn't work either because your loading the code at runtime. My recommendation for Typescript for MF is for both the host and remote application to bring in an npm package (most likely a private one) that has the "contract" for the MFE. And then the host application knows what to expect from the MFE, and the remote knows what contract to comply with for the exposed code.
Hey Jack, great content as usual! I am very familiar with using frameworks like single SPA. Is there a way that when you run a production build without web pack dev server, it will automatically output a static remote entry.JS file? This way, when you upload your code to the cdn , it will automatically have a static asset for you?
Yep. You just need to change the `webpack.config.js` to be a function that sets the `outputPath` based on the `mode` provided to the function. In development mode set it to `localhost` and in production mode set it to your asset CDN url.
@@jherr Awesome, that makes sense. I figured that was the best way to do it but I just wanted to make sure. Thank you for sharing
Bro I have a question, on your store.ts file, in line 46:
" store.filteredTaps = filter();"
What is that line suppose to mean? If you call store.filteredTaps, will it run the filter function?
So after we set `alcoholLimit` then we need to re-run the filter to apply that setting and to get back the list of beverages that match that filter settings. So that's why we call `filter()` there.
@@jherr Thank you senpai, now I get it
I still don't get how to do it in production. Do we point the address to the dev server or the production server?
No. You change the URLs in the webpack configuration based on the mode.
@@jherr ah yes I forgot webpack has two config for different environment. still, it means that in production build we need to store those "fragment js script" somewhere then? and also we need to make sure it exists otherwise any frontend that refers to it wouldn't have succesful build.
edit: I like your video on this. sonfar the most detailed example in youtube. cheers.
@@glowiever This should help you. th-cam.com/video/MU8_LP8R_ZI/w-d-xo.html You can do all the work in a single webpack.config.js file.
Federated Modules are just JS files, so they should be deployed to an asset store like S3. In which case it's unlikely that they shouldn't disappear.
Nice video! But why if you update the data into the hv-taplist.json file , is not automatically updating into the page?How can you do this without refreshing the page?Thanks!
You mean like hot reloading?
I think yes. I mean how could you connect for example the Taps list component (in the consumer application) with its data source (in this case the json file, which is in the growlers app), so that updating the file with new beverages will also live update the Taps component on the external consumer app?
@@veronicab2937 Ah, ok. If that's for consumers then it's not hot reloading, which is a development feature. For live updating you will want some type of websocket connection. You could go with GraphQL subscriptions on something like AWS Amplify, or use Google's Firestore, which also has live updating on a data store change through websockets.
Thanks for your fast answer! :)
Nice one, thanks!
Nice!