Detailed tutorial: Magento 2.3 PWA Studio Installation

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.

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 --admin-email=test@webkul.com --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:

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.

OTHER EXTENSIONS YOU MAYBE INTERESTED IN

Related Posts

Jasmine Dam

Recent Posts

Top 10 Trusted Web App Development Companies to Elevate Your Digital Strategy

In today’s digital landscape, the rapid evolution of advanced web applications, particularly Progressive Web Apps…

15 hours ago

Why Your Retail Business Needs Big Data eCommerce In 2025?

As eCommerce booms, big data eCommerce will be all about providing insight into how to…

16 hours ago

The Best Role Of Magento 2 In Shaping The Future Of Ecommerce

The ecommerce industry is booming like never before. In fact, global retail ecommerce sales are…

2 days ago

13 Best Practices For Developing Custom WordPress Solutions

From brick-and-mortar retail to SaaS, a robust online presence is vital for business success. A…

4 days ago

AML Compliance In E-commerce: Why It’s Essential For Fraud Prevention?

In the e-commerce world, complying with Anti-Money Laundering (AML) regulations is more important than you…

7 days ago

How to Optimize Your Magento Store’s Marketing Strategy

Magento is the 4th most popular eCommerce platform used globally, and optimizing the marketing strategy…

1 week ago