Adobe Commerce Cloud

Adobe Commerce Cloud : how to deploy multiple PWA applications on the same platform?

Par Benjamin V. le 15 April 2022

 3 minutes read

Vous souhaitez lire cet article en français ? cliquez ici

Context

First, let's call our project "TMG" (for Tintin & Milou Group) . It gathers two brands (Tintin and Milou). Each of them has its own products, prices, payments methods, sales periods, etc.
Of course, each brand has its own visual identity. On top of that, both want to benefit from PWA Studio as front office, all hosted on Adobe Commerce Cloud.

 

Architecture

In a typical context, it would have been enough to create 2 websites, and 2 themes based on "blank" (or "Luma", but this is another debate).
Except that here, front office will be PWA applications. Se we will keep the 2 websites and the 2 "classical" themes  (because some of the pages will still remain outside of the PWA application, for example the account part), but will also add PWA Studio applications.

In order to achieve this, we created these two GIT repositories:

First, named backend-tmg, containing the backend part for Adobe Commerce Cloud :

The second, pwa-tmg, intended to host PWA Studio applications, based on this architecture:

Deploy

Site is ready, it "works locally" (yes, we know =D), we now need to deploy it onto Cloud!

Here are the main steps we need to follow to deploy our site:

As you can see, a big part will be done by our continuous integration tool, Jenkins. The other will be done directly by the deploy scripts from Adobe Commerce Cloud (using .magento.app.yaml file)

 

"A bit" of code

Here is how we handle the part "Backend application preparation"

 

About the Jenkins part:

This part, even if in our case specific to Jenkins, can easily be transposed to any other continuous integration tool.

It could be even directly included in the hooks of the file .magento.app.yaml, if Adobe Commerce Cloud would allow the creation of environment-specific variables available at build time.

 

Finally, Adobe Commerce Cloud part, in the file .magento.app.yaml :

 

CAREFUL: the building of the PWA Studio applications making some calls to the backends, you will have to deploy a first time without the PWA part, in order to have the  websites/stores/store views and other configurations created in Adobe Commerce.

 

Finalization

To finish, in our case, the "customer account" part would still be delivered by the "Luma-based" theme, so we added this configuration:

 

In the end, we have 2 websites for backend dans Adobe Commerce Cloud, each using its own PWA Studio app as front office, pretty easy, no?

tags : Adobe Commerce, PWA
LinkedIn Email
A lire également