Maybe you’ve learned that PWA can improve your Magento eCommerce business. You are here to learn how to install PWA into Magento 2. A progressive web application is the best way to save capital and efforts that spend on native apps to reach your audience.
PWA can run smoothly on the phone’s browser. In fact, it gives the smooth mobile app abilities to users to surf, browse and shop online smoothly. Behave like native apps and reduce the need to be updated all the time from app stores. With progressive web apps, users can get the same mobile app shopping experience, even when there is no internet connection.
But, the real question is: how to create a progressive web application for your online store? Because of that, Adobe Magento Commerce has launched a set of tools and libraries – Magento PWA Studio. It provides tools to set up a PWA and create your storefront.
Table of Contents
What is Magento PWA Studio?
PWA Studio gives a perfect development environment and libraries to build PWA on the Magento backend. Also, It will help online merchants to build PWA apps that suit all the different OSs.
Magento 2 online stores can enhance conversion rates with a suite of tools designed. That further leads to achieving business revenue sales. PHP, JavaScript, React, Webpack, GraphQL, and hooks are libraries used to build Magento PWA Studio. Moreover, this robust tool enhances the overall user experience with PWA.
As a merchant, you want to create your own PWA. But installing Magento PWA studio is tricky for you. Here is the step-by-step guide to setting up Magento PWA studio.
Requirements to Install PWA Studio
While installing the Magento 2 PWA studio, make sure that you meet all the prerequisites which are listed below:
- Your online store must be built on Magento 2. Installing Magento 2 PWA studio needs Magento 2 and other versions, as it doesn’t support other Magento editions.
- NodeJS (>=10.14.1 LTS). Check your current node version using the following command: node -v
- Yarn (>= 1.13.0): Steps to install it:
- Check your current Yarn version using this command: yarn -v
- Install the latest version of Yarn binary: npm install -g yarn
- Move the file into your project folder: cd ~/path/to/project
- Run this command: yarn set version berry
Step-by-Step Guide to Set Up PWA Studio
-
Step 1: Use the cd command in the directory
Answer the questions in the terminal:- The project root directory: Enter the name of your root directory
- Short name of the project to put in the “name” field: Enter the project name.
- Name of the author to put in the “author” field: Enter the author information in this format: Author Name. For example Magemart Developer <[email protected]>
- Set up Magento as a backend (will be added to ‘.env’ file): 2.3.3-venia-cloud.
- Braintree API token to communicate with your Braintree instance (will be added to the ‘.env’ file): Press Enter.
- NPM management client to use: Select yarn
- Install package dependencies with yarn: Select Yes (Y)
-
Step 2: Install PWA front to your Magento backend
Go to the project directory and open the. env file to change the value after MAGENTO_BACKEND_URL.
-
Step 3: Start the PWA Studio storefront
Run the commands
- yarn install
- yarn watch
After running the commands, the output shows that your project is successfully deployed at the URL http://0.0.0.0:10000/. Next, users can access installed PWA Studio using this URL.
This server will detect any change and it updates the PWA frontend in real-time whenever a change. Using Ctrl + C, you can stop the running PWA dev server.
The Bottom Line
Are you struggling with Magento PWA Studio Installation? Our team of developers can help to set up Magento 2 PWA Studio seamlessly. For non-tech savvy merchants, I highly recommended taking help from experts.
