Як встановити 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 ви можете перевірити , щоб почати налаштування свого блогу.