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.
Do you want us to install the PWA Blog Add-On for you?
Let our technical engineers do it – check out our Installation Service.
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.