User Tools

Site Tools



PWA Installation User Guide

The PWA Studio is distributed with the Project Scaffolding. Project Scaffolding is a method of automatic file creation, aimed to support a specific project structure.

PWA Studio offers various instruments to simplify project creation. Also, it allows you to create your own PWA theme, layered on Magento 2. The full documentation is available via Magento PWA Studio documentation.

PWA Studio Installation

Before you start the installation process, please make sure you have installed all the tools, mentioned below:
  • 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;
  • A running instance of Magento 2.3.1 or above.

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:

  • The directory name, where the project will be created (installed);
  • Project name;
  • Author name;
  • Magento backend url. If you don’t have one, you’ll be offered to install a new Magento instance and token.

In the screenshot below, an example of the installation process is shown.

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 the following command:

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. Copy all module files to the directory myproject/src/lib

2. Configure the webpack.config file. To to that, you need to modify and match the myproject/webpack.config.js original file content to the data, given in the myproject/src/lib/sample.webpack.config.js file.

3. Configure (or create, if you don’t have one) the componentOverrideMapping.js file. It stores the override map of standard components.

The syntax is as follows: [‘path to the original venia component’]: ‘path to the redefined component’

See the example on the screenshot below:

4. Restart the dev server.

5. Success.

To compile the production version, you need to run the following script: yarn build:prod

To learn more about PWA theme customizations with Project Scaffolding, you can read the following blog post.

Rate the user guide
 stars  from 1 votes (Details)
magento_2/pwa_installation_user_guide.txt · Last modified: 2020/05/22 13:29 by tihomirova