Magento introduced the most awaited version, Magento 2.3, on 28th November 2018. This version has introduced a ton of new features and a lot of smaller optimizations. But the most awaited feature is Magento Progressive Web App (PWA) Studio.
Major Features Introduced in Magento 2.3:
- Progressive Web App (PWA) Studio
- PHP 7.2 Support
- Page Builder
- WYSIWYG Upgrade
- GraphQL Support
- Declarative DB Schema
- Asynchronous and Bulk Web API
- Multi-Source Inventory (MSI)
- Google reCAPTCHA and Two Factor Authentication
It’s necessary to keep up with the industry trends and innovations to stay ahead of your competitors. Let’s dive in…
What is PWA?
Before we start with Magento PWA, you should know what PWA means.
PWA or Progressive Web App is a web application that uses better design patterns or modern web technologies to provide a fast, reliable, and engaging user experience.
Features of a Basic PWA Website:
- Fast: A PWA site uses a variety of performance optimization strategies to load content faster and provide a responsive experience, even on slow networks.
- Cross-browser compatible: PWA sites works equally well on all modern browsers like Chrome, Safari, Firefox, Edge etc.
- Secure: Uses HTTPS connections for better security.
- Responsive: PWA sites have responsive design strategies that provide a consistent experience on pc, tablet, and mobiles.
- Mobile “Install”: You can add PWA sites to home screens and receive Push notifications from the site.
- Offline Mode: These sites cache content to help serve some content to the user when offline.
- Shareable content: There’s a unique URL for each page in a PWA site which can be shared with other apps or social media.
For more information about PWA, you can watch this:
What is Magento PWA Studio?
It is a set of tools for developers that allow them to develop, deploy, and maintain a PWA storefront on top of Magento 2. It uses modern tools and libraries like Webpack, Redus, GraphQL, and React to help improve performance and enhance extensibility.
You can use the following tools provided by Magento PWA Studio:
- PWA Buildpack: Main build and development tools for Magento PWA store
- Peregrine: It’s a collection of UI components
- Venia Storefront: Magento 2 storefront
Using Magento PWA Studio to Set Up PWA Website
- Make sure the version of Node.js is greater than or equal to 10.14.1 LTS
- The version of NPM is greater than or equal to 5.0.0
- Yarn version greater than or equal to 1.13.0
- Python 2.7
- Running Magento 2.3 instance. [If you don’t have it, simply download Magento, extract it to your localhost directory and complete the Magento setup.]
Step 1: Clone the PWA Studio Repository
Clone the repository into your development environment.
git clone https://github.com/magento-research/pwa-studio.git
Note: Location is /Users/magedev/pwa-studio directory
Step 2: Install Project Dependencies
You now need to install PWA Studio dependencies. In the PWA Studio project’s root directory, run:
Note: If you have an existing node_modules directory, remove it to prevent installation errors.
Step 3: Specify the Backend Server
Under the packages/venia-concept directory, copy .env.dist into a new .env file.
Example: cp packages/venia-concept/.env.dist packages/venia-concept/.env
In the .env file, set the value of MAGENTO_BACKEND_URL to the URL of a running Magento instance
The currently recommended Magento version to use with PWA Studio is 2.3.0 which can be installed via composer. Although the Venia Storefront can run on top of any Magento 2.3 instance.
Example: composer create-project –repository=https://repo.magento.com/magento/project-community-edition:2.3.0
You can use the default cloud instance or set up your own local development instance.
Step 4: Install Sample Data
The Venia Storefront looks the best when you’ve downloaded the sample data into your Magento 2 development instance.
4.1. Copy or create the data
Copy the following into the root directory your Magento instance:
4.2. Execute the deploy script
4.3. Install sample module
4.4. Reindex the new data
4.5. Verify installation
Go to the Admin section and verify the sample data installation.
Step 5: Start the server
5.1. Build artifacts: Run the following command in the project root directory:
yarn run build
5.2. Run the server:
yarn run watch:venia
5.3. Run the storefront development environment:
The following command runs the full PWA Studio developer experience which includes concurrent Buildpack/Peregrine rebuilds and Venia hot-reloading.
yarn run watch:all
The following command generates build artifacts and runs the staging environment.
yarn run build & yarn run stage:venia
5.4. Go to the application
Once the development server is up and running, look for something similar in the terminal output:
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 is your PWA frontend address. You have now installed a development environment for the Venia storefront project. Facing problem installing Magento PWA? Here are some common errors and solutions.
Having a fast Magento store is important to win over your customers, be ahead of the competition, and boost sales. After optimized Magento hosting, installing Magento PWA store is a step forward.