How to Install Magento 2 PWA Blog Add-On?

PWA Blog Add-On enables you to benefit from a blog on a rich PWA storefront. 

In this article, you'll learn how to install PWA Blog on PWA Studio.

Take the following steps to install Magento 2 PWA Blog Add-On:

1. Make sure that you installed the latest version of Magefan Blog Extension (Base, Plus or Extra) and Magefan Blog GraphQL Extension.

2. Upload the src/lib/magefan-blog-ui folder from the archive to your PWA Studio root directory/src/lib/ folder. So you will get src/lib/magefan-blog-ui folder on your instance.

3. Navigate to your PWA Studio root directory.

4. Add blog static route.

•  Update local-intercept.js. Replace this line:

function localIntercept() {}

with

function localIntercept(targets) {
    targets.of("@magento/venia-ui").routes.tap(routes => {
        routes.push({
            name: "Blog",
            pattern: "/blog",
            path: require.resolve("./src/lib/magefan-blog-ui/src/components/Routes")
        });
        return routes;
    });
}

See file example (samples/local-intercept.js).

5. Create component directories.

mkdir -p src/components
mkdir -p src/components/App
mkdir -p src/components/Main

6. Copy the following components.

cp node_modules/@magento/venia-ui/lib/components/App/app.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/App/container.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/Main/main.js src/components/Main

7. Add blog core styles.

• Update the components/Main/main.js. 

import blogPageClasses from './../../lib/magefan-blog-ui/src/index.css';

and replace this line

<div className={pageClass}>{children}</div>

with

<div className={`${pageClass} ${blogPageClasses.blogPage}`}>{children}</div>

See file example (samples/components/Main/main.js).

8. Update import statements.

• Update the relative imports in components/Main/main.js.

import { mergeClasses } from '@magento/venia-ui/lib/classify';
import Footer from '@magento/venia-ui/lib/components/Footer';
import Header from '@magento/venia-ui/lib/components/Header';
import defaultClasses from '@magento/venia-ui/lib/components/Main/main.module.css';

See file example (samples/components/Main/main.js).

9. Export components.

• Create src/components/Main/index.js file with the following content:

export { default } from './main'

10. Overwrite/Extend the Main component.

• In the PWA Studio root directory create overwrite webpack plugin moduleOverrideWebpackPlugin.js with the following code:

const path = require('path');
const glob = require('glob');

module.exports = class NormalModuleOverridePlugin {
    constructor(moduleOverrideMap) {
        this.name = 'NormalModuleOverridePlugin';
        this.moduleOverrideMap = moduleOverrideMap;
    }

    requireResolveIfCan(id, options = undefined) {
        try {
            return require.resolve(id, options);
        } catch (e) {
            return undefined;
        }
    }
    resolveModulePath(context, request) {
        const filePathWithoutExtension = path.resolve(context, request);
        const files = glob.sync(`${filePathWithoutExtension}@(|.*)`);
        if (files.length === 0) {
            throw new Error(`There is no file '${filePathWithoutExtension}'`);
        }
        if (files.length > 1) {
            throw new Error(
                `There is more than one file '${filePathWithoutExtension}'`
            );
        }

        return require.resolve(files[0]);
    }

    resolveModuleOverrideMap(context, map) {
        return Object.keys(map).reduce(
            (result, x) => ({
                ...result,
                [require.resolve(x)]:
                this.requireResolveIfCan(map[x]) ||
                this.resolveModulePath(context, map[x]),
            }),
            {}
        );
    }

    apply(compiler) {
        if (Object.keys(this.moduleOverrideMap).length === 0) {
            return;
        }

        const moduleMap = this.resolveModuleOverrideMap(
            compiler.context,
            this.moduleOverrideMap
        );

        compiler.hooks.normalModuleFactory.tap(this.name, (nmf) => {
            nmf.hooks.beforeResolve.tap(this.name, (resolve) => {
                if (!resolve) {
                    return;
                }

                const moduleToReplace = this.requireResolveIfCan(resolve.request, {
                    paths: [resolve.context],
                });
                if (moduleToReplace && moduleMap[moduleToReplace]) {
                    resolve.request = moduleMap[moduleToReplace];
                }

                return resolve;
            });
        });
    }
};

• In PWA Studio root directory create overwrite mapping file componentOverrideMapping.js with the following code:

module.exports = componentOverride = {
    [`@magento/venia-ui/lib/components/Main`]: 'src/components/Main',
};

11. Go to the src/lib/magefan-blog-ui folder and run the following command using CLI:

yarn install

12. Navigate to the PWA Studio root directory, then create a production build and run the server.

yarn build
yarn start

Once you install the PWA blog, you can check the Blog Extension User Guide to start setting up your blog.