1

In the latest version of PWA Studio most Venia components is separated to UI library.

See the git commit: https://github.com/magento/pwa-studio/commit/fa0a4c9b45757c272f6b745c546e8b61b1da40db

What is the good approach to extend the venia theme ?

I have had a look at fallback studio but it seems out of date with the latest version https://github.com/Jordaneisenburger/fallback-studio

2

With the most current work on the develop branch you now have a folder called venia-concept, this is where all your custom work will go. Similar to a theme, but not exactly the same.

The pwa app is pointing to the index.js file in venia-concept as it's entry point. The way you use this is to replace the call to app from venia-ui to venia-concept. You can just copy the whole App folder into venia-concept and update the index.js file like such:

import App, { AppContextProvider } from './components/App';

This now points to an app file that you have copied over.

pwa-studio/packages/venia-concept/src/components/App/app.js

You will need to update the import statements along the way as you add in more components to override. So in your app file you will have something like this:

import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
import { array, bool, func, shape, string } from 'prop-types';

import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '../Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import MiniCart from '../MiniCart';
import Navigation from '../Navigation';
import renderRoutes from './renderRoutes';
import errorRecord from '@magento/peregrine/lib/util/createErrorRecord';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';

You can see that i'm now pointing to the local copy of Minicart in this file, it's no longer pointing to venia-ui. In case where you want to point to the core file, not your override, you use import Mask from '@magento/venia-ui/lib/components/Mask';

From here you can add in more and more components as you customize your shop.

5
  • 1
    Do you know how to extend/overwrite RootComponents ? E.G: @magento/venia-ui/lib/RootComponents/Category/ – Juliano Vargas Aug 12 '20 at 11:04
  • 1
    In the same manor, but the path is different: pwa-studio/packages/venia-concept/src/RootComponents/Category. This way of doing overrides is going out of favor with newer updates to the project, so this might not work in all version of pwa studio. – circlesix Aug 17 '20 at 21:51
  • 1
    Yeah, I've found out eventually thanks. What will be the next trend for overwriting do you you have any links or reference ? – Juliano Vargas Aug 19 '20 at 13:48
  • I would recommend getting on the magneto dev slack channel and looking in the pwa room. gist.github.com/lorikrell/65b50774450b526bdea4780872d6df1d. But if i'm to guess, as they move the pwa project into npm packages, there will be more flexibility in overrides with the webpack config. But i haven't been working on a site with the latest release, so i can't say for sure. – circlesix Aug 19 '20 at 14:09
  • Ok, cool no worries, I'm on the slack channel as well. Well you mention webpack config I'm actually overwriting components such as CategoryTree, ProductFullDetail etc... with a webpack config overwrite. – Juliano Vargas Aug 19 '20 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.