How to install an Amasty PWA add-on?

How to install an Amasty PWA add-on?

      At the moment Amasty PWA add-ons are installed via yarn. The add-ons could be downloaded from the Products tab in the customer account after the purchase. 
      Before starting the installation process, make sure that the Magento instance meets the following requirements:
  1. Magento on version 2.3.6 and higher. This requirement is associated with the native Magento GraphQL support, which was implemented since 2.3 generation.
  2. Corresponding Amasty extension installed. The add-ons can’t work on a vanilla Magento. Without the extension, the add-on could not retrieve the required info to operate properly.
  3. Corresponding GraphQL system package installed. GraphQL endpoints are required for the communication of the storefront with the Magento backend. The GraphQL package can be installed with command composer require amasty/[graphql-package-name]. The name of the GraphQL package is provided upon installation of the main extension:

    It can also be found in the suggest section in the composer.json file of the main extension:

  4. Venia theme installed. We guarantee that Amasty add-ons will work inside the Venia Theme environment. What concerns other PWA themes built on React, improvements might be required here. An exception will be ScandiPWA - it's also built on React but with a different architecture and tools, so we can't guarantee that our add-ons will be compatible with it. 
  5. Tools installed. The required tools need to be installed: NodeJS >=10.14.1 LTS; Yarn >=1.13.0; Python 2.7 and build tools, see the Installation instructions on node-gyp for your platform.

PWA Studio Installation

1. New project creation

      To create a new project, please run the following command: yarn create @magento/pwa
      After that, an interactive installation process will be started. You'll have to enter the following information: 
  1. the directory name;
  2. project name;
  3. author name;
  4. Magento backend URL (you don't have one, you'll be offered to install a new Magento instance and token).

      To go to the project’s directory, run the following command: $ cd myproject/

2. Project domain creation

      You need to create a unique, safe, configurable domain for your new project. To do that, please run the following command: yarn run buildpack create-custom-origin

Please, note that, for the successful command execution, you need to run the command by a user with the administrator's permissions. For this step, the admin password is required. This is why you can be asked to enter the admin password in the command line.

3. Project start

      To run the project in the developer mode, please execute yarn watch. The project will be started and will be available via address, given to you in the console window. For example, see the screenshot below:

PWA Module Installation

To install the PWA modules to your instance, you need to follow the next steps:
      1. Proceed to the required folder using the following command: cd your_project/src
      2. Create a new folder with mkdir @amasty
      3. Copy module folder and paste it to @amasty
      4. For development mode, run yarn add link:src/@amasty/%module_name%
          For production mode, run yarn add file:src/@amasty/%module_name%
          Both commands should be run from the directory (your_project folder).
      5. If the extension has the Ovverrides folder, copy folder overrides from @amasty/%module_name% into src/ and install VeniaUiOverrideResolver for PWA Studio with the command: yarn add @fooman/venia-ui-override-resolver
      6. Restart your project using the yarn watch command.

Please, note that adding a new file requires restarting the watch process for the file to get recognised. Replacing a component can be dangerous. It is not a compound change, so if two extensions are intended to replace the same file, it can lead to errors.

      • Related Articles

      • What Amasty extensions support PWA and GraphQL?

              Amasty PWA add-ons provide the same functionality as the original Amasty extensions. The PWA add-ons are created with the required Magento PWA stack of technologies, which makes it applicable for building a PWA site on the base of Magento. PWA ...
      • What is PWA?

              For 2 years now, PWA is being a growing trend and as time comes, the more interest it arises around itself. In this article, we’ll take a look at the technology and talk about Amasty PWA solutions in particular.       PWA stands for progressive ...
      • How to install an Amasty extension?

        There are two ways of installing an extension on Magento 2. It's recommended to use one and the same installation method for all Amasty extensions. Composer installation Step 1. To download and install Magento modules, the vendor repository is ...
      • What is Magento PWA Studio?

              Magento has created PWA Studio - a set of tools that allow developing Magento-based PWA sites. The PWA Studio includes: Peregrine. This is a library used to provide a set of functions responsible for providing data to visual components in the ...
      • Composer error: Failed to decode response: Failed to decode zlib stream

              If you've experienced this error using Composer, there are several ways on how to solve this:       1. First, please verify whether the Amasty repository is installed and whether the authentication keys are valid. More information on this can ...
      • Announcements

      • Already Done in Q1'23

        New features and improvements Order Attributes v3.8.0 NEW now Order Attributes are placed on the PayPal Review Page; we added compatibility with Hyvä Theme for the module. You can find package for installing in composer suggest (Note: the compatibility
      • Roadmap | What to expect in Q1'23

        New features and improvements Improved Layered Navigation generate SEO-friendly URLs for multi-select Category filter; better speed performance of the Apply filters button; improve Category list load time. Special Promotions Pro optimize data types in
      • Already Done in Q4'22

        New Amasty services Make sure your site is well-performing with our E-commerce QA testing service. Let our specialists check various elements of your website and get the issues fixed. The service is available for any e-commerce platform (Magento, Shopify,
      • Roadmap | What to expect in Q4'22

        New features and improvements Elastic Search better performance of synonyms; REST API support. Product Labels enhanced extension performance with a lot of products on the page. Blog Pro posts migration from one Magento instance to another; email notifications
      • Already done in Q3'22

        New solutions Our new SaaS tool - Website SEO Health Check. Discover the most severe SEO mistakes which can damage your website. Available as part of Pro and Premium SEO Toolkit. New features and improvements Import and Export NEW we added the possibility