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

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/

1 2	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

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

1	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

1	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

1	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

1	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:

docker exec -ti m2dev23 bash

1	docker exec -ti m2dev23 bash

Add sample data using composer:

bin/magento sampledata:deploy

1	bin/magento sampledata:deploy

It will ask API keys from Magento:

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

1 2	"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/

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

1 2	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

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

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

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>

1	<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 ../../../../

1 2	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'
        ]
    ],

'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

1	docker exec -ti m2dev23 bash

Enable module:

bin/magento module:enable Magento_Pwa

1	bin/magento module:enable Magento_Pwa

Run update command:

bin/magento setup:upgrade

1	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

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

Clear cache:

bin/magento cache:flush

1	bin/magento cache:flush

Open in a browser: https://dev23.m2.test/</p>

1	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

1 2	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

1 2	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.