3

I'm exploring PWA Studio and one thing I'm interested in finding out is how it can be easily used by copying Venia-Concept and using it as a stand alone REACT app. Rather than downloading the entire monorepo which includes all the other packages.

So far I've tried the below but it exits with an error saying it can't find babel, I'm not sure why as it works when I follow the instructions to install it as a monorepo.

git clone https://github.com/magento-research/pwa-studio.git venia-temp
cd venia-temp
cp -R packages/venia-concept ../
cp babel.config.js ../venia-concept/
cp browserslist.js ../venia-concept/
cd ../venia-concept/
yarn install
cp .env.dist .env
yarn run build

$ yarn run clean && yarn run build:esm && yarn run validate-queries && yarn run build:prod
$ rimraf dist esm
$ BABEL_ENV=development babel src --out-dir esm --root-mode 'upward' --source-maps --copy-files
/bin/sh: babel: command not found
error Command failed with exit code 127.

Any ideas on what's causing this issue to occur and how I can get it working?

I know I could use the venia-consumer-example or fallback-studio, but I'm interested in seeing how it can work this way too.


UPDATE

If I run yarn add babel-cli -D i get past the last error but a new one occurs...

$ yarn run build
yarn run v1.13.0
$ yarn run clean && yarn run build:esm && yarn run validate-queries && yarn run build:prod
$ rimraf dist esm
$ BABEL_ENV=development babel src --out-dir esm --root-mode 'upward' --source-maps --copy-files
SyntaxError: src/RootComponents/CMS/CMS.js: Unexpected token (6:15)
  4 | export default class CMS extends Component {
  5 |     render() {
> 6 |         return <CategoryList title="Shop by category" id={2} />;
    |                ^
  7 |     }
  8 | }

UPDATE 2

I have found that if I run yarn add -D babel-plugin-module-resolver the yarn watch command works, but the yarn build command still does not :(

0

Ok, I can get it pretty much working with the below:

git clone https://github.com/magento-research/pwa-studio.git venia-temp
cd venia-temp
cp -R packages/venia-concept ../
cp babel.config.js ../venia-concept/
cp browserslist.js ../venia-concept/
cp magento-compatibility.js ../venia-concept/
cd ../venia-concept/
yarn install
yarn add -D babel-plugin-module-resolver
cp .env.dist .env

Then you can use yarn watch for developer mode. Or the below for production:

yarn build:prod
yarn start

NOTE

  • This is a bit of a hack and will probably only work on the current PWA Studio version, 2.1.0.
  • There are still issues with the yarn build:esm command.
  • Can you please update the answer as per current pwa version. – dekts Dec 13 '19 at 5:26
0

Not sure if this is the way to go to be honest. Why would you wanna do this? If you want to get a quick start i really advice using fallback-studio.

  • See the docs, fallback studio uses theme inheritance which is not the recommended approach by PWA Studio. magento-research.github.io/pwa-studio/technologies/… – Holly Apr 13 '19 at 7:49
  • Saying that, I do agree it offers a nice quick start approach for Magento developers comfortable with the theme inheritance approach. I would like to see Magento offer a more convenient way to bootstrap a Magento PWA studio React app too. – Holly Apr 13 '19 at 7:52
  • There is a lot of project setup with webpack, pwadevserver, upward etc to get things going with PWA studio. It seemed quite quick and simple to copy Venía for this, and then you can customise things while keeping their modular approach and only needing to use NPM to manage dependencies. Hopefully a better solution from PWA studio becomes available for starting a PWA studio app in the future though. – Holly Apr 13 '19 at 8:03

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.