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:

  1. Progressive Web App (PWA) Studio
  2. PHP 7.2 Support
  3. Page Builder
  4. WYSIWYG Upgrade
  5. Cache-Management
  6. GraphQL Support
  7. Elasticsearch
  8. Declarative DB Schema
  9. Asynchronous and Bulk Web API
  10. Multi-Source Inventory (MSI)
  11. 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.

pwa

Features of a Basic PWA Website

  1. Fast: A PWA site uses a variety of performance optimization strategies to load content faster and provide a responsive experience, even on slow networks.
  2. Cross-browser compatible: PWA sites works equally well on all modern browsers like Chrome, Safari, Firefox, Edge etc.
  3. Secure: Uses HTTPS connections for better security.
  4. Responsive: PWA sites have responsive design strategies that provide a consistent experience on pc, tablet, and mobiles.
  5. Mobile “Install”: You can add PWA sites to home screens and receive Push notifications from the site.
  6. Offline Mode: These sites cache content to help serve some content to the user when offline.
  7. 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:

  1. PWA Buildpack: Main build and development tools for Magento PWA store
  2. Peregrine: It’s a collection of UI components
  3. Venia Storefront: Magento 2 storefront

Using Magento PWA Studio to Set Up PWA Website

Prerequisites:

  1. Make sure the version of Node.js is greater than or equal to 10.14.1 LTS
  2. The version of NPM is greater than or equal to 5.0.0
  3. Yarn version greater than or equal to 1.13.0
  4. Python 2.7
  5. 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:

yarn install

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.

Choosing the Magento 2.3 backend:

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:

packages/venia-concept/deployVeniaSampleData.sh 

4.2. Execute the deploy script

bash deployVeniaSampleData.sh

4.3. Install sample module

bin/magento setup:upgrade

4.4. Reindex the new data

bin/magento indexer:reindex

4.5. Verify installation

Go to the Admin section and verify the sample data installation.

Magento PWA

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.

Conclusion

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.

Free Exclusive Magento Tips

Join our mailing list to receive speed, security, & performance hacks.

You have Successfully Subscribed!