dev: Improve prod build and monorepo scripts (#165) (#223)

- Add more root-directory usability to monorepo scripts
- Add `npm run watch:all` mode that:
  - Simultaneously builds buildpack, peregrine, and venia
  - Hot reloads venia if either peregrine or venia change on disk
  - Fully restarts dev server if buildpack changes on disk
  - Interleaves and prefixes output
  - Doesn't use lerna to do this, because lerna's parallelizing console
  mode is not customizable enough
- Fix production builds (by pegging them to very new browsers)

fix: improve dev mode watch and log

chore: remove greenkeeper for now

chore: flush CircleCI cache by revving cache key

chore: reorg dependencies for lerna

fix: lerna dedupe and hoist

fix: use npm ci command to ensure deps

fix: populate .env file in ci

fix: clean after build for CI

fix: only clean dist, leave node_modules

fix: help eslint detect root modules

.circleci/config.yml

@@ -3,96 +3,57 @@ workflows:
   version: 2
   build-deploy:
     jobs:
-      # Greenkeeper Lockfile updates package-lock.json in branches created by
-      # greenkeeper-bot. It uses internal logic (currently a branchname prefix)
-      # to determine which branches to run on, so rather than duplicate that
-      # logic in CircleCI config, we just run greenkeeper-lockfile on every
-      # branch before running the rest of the CI process.
-      # On most branches, it will be a no-op.
-      - update_lockfile
       - build:
-          requires:
-            - update_lockfile
           filters:
             branches:
               ignore: master
       - master:
-          requires:
-            - update_lockfile
           filters:
             branches:
               only: master
 
-
 # This key means nothing to CircleCI; it's just a place to keep anchored
 # configuration nodes for reuse.
 common_settings:
   docker: &docker_setup
     - image: 'circleci/node:8.11.2'
   # Cache a bunch of stuff
   # - npm's local tarball cache
-  # - node_modules for each package (npm is fast at restoring from a partially-outdated tree)
   save_cache: &savecache
     paths:
       - ~/.ssh
       - ~/.npm
       - /root/.npm
-      - node_modules
-      - packages/peregrine/node_modules
-      - packages/pwa-buildpack/node_modules
-      - venia-concept/node_modules
-    key: 'v1-npm-cache-{{ .Branch }}'
+    key: 'v3-npm-cache-{{ .Branch }}'
 
-  # Greenkeeper Lockfile wants to use the latest lockfile format at all times,
-  # and therefore the latest NPM at all times.
   install_latest_npm: &install_latest_npm
     name: Ensure NPM is up to date
     command: sudo npm install -g npm@latest
 
-  # Greenkeeper Lockfile should run before `npm install` runs locally, so
-  # we need to install it globally.
-  install_greenkeeper_lockfile: &install_greenkeeper_lockfile
-    name: Install global lockfile to run before local npm install
-    command: sudo npm install -g greenkeeper-lockfile@2
-
-  # Install root devDependencies and bootstrap packages. We use
-  # --ignore-scripts to prevent building any artifacts to disk prior
-  # to running Jest. This is a safeguard to ensure our tests always operate
-  # on the latest source
-  install_shared_devdeps: &install_shared_devdeps
-    name: Install shared devDependencies
-    command: npm install --ignore-scripts
+  install_packages: &install_packages
+    name: Install NPM packages from lockfile
+    command: npm ci
 
-  test_suites: &test_suites
+  full_build: &full_build
+    name: Full Build
+    command: 'cp packages/venia-concept/.env.dist packages/venia-concept/.env && npm run build && npm run clean:dist'
 
   test_result_path: &test_result_path
     path: "test-results"
 
 jobs:
-  update_lockfile:
-    docker: *docker_setup
-    steps:
-      - checkout
-      - run: *install_latest_npm
-      - run: *install_greenkeeper_lockfile
-      - run:
-          name: Greenkeeper Lockfile update on Greenkeeper branches
-          command: greenkeeper-lockfile-update
-      - save_cache: *savecache
   master:
     docker: *docker_setup
     steps:
       - checkout
-      - run: *install_shared_devdeps
-      - run:
-          name: Run Lerna Bootstrap in CI mode
-          command: npm run bootstrap
+      - run: *install_packages
       - run:
           name: Test Suites
           command: 'npm run test:ci'
       - run:
           name: Coveralls Coverage Analysis
           command: npm run coveralls
+      - run: *full_build
       - store_test_results: *test_result_path
       - store_artifacts: *test_result_path
   build:
@@ -101,22 +62,16 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - 'v1-npm-cache-{{ .Branch }}'
-            - v1-npm-cache-
+            - 'v3-npm-cache-{{ .Branch }}'
+            - v3-npm-cache-
       - run: *install_latest_npm
-      - run: *install_greenkeeper_lockfile
-      - run: *install_shared_devdeps
-      - run:
-          name: Run Lerna Bootstrap and force non-CI mode for Greenkeeper
-          command: npm run bootstrap -- --no-ci
+      - run: *install_packages
       - save_cache: *savecache
-      - run:
-          name: Greenkeeper Lockfile upload on Greenkeeper branches
-          command: greenkeeper-lockfile-upload
       - run:
           name: Test Suites and Coverage
           # Test failures should not stop Danger, so hide the exit code.
           command: 'npm run test:ci && npm run coveralls || true'
+      - run: *full_build
       - run:
           name: Patch CircleCI environment to help detect pull requests
           command: chmod u+x scripts/patch_circleci_env && scripts/patch_circleci_env >> $BASH_ENV

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log
 coverage
 test-results
 dist
+packages/venia-concept/web
 storybook-dist
 .idea
 test-report.xml

README.md

@@ -1,6 +1,6 @@
 # PWA Studio
 
-[![CircleCI](https://circleci.com/gh/magento-research/pwa-studio.svg?style=svg)](https://circleci.com/gh/magento-research/pwa-studio) [![Coverage Status](https://coveralls.io/repos/github/magento-research/pwa-studio/badge.svg?branch=master)](https://coveralls.io/github/magento-research/pwa-studio?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/magento-research/pwa-studio.svg)](https://greenkeeper.io/)
+[![CircleCI](https://circleci.com/gh/magento-research/pwa-studio.svg?style=svg)](https://circleci.com/gh/magento-research/pwa-studio) [![Coverage Status](https://coveralls.io/repos/github/magento-research/pwa-studio/badge.svg?branch=master)](https://coveralls.io/github/magento-research/pwa-studio?branch=master)
 
 Magento PWA Studio is a collection of tools that enables developers to build complex Progressive Web Applications for Magento 2 stores.
 
@@ -27,6 +27,9 @@ To ease local development, testing, and versioning, the PWA Studio project uses
 1.  Clone the repository
 2.  Navigate to the root of the repository from the command line
 3.  Run `npm install`
+4.  Watch the bootstrapping take place.
+5.  To run the Venia theme development experience, run `npm run watch:venia` from package root.
+6.  To run the full PWA Studio deeloper experience, with Venia hot-reloading and concurrent Buildpack/Peregrine rebuilds, run `npm run watch:all` from package root.
 
 ## Things not to do
 

lerna.json

@@ -1,7 +1,9 @@
 {
-    "lerna": "2.11.0",
     "packages": [
-        "packages/*"
+        "packages/peregrine",
+        "packages/pwa-buildpack",
+        "packages/pwa-devdocs",
+        "packages/venia-concept"
     ],
     "version": "independent",
     "npmClient": "npm",