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

1

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.

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.