Detailed tutorial: Magento 2.3 PWA Studio Installation

January 4, 2019

10099

As you know our business is concentrated on selling custom, hand-made smartphone accessories. Therefore, mobile plays an important role accounting for over 70% of our overall traffic and 40%+ of our sales. Magento eCommerce is the leading provider in cloud digital commerce innovation. Magento 2 Progressive Web Applications (PWA) Studio – a suite of tools has been released for developing online store with app-like experience. With Magento 2.3 PWA Studio installation, you can enhance more sales and grab customer’s loyalty.

However, you are meeting some conflicts with the tool installation. Follow me to make your installation become easier.

We will be using the PWA concept theme (called Venia).

To be able to get PWA up, it requires a version of node.js >=8.0.0, and a version of smartphone >=5.0.0. The latest LTS versions of both are recommended.

PWA project used the set of modern tools and libraries :

Webpack: Webpack’s primary function is to create one or more bundles from the dependencies in your project’s modules.
ReactJs: a JavaScript library for building user interfaces.
Redux: a JavaScript library used for managing state in a web application
GraphQL: a data query language on the client side and a service layer on the server side.

There are 12 steps to set up PWA Studio in Magento 2.3.

Table of Contents

Magento 2.3 PWA Studio Installation

Step 1

Add the following command

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition:2.3-alpha /var/www/html/mage0

/var/www/html/mage0 is a magento installation directory.

Step 2

Set up Magento by Command Line

php bin/magento setup:install --base-url=http://localhost/mage0 --db-host=localhost --db-name=mahesh_mage0 --db-user=root --db-password=webkul --admin-firstname=John --admin-lastname=Doe [email protected] --admin-user=admin --admin-password=admin123 --backend-frontname=admin_magento --language=en_US --currency=USD --timezone=Asia/Tbilisi --cleanup-database --use-rewrites=1

When you have completed with Magento installation, move to the PWA installation steps

Step 3

Creating base PWA theme will be extremely essential which will be the parent them for PWA Venia theme. You can create by own or Clone Repository

For now lets clone base PWA theme repository.

Step 4

Create directory app/design/frontend/Magento/pwa and copy all files and directories of base theme here.

Lets check base theme is available or not.

Run: php bin/magento setup:upgrade

And navigate to your Magento Admin -> Content -> Themes

Step 5

Clone repository or Download PWA studio project.

Step 6

Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory (pwa-studio/packages/pwa-module).

 class="wp-block-preformatted">ln -s pwa-studio/packages/pwa-module app/code/Magento/Pwa

 class="wp-block-preformatted">ex:ln -s /home/users/myuser/www/html/pwa/pwa-studio/packages/pwa-module app/code/Magento/Pwa

Step 7

Link theme directory as well. Navigate to your Magento installation’s root directory and create a Pwa symlink folder
linking to the project’s module directory(pwa-studio/packages/venia-concept).

 class="wp-block-preformatted">ln -s pwa-studio/packages/pwa-module app/design/frontend/Magento/venia

Step 8

Now navigate to your pwa-studio project’s venia-concept directory, copy .env.dist into a new .env file and update the variables with the URL to your Magento development store.

 class="wp-block-preformatted">ex: cd /Users/magedev/pwa-studio/packages/venia-concept
cp .env.dist .env

Step 9

Install Venia theme and Pwa Module.

run: php bin/magento setup:upgrade

And you can see the successful setup of Venia Theme.

Step 10

Configure Venia theme from admin->Content->Configuration

Step 11

Navigate to path (/Users/magedev/pwa-studio) run:

npm install

Now, running PWA Studio

Step 12

And Finally Navigate to /Users/magedev/pwa-studio/packages/venia-concept

npm start

Note: This project is still in development and only supports the home route.

Visiting the homepage of PWA to see how the current development status it is:

Venia category page with PWA studio installation

Congratulations! You have set up your development environment for the Venia theme project.

Hopefully, the instruction of PWA Studio installation will deal with all your problems with Magento 2.3. Please leave comments below if you need some help.