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
SaaS SEO Services have become a crucial component for businesses in today’s highly competitive SaaS…
En a digital-first economy, Software-as-a-Service (SaaS) businesses need to be visible. Without visibility, even the…
After all, in business we're living by a binary decision. As the world becomes more…
In a world where technology evolves rapidly, developers who stay ahead of the curve gain…
The digital world is constantly changing and this way together website development and PPC advertising…
Manufacturing is changing fast. Buyers want direct access to products, quick fulfillment, and reliable updates.…