Let’s Start How to integrate PWA in Magento 2
If you’re new to handle the PWA in Magento 2, or want to make sure you’re on the right track, definitely 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, the web traffic of mobile users are high than desktop users, in 2019 more than 50% of users are shifted to mobile
with this change, the expectation of tech-savvy customers who are into digital commerce given feedback that we need a native app-like experience while browsing.
To bring this fast, light and app like feel, so many development team involved into this to provide the customer satisfaction.
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 are lower. User experience in the mobile device is more lite and flexible also download not required you can add this app just by hitting the add to the 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.
Now the right time 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.
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.
