Friday, April 29, 2022

Setup Magento PWA Studio in Windows

 The Magento PWA Studio project is a set of developer tools that allow for developing, deploying, and maintaining a PWA storefront on top of Magento 2.3 and above. It uses modern tools and libraries to create a build system and framework that adheres to the Magento principle of extensibility.

In my earlier post explained how to set up the latest Magento open-source platform on the windows system — refer to https://medium.com/tech-learnings/aem-and-magento-integration-using-commerce-integration-framework-cif-local-setup-part1-4af11b9f92ef for more details.

In this post, let us see how to set up Magento PWA Studio local and enable the venia demo store by integrating with the Magento backend server.

Setup PWA Studio Project:

As a first step, clone https://github.com/magento/pwa-studio.git to your local system.

git clone https://github.com/magento/pwa-studio.git

Check the version compatibility between PWA studio and Magento backend -https://developer.adobe.com/commerce/pwa-studio/integrations/adobe-commerce/version-compatibility/.

PWA studio version 12.4.0 is compatible with the 2.4.4 Magento version(current latest version I have installed)

Check out the compatible PWA studio version, and run the below command from your pwa-studio root folder(this folder got created while cloning the PWA Studio repository).

git checkout v12.4.0

The PWA Studio is not entirely compatible with the windows systems; I am using WSL2(Windows Sub System for Linux 2) on windows to install the PWA Studio. Refer to https://youtu.be/VR73w1zj_a4 for more details on setting WSL2 on the windows system.

Ensure Node 10.x version is installed ( I had version v14.15.4)

Install Yarn —you can install through npm quickly npm install --global yarn

Now, cd to the pwa-studio folder through WSL and execute the below command.

yarn install

Once the installation is completed, enable the below properties into the packages/venia-concept/.env file.

MAGENTO_BACKEND_URL=http://albin.magento.com/ (I have enabled custom domain for accessing Magento backend)
MAGENTO_BACKEND_EDITION=MOS (Backend type MOS - Magento opensource, AC - Adobe Commerce)
CHECKOUT_BRAINTREE_TOKEN=sandbox_tvnvgn3c_p5hgmyvjzc5y8ybq

The CHECKOUT_BRAINTREE_TOKEN can be created by signing up at https://sandbox.braintreegateway.com/.

Login to https://sandbox.braintreegateway.com/, and click on Settings →API.

Generate New Tokenization Key

Generate SSL Certificate:

Generate SSL certificate because PWA features require an HTTPS Secure Domain.

From the root directory of PWA (/pwa-studio), run the below command through WSL:

export MAGENTO_BACKEND_URL=http://albin.magento.com/export CHECKOUT_BRAINTREE_TOKEN=sandbox_tvnvgn3c_p5hgmyvjzc5y8ybqexport MAGENTO_BACKEND_EDITION=MOS

Execute the below command pwa-studio root folder

yarn buildpack create-custom-origin packages/venia-concept

The certificate is stored in /usr/local/share/ca-certificates/devcert.crt, delete the crt file and re-execute if it fails.

Host Entry for Magento backend URL:

In my previous blog, I pointed the Magento domain(albin.magento.com) to 127.0.0.1; this will create issues while PWA Studio running on WSL tries to access the Magento backend from the Windows system.

Modify the windows host file( C:\Windows\System32\drivers\etc\hosts) to point the backend domain to the IP address of the windows machine;

190.0.8.9 albin.magento.com

Configure Metapackage on Magento Backend :

PWA Studio uses metapackages to extend Magento Open Source backends with new features and sample data. PWA Studio release 12.1.0 or higher requires the Open Source metapackage to be installed into PWA projects — even if your backend is Adobe Commerce.

