How to setup copy of Venia Concept to work locally

Question

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 :(

Answer 1

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.

Answer 2

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.