Developer Guide to How to integrate PWA in Magento 2

Developer Guide to How to integrate PWA in Magento 2

How to inegrate PWA in Magento 2

In this Developer guide you learn how to integrate PWA in Magento 2

So if you’re new to handle the PWA in Magento 2, or want to make sure you’re on the right track, definetly you’ll love this guide.

Before integrate PWA in Magento 2 you must know about what is PWA

But for now, let’s cover how to integrate PWA in Magento 2.

According to the major Search engines, web traffic of mobile users are high than desktop users, in 2019 more than 50% of users are shifted to mobile

with this change, expectation of tech-savvy customers who are into digital commerce given a feed back that we need a native app like experience while browsing.

To bring this fast, light and app like feel, so many development team invloved into this to provide the customer satification.

This PWA web technology is the most spoken word in the IT world.

The Magento introduced Magento 2.3 PWA Studio, set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2.

The Magento PWA Studio project provides the following tools:

  • PWA-Buildpack - It contains the main build and development tools for a Magento PWA.
  • Peregrine - Contains a collection of UI components for a Magento PWA.
  • Venia storefront - A proof of concept Magento 2 storefront built using the PWA Studio tools. Venia storefront is a sample implementation of PWA in Magento. We will go through the set up in a local web server capable of running a Magento 2 website.

Why integrate PWA in Magento 2 ?

Precisely talking after Magento studio was released, Magento users attention turned to integrate PWA with Magento 2.

Do you know why?

PWA in Magento 2 is not just a spoken word but it has a future of the apps. When compared with native apps cost and maintenance is lower. User experience in mobile device is more lite and flexible also download not required you can add this app just by hitting the add to home screen.

You can access the app without the internet connectivity and it can syn in the background

one more thing i can tell you is apps can respond fastly and supports notification with less memory space in the mobile.

Prerequisites for PWA in Magento 2

you need to make sure to have the following prerequisites before integrating PWA in Magento 2

  • In the machine

1. NodeJS >= 10.14.1

2. Yarn >= 1.13

3. Python 2.7

4. Running instance of Magento 2 website.

  • In you

1. Extensive knowledge in javascript and Html

2. Knowledge in React and Redux

3. Basic knowledge in Node.js and npm

After the above components and packages are successfully installed on your machine, carefully follow the steps one by one and make sure it doesn’t return any errors.

Lets start how to integrate PWA in Magento 2

Step 1. Clone the PWA Studio repository

git clone https://github.com/magento-research/pwa-studio.git

Clone the repository somewhere in your machine, preferably Documents folder.

Step 2. Install PWA Studio dependencies

yarn install

Run the command from PWA studio’s root directory and wait till the necessary dependencies are installed.

Step 3. Specify the Magento backend server

From the Magento root directory, packages/venia-concept directory, copy .env.dist into a new .env file:

Open the .env file and set the value of MAGENTO_BACKEND_URL to the URL of a running Magento instance. Magento has already provided a URL of the cloud Magento 2 instance which can be used as it is.

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

The next step is to start the server.

Step 4. Start the server

1. Build the application artifacts

yarn run build

2. Run the server

yarn run watch:venia

This will start the venia storefront development environment

yarn run watch:all

Runs the full PWA studio development experience

Once the development server is up and running, you will get the PWA store web link in the terminal which can be copied and viewed in the browser.

PWADevServer ready at https://magento-venia.local.pwadev:8001

OR

Launching staging server...

https://magento-venia.local.pwadev:51828/

Staging server running at the address above.

This address is your PWA storefront. You can still use the old address to access the Admin section of Magento, but for PWA development on the frontend, use this new address.

Thus the PWA proof of concept store is set up.

3. Customizing the storefront

Till now Magento and PWA community have not yet given clear guidelines on storefront customizations. Developers are confused about how to start the process. We can directly edit the venia files to fit it for our view or extend the functionality just like the traditional Magento approach.

Developers would find it comfortable by extending the functionality as they are following this method in their development cycle. For this, there is a GitHub repository to start with namely ‘Fallback studio’. You can try it out and do the customizations. Keep in mind that this is not a recommended approach by Magento.

https://github.com/Jordaneisenburger/fallback-studio

Get your storefront to look as if it's on your mind and don't let official PWA repository updates to slip from your memory.

Conclusion

We at eGlobe, strongly believe PWA as a sleek and powerful partner for web development in the near future and as the Magento Development Company is supporting it, this will bring a whole new change in the e-commerce world.

In the coming days we can expect Magento to come with the more stable version of PWA studio and as developers, we will get the clear picture on diving deep and getting pwa on our net.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Youtube

leave a comment