To install metapackages, follow the below steps (refer to https://developer.adobe.com/commerce/pwa-studio/metapackages/open-source/ for more details) — I am executing all these commands through the windows command prompt as my Magento server installed in windows system.

Clone the magento2-pwa repository into your vendor directory

Cd to Magento vendor folder e.g C:\xampp\htdocs\magento\vendor

Execute git clone https://github.com/magento/magento2-pwa.git ext/magento/magento2-pwa

Now cd to Magento root folder, e.g., C:\xampp\htdocs\magento, and execute the below commands

#Install PWA extensioncomposer config minimum-stability dev
composer config repositories.ext path “C:/xampp/htdocs/magento/vendor/ext/*/*/*”
composer require magento/pwa
#Enable Required Modulesphp bin/magento module:enable Magento_NewsletterGraphQlPwa
php bin/magento module:enable Magento_EavGraphQlAux
php bin/magento module:enable Magento_CatalogGraphQlAux
php bin/magento module:enable Magento_WeeeGraphQlAux
php bin/magento module:enable Magento_ContactGraphQlPwa
php bin/magento module:enable Magento_QuoteGraphQlPwa
php bin/magento module:enable Magento_ReCaptchaGraphQlPwa
php bin/magento module:enable Magento_ReCaptchaPwa
#Upgradephp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

UPWARD JS Path Configuration:

An UPWARD server sits between a PWA Studio storefront and its resources, such as an Adobe Commerce or Magento Open Source application.

Under pwa-studio, packages/venia-concept/.env file configure the upward js path as dist/upward.yml

UPWARD_JS_UPWARD_PATH=dist/upward.yml

if the configuration is not enabled, You may see a broken site experience and the below error message in the browser console.

[GraphQL error]: Message: Error: Context value ‘veniaResponse’ not defined in {
status: ‘veniaResponse.status’,
headers: ‘veniaResponse.headers’,
body: ‘veniaResponse.body’
}.

Build Project:

As a next step build the project, execute the below command from the pwa-studio root folder through WSL

yarn run build

Configure Payment Method in Magento:

Log in to the Magento admin console, e.g., http://albin.magento.com/admin

Navigate to Stores →Configuration →Sales →Payment Methods →Braintree

Click on Configure

Select —

Environment as Sandbox

Payment Action as Authorize

Copy the Sandbox Merchant Id, public key, and private key from https://sandbox.braintreegateway.com/ API settings.

After enabling all the configurations, click on Validate Credentials to ensure the details are valid.

Sample card details to test the payment

Visa: 4111 1111 1111 1111For expiry dates, use a valid month and a day within the next 180 years. 22/2222 does not work!

Start the Project:

execute the below command from the pwa-studio root folder through WSL

yarn run watch:venia

Now the storefront is started through the custom domain.

The domain will not be accessible by default from the windows system. To make it work, add the below host entry into the windows system(C:\Windows\System32\drivers\etc\hosts) for the test domain created e.g

127.0.0.1 magento-venia-concept-hn8s4.local.pwadev

Now the storefront is accessible through the test domain, e.g., https://magento-venia-concept-hn8s4.local.pwadev:8152/.

Add a product to the cart and perform the checkout.

You can use the graphql paly ground enabled as part of the project, e.g., https://magento-venia-concept-hn8s4.local.pwadev:8152/graphiql, to test the graphql queries.

The PWA Studio can be run even though docker-compose; let us see the details on using docker-compose to run the PWA Studio in the windows system.

Sunday, April 24, 2022

AEM and Magento Integration Using Commerce Integration Framework(CIF) — Local Setup (Part1)

 The AEM and Magento are integrated using the Commerce Integration Framework (CIF); the CIF framework enables AEM to access magneto commerce instances through GraphQL API.

In this post series, let us see how to set up local Magento and AEM platforms and enable the CIF framework in AEM to integrate with Magento to build the storefront in AEM.

Let us start with setting up a local Magento instance.

I am going to use XAMPP on windows to enable the Magento servers.

Install Elastic search:

The latest Magento version requires Elasticsearch or OpenSearch for indexing but not support MySQL indexing.

Installed elastic search 7.17.3, https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.17.3-windows-x86_64.zip

You will see the below screen on successful installation

Download and Install XAMPP:

As a first step, download and install the XAMPP server, including Apache, PHP, MySQL, and PHP admin.

Now you should be able to manage the Apache and MySQL servers through the XAMPP control panel.

Start MySQL and Apache servers

Install Composer:

Install composer — A Dependency Manager for PHP, downloaded the latest version(v2.3.5) from https://getcomposer.org/download/.

Select PHP under XAMPP

Change the MySQL admin password:

Click on Shell in the XAMPP control panel

Execute mysqladmin -u root password — Enter the admin password

Add the new password to the config.inc.php file for auto-login

Create a Magento database:

Create a new database(e.g., magento2) for Magento, login to http://localhost/phpmyadmin/

Enable Required Extensions:

Enable the below extensions on the php.ini file (to enable removing the semicolon from the extension)

extension=gd
extension=intl
extension=soap
extension=sockets
extension=sodium
extension=xsl

Enable VirtualHost for the Magento Pub folder:

Enable the below virtual hosts to C:\xampp\apache\conf\extra\httpd-vhosts.conf (change the server name accordingly)

<VirtualHost *:80>
DocumentRoot “C:/xampp/htdocs/magento/pub”
ServerName albin.magento.com
</VirtualHost>
<VirtualHost *:80>
DocumentRoot “C:/xampp/htdocs”
ServerName localhost
</VirtualHost>

Add the below entry to C:\Windows\System32\drivers\etc\hosts file to support the local domain, e.g., albin.magento.com

127.0.0.1 albin.magento.com

Download Magento:

Download Magento( v 2.4.4) within Apache htdocs folder

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition:2.4.4 C:\xampp\htdocs\magento

On completion, this will download Magento into C:\xampp\htdocs\magento directory

Setup authentication for Magento repo:

We should enable the Magento repository authentication before downloading the Magento software.

Create a file with the name auth.json under C:\xampp\htdocs\magento and add the below content

{
“bitbucket-oauth”: {},
“github-oauth”: {},
“gitlab-oauth”: {},
“gitlab-token”: {},
“http-basic”: {
“repo.magento.com”: {
“username”: “<public-key>”,
“password”: “<private-key>”
}
},
“bearer”: {}
}

To generate the keys, login to https://marketplace.magento.com/ (register for an account if not already)

Create A New Access Key — Enter a name, and copy the generated private and public keys.

Install Magento:

Execute the below command from the magneto root folder C:\xampp\htdocs\magento change the DB name, password, and base URL accordingly)

