Як встановити Magento 2 PWA Blog Add-On?

PWA Blog Add-On  дозволяє вам користуватися блогом на PWA.

У цій статті ви дізнаєтеся, як встановити PWA Blog на PWA Studio.

Примітка: ваш код може дещо відрізнятися від наведених прикладів через різні версії PWA Studio.

Виконайте наведені нижче дії, щоб встановити PWA Blog Add-On Magento 2:

1. Переконайтеся, що ви встановили останню версію модуля Блогу Magefan (Базовий, Плюс або Екстра) і Magefan Blog GraphQL Extension.

2. Завантажте папку src з архіву в кореневий каталог PWA Studio root directory.

3. Перейдіть до кореневого каталогу PWA Studio.

4. Додайте маршрут до блогу (blog static route).

•  Оновіть local-intercept.js. Замініть цей рядок:

function localIntercept() {}

на

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

Приклад файлу (samples/local-intercept.js).

5. Створіть component directories.

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

6. Скопіюйте наступні компоненти – 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
cp node_modules/@magento/venia-ui/lib/components/Adapter/adapter.js src/components/Adapter

7. Додайте blog core styles.

• Оновіть components/Main/main.js. Додайте цей рядок у кінці імпорту:

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

і замініть цей рядок

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

на

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

Приклад файлу (samples/components/Main/main.js).

8. Оновіть import statements.

• Оновіть відносний імпорт (relative imports) у 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.css';

Приклад файлу (samples/components/Main/main.js).

• Оновіть відносний імпорт у components/App/app.js.

import globalCSS from '@magento/venia-ui/lib/index.css';
import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '../Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import Navigation from '@magento/venia-ui/lib/components/Navigation';
import Routes from '@magento/venia-ui/lib/components/Routes';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';

Приклад файлу (samples/components/App/app.js).

• Оновіть відносний імпорт у components/App/container.js.

import { useErrorBoundary } from '@magento/venia-ui/lib/components/App/useErrorBoundary';

Приклад файлу (samples/components/App/container.js).

• Оновіть відносний імпорт у components/Adapter/adapter.js.

import { AppContextProvider } from '@magento/venia-ui/lib/components/App';
import App from '../App';

Приклад файлу (samples/components/Adapter/adapter.js).

• Відкрийте файл src/index.js вашого проекту та оновіть імпорт для компонента Adapter, щоб використовувати свій кастомний компонент Adapter.

import Adapter from './components/Adapter';

Приклад файлу (samples/src/index.js).

9. Експортуйте компоненти

• Створіть файл src/components/App/index.js з наступним вмістом

export { default } from './container'

• Створіть файл src/components/Main/index.js з наступним вмістом

export { default } from './main'

• Створіть файл src/components/Adapter/index.js з наступним вмістом

export { default } from './adapter'

10. Перепишіть/розширте Main component.

• • У кореневому каталозі PWA Studio створіть overwrite плагіна webpack moduleOverrideWebpackPlugin.js з таким кодом:

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;
            });
        });
    }
};

• • У кореневому каталозі PWA Studio створіть файл overwrite mapping componentOverrideMapping.js з таким кодом:

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

11. Підіть у папку src/lib/magefan-blog-ui та виконайте наступну CLI команду:

npm install

12. Перейдіть до кореневого каталогу PWA Studio, потім створіть production build та запустіть сервер.

npm run build
npm start

Після встановлення блогу PWA ви можете перевірити документацію розширення Блогу, щоб почати налаштування свого блогу.