Are you prepared to try all benefits of Magento PWA Studio?

Magento PWA

Right now we are standing on the verge of big changes in eCommerce. And these changes will influence both the customer experience and the approach to developing web platforms as well.

At the end of this year, we are waiting for Magento 2.3 release. In 2017 Magento team announced that they are developing a set of tools for building online marketplaces as PWAs (Progressive Web Applications). Magento has called this set of tools the Magento PWA Studio. To be more precise, PWA means that your Magento shop is written in the web platform but behaves like an application.

What will happen if you decide to use the collection of tools to make your Magento 2 store a Complex Progressive Web Application? Your online store will become much faster. As a result, you will stand out among your competition and provide the customer with a much better user experience.

What do you need to start experiencing the benefits of Magento PWA Studio:

  • check whether your store is running on PHP 7.1 minimum.
  • GraphQL (a query language for API) but it will become available with the release of Magento 2.3

Scroll down to see a step by step guide to start your Magento PWA studio:

  • Prerequisites
  • Installed composer (Composer version 1.6.5)
  • Nodejs v10.5.0
  • Npm v6.1.0
  • Docker v18.03
  • Docker-compose v1.21.1
  • git

Download project runtime configuration from git repo:


https://github.com/akorolyov/m2-docker-dev there are: docker-compose.yml, nginx configurations, example of Dockerfile for the base development image.

git clone git@github.com:akorolyov/m2-docker-dev.git m2dev23
cd m2dev23/

Obtaining the Magento 2.3 dev source:


composer create-project --ignore-platform-reqs

--repository-url=https://repo.magento.com/">https://repo.magento.com/

magento/project-community-edition:2.3.0-alpha src

Download Magento2 PWA-Studio, we will use this code later:


git clone git@github.com:magento-research/pwa-studio.git src/pwa-studio

Start the machine. It will bring up all required services and generate self-signed SSL certificate.

docker-compose up -d

Add root cert to a system chain as a trusted SSL cert.

https://manuals.gfi.com/en/kerio/connect/content/server-configuration/ssl-certificates/adding-trusted-root-certificates-to-the-server-1605.html 

For MacOS users there is a command.

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain etc/nginx/ssl/m2.root.pem

And now let’s install Magento:


Login to a docker container:

docker exec -ti m2dev23 bash

Add sample data using composer:

bin/magento sampledata:deploy

It will ask API keys from Magento:

"username": "10dc6a43ed346d0be12b1795fb8e18f6",
"password": "55668ffa4021c37dfee9328337754a1b"

Install Magento with security options:


bin/magento setup:install --admin-user='admin' --admin-firstname='Admin' \

--admin-lastname='Last Name' --admin-password="admin123" \  
 
--admin-email='admin@example.com' --use-rewrites=1 \  

--db-host=db.m2dev23.dev --db-name=magento23 --db-user=magento 

--db-password=password \ 

--use-secure=1 --use-secure-admin=1 --base-url-secure=https://dev23.m2.test/

--base-url=https://dev23.m2.test/  


Create symlinks inside the container from for PWA module and theme files:


ln -s $(pwd)/pwa-studio/packages/pwa-module app/code/Magento/Pwa 
ln -s $(pwd)/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia  

Logout from docker container, don’t worry you will not let it alone. You will be back.

exit

Let’s setup PWA studio, it’s in alpha stage and will require some tricks.



cd src/pwa-studio/
npm install
cd packages/venia-concept
cp .env.dist .env


Let’s edit files


edit .env



MAGENTO_BACKEND_DOMAIN="https://dev23.m2.test"

MAGENTO_BACKEND_PUBLIC_PATH="https://dev23.m2.test/static/frontend/Magento/venia/en_US/js/"



edit babel.config.js


You should comment lines 33-49. After it should look like this:

const options = { 

development: Object.assign({}, defaults),

production: Object.assign({}, defaults) 

} ; 



edit webpack.config.js


You should update a product section at line: 148 , 

Comment line “ config.entry.vendor = libs;” 

It should look like this:

config.plugins.push(  
 
new webpack.NamedChunksPlugin(), 

new webpack.NamedModulesPlugin(), 

new UglifyPlugin() 

 ); 

edit Magento_Theme/templates/root.phtml

Update path to client.js file it should be:


<script src="/static/frontend/Magento/venia/en_US/js/client.js"></script>

Let’s build a theme and back to the project root:


npm run build 
cd ../../../../ 

I advise to update src/app/etc/env.php

update magento config to enable redis cache


  'cache' => [
        'frontend' => [
            'default' => [
                'backend' => 'Cm_Cache_Backend_Redis',
                'backend_options' => [
                    'server' => 'redis.m2dev23.dev',
                    'database' => '0',
                    'port' => '6379'
                ]
            ],
            'page_cache' => [
                'backend' => 'Cm_Cache_Backend_Redis',
                'backend_options' => [
                    'server' => 'redis.m2dev23.dev',
                    'port' => '6379',
                    'database' => '1',
                    'compress_data' => '0'
                ]
            ]
        ]
    ],
    'session' => [
        'save' => 'redis',
        'redis' => [
            'host' => 'redis.m2dev23.dev',
            'port' => '6379',
            'password' => '',
            'timeout' => '2.5',
            'persistent_identifier' => '',
            'database' => '2',
            'compression_threshold' => '2048',
            'compression_library' => 'gzip',
            'log_level' => '1',
            'max_concurrency' => '6',
            'break_after_frontend' => '5',
            'break_after_adminhtml' => '30',
            'first_lifetime' => '600',
            'bot_first_lifetime' => '60',
            'bot_lifetime' => '7200',
            'disable_locking' => '0',
            'min_lifetime' => '60',
            'max_lifetime' => '2592000'
        ]
    ],


Hey, don’t miss, we’re back! Login into docker container.


docker exec -ti m2dev23 bash 

Enable module:

bin/magento module:enable Magento_Pwa

Run update command:

bin/magento setup:upgrade

Don’t trust development mode, push it. Deploy theme with a force key.

bin/magento setup:static-content:deploy -f -t Magento/venia 

Clear cache:

bin/magento cache:flush 
Open in a browser: https://dev23.m2.test/</p>

If you did everything right you will get a page with a text – CMS Page Stub


What is working now:


Category pages

https://dev23.m2.test/women/tops-women/jackets-women.html 
https://dev23.m2.test/men/bottoms-men.html 

Product pages

https://dev23.m2.test/caesar-warm-up-pant.html 
https://dev23.m2.test/strive-shoulder-pack.html 


That’s it. If you have any additional questions concerning PWA development, feel free to contact me directly.

Enjoyed this post? Spread it to your friends!

Andrii Korolov

Andrii Korolov

 

Andrii is the founder and Managing Director at MavenEcommerce. His 10+ years of experience in e-commerce software development includes working on various projects ranging from startups to Fortune500 companies. Andrii is currently an expert-level Magento developer with deep subject-matter knowledge in a wide range of technologies. Over the past five years, Andrii has been the lead Magento developer in several large scale eCommerce projects and eCommerce mobile optimization projects. Recently, Andrii’s passion for excellence has motivated him to create a technique for reverse-engineering of e-commerce websites that enables extreme performance optimization.