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.
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:
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/
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 .
To run the project in the developer mode, please execute the following command:
The project will be started and will be available via address, given to you in the console window. For example, see the screenshot below.
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.
[‘path to the original venia component’]: ‘path to the redefined component’
See the example on the screenshot below:
4. Restart the dev server.
To compile the production version, you need to run the following script: