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 6 Powerful LearnDash Themes to Skyrocket Your Online Courses

Presentation is as important as content in online learning. From your LearnDash theme, the professional…

2 hours ago

Streamoz Review 2025: What Twitch Growth Services Reveal About the Future of eCommerce Visibility

Daily, millions watch live streams on Twitch in the form of games, music, IRL content,…

2 days ago

How Powerful Social Media Boosting Tools Like Jaynike Music Marketing Are Transforming eCommerce Marketing in 2025

In the contemporary setting of competitive musicality, even the most talented are having unspeakable trouble…

2 days ago

TikTokstorm Review 2025: Powerful Social Media Boosting Tool Shaping the Future of eCommerce

In the dynamic world of eCommerce, visibility is everything. Whether you’re running a small Shopify…

2 days ago

Top Magento 2 SEO Extensions to Supercharge Enterprise SEO in 2025

Magento 2 SEO Extensions are essential for enterprises in 2025 to boost visibility, optimize performance,…

1 week ago

Life Insurance In The Digital Age: How Technology Is Changing Protection

The best life insurance should always be about one thing: financial security for our loved…

1 week ago