From 04166f1a57013c9eb12cd614efa316fab7d0f54a Mon Sep 17 00:00:00 2001
From: Lydia Pedersen
+Disclaimer: This article has been written with the help of the ModSquad Community. The related live session is available here:
+
+
+Hi, fellow developers! +
++After learning how to create micro frontends with Angular and React, we’re jumping into another world with Vue.js. Remember, we’re trying to create a micro frontend using the web component specifications for each of the following frameworks: Angular, React, and Vue.js. +
++Does Vue provide the best developer experience when creating a micro frontend social card? Let’s try it! +
+ +## Create the Vue.js app + +
+First, ensure that you have installed Node with npm (you can use Yarn instead) and Vue CLI: npm install -g @vue/cli
+
+I suggest using the default option Default ([Vue 3] babel, eslint)
to create the application by running the following command in your target folder: vue create vue-social-card
+
+That should create a folder named vue-social-card
that contains a fresh Vue.js project.
+
+Please note that by default, the application is configured to include certain features, such as npm scripts to start your app and eslint to help you code. +
+ +## Discover your application + +
+Before making any changes and creating a micro frontend, let’s run the application locally using npm run serve
. Your application should then be available at the following URL: http://localhost:8080/.
+
+Vue.js helps you organize your code with components. That means we need to create a file to contain all the card code. You can delete the default file called HelloWorld.vue
.
+
+Once you’ve created a new file named SocialCard.vue
in the components folder, copy the following code into it:
+
+Our component is just a simple piece of HTML/CSS code that requires an entry object named card
and defines the following properties: name
, description
, image
, and image_alt
.
+
+As it is, your application might be broken due to an error in the app.vue
file. It’s time to update it.
+
+The reason your app doesn’t work is that the main component still includes the default component. To fix it, replace the file contents with the following code: +
+ +``` js + + + +
+This imports our social card component, defines a card object shiba_card
in the data()
function to store the different properties, then passes the card object to the social card component in the template
section.
+
+The application is working again and the default Vue landing page is replaced with the Shiba Inu social card: +
+ + + ++However, we only built a classic single page application and need to migrate it to a micro frontend. +
+ +## Define the custom element + + ++In order to reuse this app as a web component, we need to define a custom element, which is a typical step when using Angular and React. +
+
+Replace the contents of the main.js
file with the following:
+
+This code defines the social-card-element
custom element and wraps the Vue app. As we saw before, this app is now rendering the card as expected.
+
+Next, replace <div id="app"></div>
in the public/index.html
file with the custom element:
+
+
+``` js
+
+Congratulations! You have just built a Vue.js micro frontend using a custom element. +
++Please note, as I’m writing this article, there is an issue with styling and custom elements that is discussed in detail here. Please follow this ticket to know when it will be fixed or for current workarounds. +
+ +## Resources + +- The code above is available on GitHub here. + +- Thanks to this repo for the card example. + +- Are you already using Entando and looking for Vue.js components? Take a look at this sample. + +- Watch micro frontend videos on our YouTube channel. + +- Join us on Discord to share and learn about composable apps. + + + diff --git a/vuepress/docs/_posts/2022-06-15-what-is-the-hub.md b/vuepress/docs/_posts/2022-06-15-what-is-the-hub.md new file mode 100644 index 0000000000..c7c06dfe87 --- /dev/null +++ b/vuepress/docs/_posts/2022-06-15-what-is-the-hub.md @@ -0,0 +1,89 @@ +--- +author: Sohini Pattanayak +date: 2022-06-15 +summary: This is a mini-tutorial to help you understand what the Entando Hub is. It is a repository (local, remote, public, or private) that contains components. Not only that, it has several capabilities and features. To explore all of that, this blog is definitely a must-read! +tags: +- Blog +- Product / Support +- Components / Hub +title: What is the Entando Hub? +--- + +What do you imagine when someone says hub?
+ +It's a center or place to hold a collection of things or several kinds of things. An Entando Hub is a repository (local, remote, public, or private) that contains components. To be more specific, the App Builder, which is the UI of the Entando Platform, can connect to one or more Entando Hubs.
+ +In my recent blog on the Entando 7.0 release, I wrote a bit about the Entando Hub. You can check that out here. But, in this blog, I'll give a technical overview of the hub.
+ +Before I start, let's find out why we needed a hub.
+ +In previous blogs, we learned about the 4Cs. If you don't know about that, you can take a look at this blog. From the 4 essential roles of application composition, one thing is clear: the set of components built by Creators are reusable and flexible. But, to make them easy to reuse, there was a need to create a hub, where they could reside and be available to a larger audience.
+ +Now, the question is, what are some of the capabilities of the hub?
+ +The hub lets you share single components, component collections, solution templates, and packaged business capabilities (PBCs) that Creators build.
+ + + +A single components is a building block for apps. It can be a page template, content template, micro frontend, microservice, UX Fragment, or content type.…
+ + + +Component collections are a packaged set of single components. They are assembled components that are in some way functionally unrelated but useful to a Composer (e.g. a set of Page Templates, a set of content templates or content types plus widgets and MFE, or a mix of these).
+ + + +Solution templates are a pre-packaged set of PBCs, component collections, and single components providing full-featured, domain-specific solutions (e.g. Task Tracker, Supplier Portal, Customer Portal, Partner Portal, E-commerce, etc.).
+ + + +PBCs are encapsulated software components that represent a well-defined business capability, recognizable as such by a business user, and packaged for programmatic access.
+ + + +Any and all of these can be assembled in the hub, where new items and new versions are continuously made available. But to avoid errors or issues, we should follow some best practices:
+ +Now, it's time we take a look at the Entando Hub.
+ + + +As you see here, there are many single components, component collections, solution templates, and PBCs under “Catalog”. After the Curator performs the validation checks, these building blocks made by Creators are published in the hub.
+ +How can we use the hub?
+ +This hub can be used with Entando 7.0. This documentation can help us get started, but in the upcoming blogs, I'll definitely share how it can be installed in our App Builder.
+ +Is the hub open source?
+ +The Entando Hub is under the LGPL-3.0 license and is open source. We can easily contribute to it by referring to this repository.
+ +Lastly, before we wrap up, I'd like to explain the Entando Cloud Hub.
+ +The Entando Cloud Hub is a SaaS instance of an Entando Hub that contains a public and private collection of components.
+ +Well, that's all about the hub for now. We are in the process of creating more tutorials around the hub and those will be released over the next few weeks.
+ +But, for now, I would love to see you all try out the hub for yourselves and send in your feedback using the comment section below!
+ + + +Lastly, we at Entando are building an exciting community that spreads awareness of composability and modular applications. We call it the Modular Squad, and we'd love to invite you to join us and be part of this journey!
+ +Thank you!
+ +Opzlw`8*DC+i`8X%rrsS-$Fg=)>O8hM{)yrhE!8oac4=@G4o>?Qd;1G
z0@cwL9wom=v$bwYOg+FA=k>@ND>)K7 tz-LqamjsbOV`mm1BNBb2Df5%
zJ#0dJEo=k^_JWZjK$+Rc>KO=xSIB*lEc~Pi-newRgu#%A5R^-hS~Gwd)ZIu8gYJ9)
zgR=-Ls2GZ5msRQxE!DV`paaE{?F4q=V_ldAu9{i3ct76N3CQ4vXk0Ea!;_K74N4VO
zIL1c 6ZQ<8E!&pA53ct;pwR5%Nz`Da>{l5+32TV2=l=hYb)tgP;Y
zK*#}MRrFrM^$eO}A8Ol)&s*lZ022tjFlXs(9@VV{$arQL!|rM92@>I+;Q#uZWOw;N
zt>sRSD~cVm
z3Z+HW;Hi9wqMH;8rky))?I_8mfI#@`$F|haz0ft`ye7{3!+aujJ*P|YdFgo(wds2J
zF6vqh9_5x-wr|d}bMymWLsxPQzX*cvc-+Pwn+!CDcipu_P+R~@r{ZQfgx
zo~?WNKAL
0YB5;!YMX@#e6hmxs)#p&tUq;j=;
z4B>7z?+cH;O1=W~T;P9t@R3-<@rb(9p=0`I3~FYDZW7bAkWsjF(OPTR=h>~P9sx
znwRgArgIP8`;#Dcl^mLoCQ$@hvIy9RnlLiz$q>bNddsBMQ3qbW{`esu$@=O5u0u?x
zUro~%gwy>p&K(jS?9@d)Dvvkvn=0eh@qz5$A4Ix?L@@IOY9xIvIxq<1^jq?yK*#00
zhDoZX!JD4nVJDrV*kby&L0~a(g{t5C@j`}%XH*)c{Z->9X$B`>VZP(D8f>o|*Gy#+
z$jS;15Tusj(i3UGdF}X}Xo|TNEW^F*&uhQ$uvLA!48Df0t#@BD!Md)QoUwx&%@A8h
zJUKdk0l+58uZR|pz&B0A&S4eh6a6d)J`
*SLZ
zOi;Qi)$`+ARf}Hy*iZa4vs%J*!h`i|P#2liL+^R;cBB>;Jxz@()PbH{)rZv0%No_1
zDn6I<)hf>7#yDp7$Vo~sD
{5R!@2j*XwC99*MedQtPZ)+uao)2kTEs4
z6?l1%rU`!lJ5Z+h5?la=!v|?HF}NJZ>gK~Uh$S2%HV?POyNG+;3)qSA7%`E5|1s!^
z`tOR-_Hcz9ngSZKZ$Cg)fRse2?GRyG-8#K{Fq6}*YK=QXKNSKGow`$$l~5BoAOT_%
z5ax`G$f?q~?q~7v^TC7blA@tKCcFn9KD<-`!g4N=JW=_B9?zXvKa{^+f>CVzZn~z(
z`oj|yB?We*?n0(HEa2TOpstS2gFLg&Wx02}Z-4B*+2Cgw=?M`b20<=aQcgmx0kq}^
z$T=82&|)4Z`ZBcTUvN$%lF)+)a{uUQGXk&0)Bv0>l~BS;`%44&i|e!EYsN$N>Z6hQ
zV8cbQT-Ejus )a#)3BYi@S0ntN6nRUO%axS#fkPdXQpx
z?C8+8d@FZM`>#!byP?3k!G7@xvf^S1oV-}!Mev-%TrBYFxD(sj&a#Y1lD&3+g4=|8
zlu>WHgj1mZm7slzV3;3SJ^P6yJ8{UXoky}35N;am1@3_VqGKjncm3hf#IiKV>c2V$
zpE