Skip to content

Magento 2.3 PWA Setup

Introduction

Magento recently introduced PWA(Progressive Web App) Studio project in Magento 2.3 version.
Magento PWA Studio is a suite of tools designed to empower developers to develop online stores as progressive web apps.

What Are Progressive Web Apps?

The popularity of PWA is growing at a very fast in the field of e-commerce, business,
online news portal and other fields because of its peculiar characteristics listed
below as follows:
1. Faster User Interface Support
Web developers can now load an entire website to browser after just one pageview even on slow networks.
2. Home screen Shortcut
Mobile users can install PWA site to their home screen like a Native App.
3. Offline Support
Implementation of service worker makes it able to work offline. Website can now be accessible even user lost the internet connectivity. PWA sites cache content to ensure that some content can be served when a user is offline.
4. Background Processes
If the user facing poor connectivity or offline, the browser store all the form submission data and request, When connectivity returns it re-sent all the data in background.
5. Secure
PWA sites use HTTPS connections for enhanced security.

Lets back to setup PWA in Magento 2….

PWA Studio project used the 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.

Lets start with Magento 2.3 installation…

Note: You must have a version of NodeJS >=10.14.1, and Yarn >=1.13.0. The latest LTS versions of both are recommended.

1. Enter the following command:

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

2. Install Magento by Command Line:

When you have completed with Magento installation, Now

3. Now clone pwa-studio repository

I have cloned this repository in magento root directory ex: /var/www/html/mage0

4. You will see the pwa-studio directory in /var/www/html/mage0.
Enter into this directoy:

5. Run

6. Specify the Magento backend server in .env file. you can see the .env.dist file in
/var/www/html/mage0/pwa-studio/packages/venia-concept/ direcoty. If you are not
able see, enable show hidden files. Now create .env file from this env.dist

7. Open this .env file and find MAGENTO_BACKEND_URL. Here configure your
local Magento 2.3 instance, my case it is:

8. Now let install sample data for venia-theme to make it good looking.

9. Find the deployVeniaSampleData.sh file in
/var/www/html/mage0/pwa-studio/packages/venia-concept/ directory. and copy this
file in your Magento root directory. Now it must look like
/var/www/html/mage0/deployVeniaSampleData.sh Now run:

10. After successful installation run:

11. Now go back to pwa-studio directory /var/www/html/mage0/pwa-studio and
start Server.

Above command may give the permission error, for that run the above command with sudo.

12. Run server, Use any of the following commands from the project root directory to start
the server:

Above commands may give the permission error, for that run the above command with sudo.

you can find more about above commands from Venia storefront setup

12. Now browse the application, you will the application url on terminal like:

OR

Note: You might get the issues that product’s images are not loading on PWA.
To fix this issue, create a virtual host, as i have created https://magento2-pwa.comthat must be pointing to your pub directory of Magento instance not to the root directory of you magento.

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

2 Comments

  1. Hello,

    0day Electro Scene Music: http://0daymusic.org

    *Choose payment method: BitCoin, Bank wire, WesternUnion, MoneyGram, Google Wallet, Webmoney.
    *IP restrictions: 3 IP addresses per user at the same time.
    *Overal server’s speed: 1 Gb/s.
    *Easy to use: Most of genres are sorted by days.
    *Server’s capacity: 126 TB 1990-2019.
    *More 11 years Of Archives.
    *No Waiting Time, No captcha,No Speed Limit, No Ads.
    *Never Deleted Scene Albums, Labels, Save Time And Money.
    *Updated On Daily: 20GB-50GB, 300-700 Albums 0-day WEB, Promo, CD, CDA, CDM, CDR, CDS, EP, LP, Vinyl…
    *Up Time: 99%
    *All Genre: House, Club, Techno, Trance, Dance, Italo-Dance, Eurodance, Drum and Bass, Psychedelic, Goa, PsyTrance, Progressive House, Electro, Euro-House, Club-House, Hardtechno, Tech-House, Dutch House, Minimal, Deep-House, Nu-Disco, Hardstyle, Hardcore, Jumpstyle, Electronic, Alternative, Alternative Rock, Ambient, Avantgarde, Ballad, Bass, Beat, Black Metal,Blues, Classical, Chanson, Country, Dance Hall, Death Metal, Disco, Ethnic, Folk, Folk-Rock, Funk, Gangsta Rap, Gothic Rock,Hard Rock, Heavy Metal, Hip-Hop, Indie, Industrial, Instrumental, Jazz, Jungle, Pop, Rock, Metal, Latin, Lo-Fi, New Age, Noise, Oldies, Pop-Folk, Progressive Rock, Psychedelic Rock, Punk Rock, Rap, Reggae, R&B, Rock & Roll, Soul, Soundtrack, Speech, Synthpop, Thrash Metal, Top 40, Vocal etc.
    *Account delivery time: 1 to 48 hours.

    Privat FTP 1990-2019:

    Plan A: 20 EUR – 300 GB – 30 dagar
    Plan B: 45 EUR – 900 GB – 90 dagar
    Plan C: 80 EUR – 2500 GB – 180 dagar

    Regards,
    0DAY Music

Leave a Reply

Your email address will not be published.

Share via
Copy link
Powered by Social Snap