php bin/magento setup:install --base-url="http://albin.magento.com/" --db-host="localhost" --db-name="magento2" --db-user="root" --db-password="magento" --admin-firstname="admin" --admin-lastname="admin" --admin-email="[email protected]" --admin-user="admin" --admin-password="Admin123!" --language="en_US" --currency="USD" --timezone="America/Chicago" --use-rewrites="1" --backend-frontname="admin" --search-engine=elasticsearch7 --elasticsearch-host="localhost" --elasticsearch-port=9200

You may encounter the below issue during the installation

To resolve the issue, replace validateURLScheme function in C:\xampp\htdocs\magento\vendor\magento\framework\Image\Adapter\Gd2.php file with the below one

private function validateURLScheme(string $filename) : bool
{
$allowed_schemes = [‘ftp’, ‘ftps’, ‘http’, ‘https’];
$url = parse_url($filename);
if ($url && isset($url[‘scheme’]) && !in_array($url[‘scheme’], $allowed_schemes)
&& !file_exists($filename)) {
return false;
}
return true;
}

Rerun the install command — you will see the “Magento installation complete” message.

Restart the Apache server through the XAMPP control panel and access the storefront → albin.magento.com

You may see the below broken experience

To fix that

Go to: C:\xampp\htdocs\magento\vendor\magento\framework\View\Element\Template\File\Validator.phpReplace — $realPath = $this->fileDriver->getRealPath($path);with the below code and save the file$realPath = str_replace(‘\\’, ‘/’, $this->fileDriver->getRealPath($path));

Go to C:\xampp\htdocs\magento\app\etc\di.xml
Replace Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink with Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

Execute the below commands

php bin/magento indexer:reindex
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Install sample data:

Install the latest sample data — Execute the below commands

php bin/magento sampledata:deploy
php bin/magento indexer:reindex
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Now access the storefront URL and admin console

http://albin.magento.com

http://albin.magento.com/admin (admin/<password specified while installation)

You may receive the below exception while accessing the admin console

To fix the issue, disable the Two factor authentication

php bin/magento module:disable Magento_TwoFactorAuth

You can now add products to your cart and checkout.

Track order from admin console — http://albin.magento.com/admin

Sales →Orders

GraphQL API:

The Magento data is also accessible through GraphQL API to enable the headless ecommerce experiences — the URL to access the GraphQL endpoint is http://albin.magento.com/graphql

e.g., API to fetch specific product SKU data

{
storeConfig {
store_code
store_name
is_default_store
store_group_code
is_default_store_group
locale
base_currency_code
default_display_currency_code
timezone
weight_unit
base_url
base_link_url
base_static_url
base_media_url
secure_base_url
secure_base_link_url
secure_base_static_url
secure_base_media_url
}
}

I am using the Altair GraphQL Chrome plugin to test the API(use any GraphQL client.

The Local Magento platform is ready to support the headless eCommerce experience from the AEM storefront; in the next post, let us see how to enable the AEM CIF framework to build the headless eCommerce experience between AEM and Magento.