User Manual - PWA Studio

Pre-Installation Requirements
Installing and Configuring PWA Studio
Employing Aheadworks Blog
Employing Aheadworks ARP
Running PWA Studio Project

Pre-Installation Requirements

Make sure, the following requirements are met prior the installation of PWA:

A Linux kernel operating system (OS). Ubuntu distributions are preferred.

Windows OS is not supported.

NodeJS (version 10.14.1 and higher) and Yarn (version 1.13.0 and higher), preinstalled on the OS.
Magento (version 2.4.2), preinstalled on the Server. Access via https enabled.

Installing and Configuring PWA Studio

1. Use the following command to install PWA Studio:

yarn create @magento/pwa

2. Enter any name (no spaces) in response to the "Project root directory" query, For example,"Blog". This will create a directory to host all the files of the installation.

3. Enter @magento/[email protected] in response to the "Which template would you like to use to bootstrap install? Defaults to '@magento/venia-concept'."

4. Choose "Other" for the "Magento instance to use as a backend" query

5. Enter the address of the Server in response to the "URL of a Magento to use as a backend" query. The address must start https://

6. Leave default replies for all the remaining queries.

Reply "y" to the "Install package dependencies with yarn..."query.

7. Go to the project folder:

cd <project_name>

8. Run the following command:

yarn run buildpack create-custom-origin .

The command is to end with a space and dot.

This will ensure that no error will be ignored on running the project.

9. Go to the project root directory and find the .env file. Open the file and change the value of the IMAGE_OPTIMIZING_ORIGIN parameter from "auto" into "backend".

Employing Aheadworks Blog

Aheadworks Blog (version 2.8.0) and Aheadworks BlogGraphQL extensions, pre-installed on the Server. Though part of the Aheadworks Blog installation package, BlogGraphQl is installed separately.

1. Copy the /awBlog/ folder into /src/

2. Go to the project root directory and find the local-intercept.js file. Insert the following code into the file:

module.exports = targets => {
    targets.of('@magento/venia-ui').routes.tap(routes => {
        routes.push({
            name: 'Blog',
            pattern: '/blog/:name?/:key?',
            path: require.resolve('./src/awBlog/components/Blog/blog.js')
        });
        return routes;
    });
};

3. Add the following line to /src/store.js

import { awReducerBlog } from './awBlog/redux/reducers/awReducerBlog';

4. Change the following line:

const rootReducer = combineReducers(reducers);

const rootReducer = combineReducers({...reducers, awReducerBlog});

Employing Aheadworks ARP

Magento 2.4.2 with https access and with access to Aheadworks Autorelated и Aheadworks AutorelatedGraphQl extensions must be pre-installed on the Server.

1. Copy the /awArp/ folder into /src/

2. Go to the end of the project root and find the local-intercept.js file. Insert local-intercept.js from the archive with the extension.

Which features are not supported for PWA:

The block can be displayed only on Content top or bottom parts of a shopping cart, category, or products pages
Add to cart button is not displayed
Block Template is not supported

Running PWA Studio Project

Run the following command to test the Development version:

yarn run watch

This will start the Development Server. See the console output for the address of the server.

Run the following command to test the Production version:

yarn build && yarn start

This will start the Production Server. See the console output for the address of the server.

Product Page

Tags:

PWA Studio