Use verdaccio for the template e2e test (facebook#34577)

Summary:
This PR adds [verdaccio](https://github.com/verdaccio/verdaccio) to release packages in the `packages` directory during the E2E test on CI.

The rationale behind this is the following:
- Firstly, we wanted to push the [monorepo RFC](react-native-community/discussions-and-proposals#480). We hit an issue when renaming the packages to follow the same convention caused by the e2e test using the template to fail. This is because the template installs packages from the live version of npm – and if you just rename a package in a given PR without releasing it, the package understandably can't be installed since it's not published, yet – as you can see [here](https://app.circleci.com/pipelines/github/facebook/react-native/15286/workflows/149df51f-f59b-4eb3-b92c-20c513111f04/jobs/282135?invite=true#step-108-283).
- Secondly, the current e2e test on `main` does not actually test the latest code of the packages in the `packages` directory as it simply downloads the latest versions from npm. This creates a divide between what's tested and what users should expect when using nightlies or when a new minor is released.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[Internal] [Changed] - Use verdaccio for template e2e test

Pull Request resolved: facebook#34577

Test Plan: `test_js` CI check should pass. Additionally, I have temporarily updated the [PR](facebook#34572) renaming `assets` to `assets-registry` to include the verdaccio changes – the `test_js` passes there, additionally proving merging this PR will unblock us with the rename PRs.

Reviewed By: cipolleschi

Differential Revision: D39723048

Pulled By: cortinico

fbshipit-source-id: aeff3811967360740df3b3dbf1df50e506fb72d8

.circleci/verdaccio.yml

@@ -0,0 +1,44 @@
+storage: ./storage
+auth:
+  htpasswd:
+    file: ./htpasswd
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    max_fails: 40
+    maxage: 30m
+    timeout: 60s
+    fail_timeout: 10m
+    cache: false
+    agent_options:
+      keepAlive: true
+      maxSockets: 40
+      maxFreeSockets: 10
+packages:
+  # Group and isolate all local packages, avoid being proxy from outside
+  '@react-native/*':
+    access: $all
+    publish: $all
+  # The below specific entries can be removed once they are renamed and have the @react-native prefix
+  '@react-native-community/eslint-config':
+    access: $all
+    publish: $all
+  '@react-native-community/eslint-plugin':
+    access: $all
+    publish: $all
+  'react-native-codegen':
+    access: $all
+    publish: $all
+  'react-native-gradle-plugin':
+    access: $all
+    publish: $all
+  '@*/*':
+    access: $all
+    publish: $authenticated
+    proxy: npmjs
+  '**':
+    access: $all
+    publish: $all
+    proxy: npmjs
+logs:
+  - {type: file, path: verdaccio.log, format: json, level: warn}

scripts/run-ci-e2e-tests.js

@@ -23,6 +23,7 @@ const {cd, cp, echo, exec, exit, mv, rm} = require('shelljs');
 const spawn = require('child_process').spawn;
 const argv = require('yargs').argv;
 const path = require('path');
+const {setupVerdaccio} = require('./setup-verdaccio');
 
 const SCRIPTS = __dirname;
 const ROOT = path.normalize(path.join(__dirname, '..'));
@@ -35,6 +36,7 @@ const REACT_NATIVE_APP_DIR = `${REACT_NATIVE_TEMP_DIR}/template`;
 const numberOfRetries = argv.retries || 1;
 let SERVER_PID;
 let APPIUM_PID;
+let VERDACCIO_PID;
 let exitCode;
 
 function describe(message) {
@@ -70,6 +72,19 @@ try {
 
   const REACT_NATIVE_PACKAGE = path.join(ROOT, 'react-native-*.tgz');
 
+  describe('Set up Verdaccio');
+  VERDACCIO_PID = setupVerdaccio();
+
+  describe('Publish packages');
+  const packages = JSON.parse(
+    JSON.parse(exec('yarn --json workspaces info').stdout).data,
+  );
+  Object.keys(packages).forEach(packageName => {
+    exec(
+      `cd ${packages[packageName].location} && npm publish --registry http://localhost:4873 --yes --access public`,
+    );
+  });
+
   describe('Scaffold a basic React Native app from template');
   exec(`rsync -a ${ROOT}/template ${REACT_NATIVE_TEMP_DIR}`);
   cd(REACT_NATIVE_APP_DIR);
@@ -156,9 +171,7 @@ try {
 
     describe(`Start Metro, ${SERVER_PID}`);
     // shelljs exec('', {async: true}) does not emit stdout events, so we rely on good old spawn
-    const packagerProcess = spawn('yarn', ['start', '--max-workers 1'], {
-      env: process.env,
-    });
+    const packagerProcess = spawn('yarn', ['start', '--max-workers 1']);
     SERVER_PID = packagerProcess.pid;
     // wait a bit to allow packager to startup
     exec('sleep 15s');
@@ -288,5 +301,9 @@ try {
     echo(`Killing appium ${APPIUM_PID}`);
     exec(`kill -9 ${APPIUM_PID}`);
   }
+  if (VERDACCIO_PID) {
+    echo(`Killing verdaccio ${VERDACCIO_PID}`);
+    exec(`kill -9 ${VERDACCIO_PID}`);
+  }
 }
 exit(exitCode);

scripts/setup-verdaccio.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+'use strict';
+
+const {exec} = require('shelljs');
+const spawn = require('child_process').spawn;
+
+function setupVerdaccio() {
+  const verdaccioProcess = spawn('npx', [
+    'verdaccio@5.15.3',
+    '--config',
+    '.circleci/verdaccio.yml',
+  ]);
+  const VERDACCIO_PID = verdaccioProcess.pid;
+  exec('npx wait-on@6.0.1 http://localhost:4873');
+  exec('npm set registry http://localhost:4873');
+  exec('echo "//localhost:4873/:_authToken=secretToken" > .npmrc');
+  return VERDACCIO_PID;
+}
+
+module.exports = {
+  setupVerdaccio: setupVerdaccio,
+};

template/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
+    "@react-native-community/eslint-config": "^3.0.0",
     "babel-jest": "^26.6.3",
     "eslint": "^8.19.0",
     "jest": "^26.6.3",