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 :
There are 12 steps to set up PWA Studio in Magento 2.3.
Table of Contents
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.
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
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.
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
Clone repository or Download PWA studio project.
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
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
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
Install Venia theme and Pwa Module.
run: php bin/magento setup:upgrade
And you can see the successful setup of Venia Theme.
Configure Venia theme from admin->Content->Configuration
Navigate to path (/Users/magedev/pwa-studio) run:
npm install
Now, running PWA Studio
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
Magento 2 is an incredibly flexible and powerful eCommerce platform that can be tailored to…
Black Friday and Cyber Monday – BFCM 2024 are nearly around the corner, and it’s…
When it comes to e-Commerce platforms, undoubtedly Magento 2.0 grabs the spotlight. Magento might not…
The holiday shopping season is here, and there’s no better time to supercharge your Magento…
In today’s digital landscape, the rapid evolution of advanced web applications, particularly Progressive Web Apps…
As eCommerce booms, big data eCommerce will be all about providing insight into how to…