Magento PWA Studio: Where's my React At?

Question

How do I edit and add to components in a PWA Studio React application?

Using the buildpack tool, I've installed the PWA scaffolding with the following command.

buildpack create-project /tmp/zing \
    --template "venia-concept"\
    --name "zing"\
    --author "me <[email protected]>"\
    --backend-url "https://mymagentourl.example.om/"\
    --braintree-token "a token" \
    --npm-client "npm"\
    --no-install
    

This gives me a Node.js application in the zing folder. If I start this application in developer/watch mode

$ cd zing
$ npm install
$ npm run watch

I get a server at http://localhost:10000 that serves out a React based application AND acts as PWA Studio's Upward server. Communication between my Upward server and Magento instance appears to be working -- the Venia application is grabbing the Venia sample data in installed in my Magento instance.

What's unclear to me is: Where are my React components? How do I start editing the existing Venia application and/or adding my own components to this application?

In src/index.js folder I see a bunch of bootstrapping code, including this

#File: src/index.js
// ...
import { Adapter } from '@magento/venia-drivers';    
// ...
import App, { AppContextProvider } from '@magento/venia-ui/lib/components/App';
// ...
ReactDOM.render(
    <Adapter apiBase={apiBase} apollo={{ link: apolloLink }} store={store}>
        <AppContextProvider>
            <App />
        </AppContextProvider>
    </Adapter>,
    document.getElementById('root')
);    

I presume (but am uncertain that) this is <Adapter/> is the top level React component?

Regardless of that, it's unclear what starts adding the real UI to the <App/> component, and what/where I'm meant to be writing code.

Is there a straight forward answer to this?

Answer 1

(Your question was partially answered by the PWA Studio team via twitter already, but here we go anyway.) Is there a straight forward answer to this? No, there is not. The official stand of the PWA Studio team is to not allow for any inheritance. The Venia Concept Theme is just a concept, not a skeleton. And as I personally see things, the Venia UI component library is opiniated in its approach - its using a certain component tree that is designed for a specific UI in mind (sidebar sliding in, checkout in sidebar, etcetera), while the whole point of React should be that you can design things from scratch and only reuse those parts that you would like to use.

The recommended approach that seems to be following from the fact that PWA Studio team is not offering a parent theme, is to start with your own theme, build your own App in the way you want, come up with your own component tree, preferably use something like Storybook for this. Next, once the UI is there, you can make the UI interactive by reusing some logic from Peregrine and Venia.

Following again from that, plus my personal dislike of the Venia UI design choices (not that I think it is too ugly, but I simply like to disagree), my personal approach is to kickstart things with a simple Create-React-App, dumping Venia and UPWARD, but reusing those hooks and contexts of Peregrine that I like. It is leading to the highest customization, the most freedom and perhaps also the approach that requires the most of your skills.

On the other end of the spectrum, there is still the scenario that is not covered by the PWA Studio team: Using the Venia UI theme as a parent theme and building on top of that. You can put together your own Webpack configuration, to resolve things in such a way that you can create parent/child-like behaviour. I've built my own, I know of various other Webpack configs, but the only one I really would like to recommend is https://github.com/fooman/venia-ui-override-resolver

Does that shape a picture? :)