Skip to content

Commit 04dc8ed

Browse files
hoxyqkelset
authored andcommitted
feat(react-native/template): use verdaccio to publish local packages before testing template app (#35444)
Summary: Pull Request resolved: #35444 Changelog: [Internal][Changed] - now using Verdaccio to publish necessary packages for template app - Adds script `/scripts/template/install-dependencies.js`, which incapsulates the logic of installing dependencies of template app - The idea of the script is to run verdaccio and publish all necessary packages to node_modules, since these packages might not yet be present on npm - This should also potentially resolve some template app test failures on CircleCI related to package-ifying Animated, VirtualizedList, FlatList modules Reviewed By: cortinico Differential Revision: D41498086 fbshipit-source-id: 48fbbb1c9334e7a9e7657e6275b7b04f9ce290b5
1 parent e2e6ee3 commit 04dc8ed

File tree

6 files changed

+166
-23
lines changed

6 files changed

+166
-23
lines changed

.circleci/config.yml

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -809,9 +809,7 @@ jobs:
809809
REPO_ROOT=$(pwd)
810810
node ./scripts/set-rn-template-version.js "file:$REPO_ROOT/build/$(cat build/react-native-package-version)"
811811
node cli.js init $PROJECT_NAME --directory "/tmp/$PROJECT_NAME" --template $REPO_ROOT --verbose --skip-install
812-
cd /tmp/$PROJECT_NAME
813-
yarn
814-
812+
node ./scripts/template/install-dependencies.js --reactNativeRootPath $REPO_ROOT --templatePath "/tmp/$PROJECT_NAME"
815813
- run:
816814
name: Build the template application for << parameters.flavor >> with Architecture set to << parameters.architecture >>, and using the << parameters.jsengine>> JS engine.
817815
command: |
@@ -915,12 +913,11 @@ jobs:
915913
PATH_TO_PACKAGE="$REPO_ROOT/build/$PACKAGE"
916914
node ./scripts/set-rn-template-version.js "file:$PATH_TO_PACKAGE"
917915
node cli.js init $PROJECT_NAME --directory "/tmp/$PROJECT_NAME" --template $REPO_ROOT --verbose --skip-install
916+
node ./scripts/template/install-dependencies.js --reactNativeRootPath $REPO_ROOT --templatePath "/tmp/$PROJECT_NAME"
918917
- run:
919918
name: Install iOS dependencies - Configuration << parameters.flavor >>; New Architecture << parameters.architecture >>; JS Engine << parameters.jsengine>>; Flipper << parameters.flipper >>
920919
command: |
921-
cd /tmp/$PROJECT_NAME
922-
yarn install
923-
cd ios
920+
cd /tmp/$PROJECT_NAME/ios
924921
925922
bundle install
926923

scripts/run-ci-e2e-tests.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const {cd, cp, echo, exec, exit, mv, rm} = require('shelljs');
2323
const spawn = require('child_process').spawn;
2424
const argv = require('yargs').argv;
2525
const path = require('path');
26-
const {setupVerdaccio} = require('./setup-verdaccio');
26+
const setupVerdaccio = require('./setup-verdaccio');
2727

2828
const SCRIPTS = __dirname;
2929
const ROOT = path.normalize(path.join(__dirname, '..'));
@@ -34,6 +34,9 @@ const REACT_NATIVE_TEMP_DIR = exec(
3434
).stdout.trim();
3535
const REACT_NATIVE_APP_DIR = `${REACT_NATIVE_TEMP_DIR}/template`;
3636
const numberOfRetries = argv.retries || 1;
37+
38+
const VERDACCIO_CONFIG_PATH = path.join(ROOT, '.circleci/verdaccio.yml');
39+
3740
let SERVER_PID;
3841
let APPIUM_PID;
3942
let VERDACCIO_PID;
@@ -73,7 +76,7 @@ try {
7376
const REACT_NATIVE_PACKAGE = path.join(ROOT, 'react-native-*.tgz');
7477

7578
describe('Set up Verdaccio');
76-
VERDACCIO_PID = setupVerdaccio();
79+
VERDACCIO_PID = setupVerdaccio(ROOT, VERDACCIO_CONFIG_PATH);
7780

7881
describe('Publish packages');
7982
const packages = JSON.parse(

scripts/setup-verdaccio.js

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,41 @@
99

1010
'use strict';
1111

12-
const {exec} = require('shelljs');
13-
const spawn = require('child_process').spawn;
14-
15-
function setupVerdaccio() {
16-
const verdaccioProcess = spawn('npx', [
17-
'verdaccio@5.15.3',
18-
'--config',
19-
'.circleci/verdaccio.yml',
20-
]);
12+
const {execSync, spawn} = require('child_process');
13+
14+
function setupVerdaccio(
15+
reactNativeRootPath, // Path to React Native root folder
16+
verdaccioConfigPath, // Path to Verdaccio config file, which you want to use for bootstrapping Verdaccio
17+
verdaccioStoragePath, // Path to Verdaccio storage, where it should keep packages. Optional. Default value will be decided by your Verdaccio config
18+
) {
19+
if (!reactNativeRootPath) {
20+
throw new Error(
21+
'Path to React Native repo root is not specified. You should provide it as a first argument',
22+
);
23+
}
24+
25+
if (!verdaccioConfigPath) {
26+
throw new Error(
27+
'Path to Verdaccio config is not specified. You should provide it as a second argument',
28+
);
29+
}
30+
31+
const verdaccioProcess = spawn(
32+
'npx',
33+
['verdaccio@5.16.3', '--config', verdaccioConfigPath],
34+
{env: {...process.env, VERDACCIO_STORAGE_PATH: verdaccioStoragePath}},
35+
);
36+
2137
const VERDACCIO_PID = verdaccioProcess.pid;
22-
exec('npx wait-on@6.0.1 http://localhost:4873');
23-
exec('npm set registry http://localhost:4873');
24-
exec('echo "//localhost:4873/:_authToken=secretToken" > .npmrc');
38+
39+
execSync('npx wait-on@6.0.1 http://localhost:4873');
40+
41+
execSync('npm set registry http://localhost:4873');
42+
execSync('echo "//localhost:4873/:_authToken=secretToken" > .npmrc', {
43+
cwd: reactNativeRootPath,
44+
});
45+
2546
return VERDACCIO_PID;
2647
}
2748

28-
module.exports = {
29-
setupVerdaccio: setupVerdaccio,
30-
};
49+
module.exports = setupVerdaccio;

scripts/template/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Why?
2+
3+
The main purpose of `install-dependencies.js` is to bootstrap [Verdaccio](https://verdaccio.org/docs/what-is-verdaccio). It will host all the local packages, which are not yet present on npm registry. In the near future this should help us in keep template tests green, because once we move to [monorepo structure](https://github.com/react-native-community/discussions-and-proposals/pull/480), template app may use some versions of dependencies that are not yet present on npm registry.
4+
5+
## I have migrated some module to package, which is not yet published to npm, how to use it?
6+
7+
First of all, you need to modify [Verdaccio config](https://github.com/facebook/react-native/tree/main/scripts/template/verdaccio.yml):
8+
```diff
9+
packages:
10+
+ '<my-migrated-package-name>':
11+
+ access: $all
12+
+ publish: $all
13+
'@*/*':
14+
access: $all
15+
publish: $authenticated
16+
proxy: npmjs
17+
'**':
18+
access: $all
19+
publish: $all
20+
proxy: npmjs
21+
```
22+
23+
After that, you should modify [install-dependencies script](https://github.com/facebook/react-native/tree/main/scripts/template/install-dependencies.js) to include your package for publishing
24+
25+
```diff
26+
const PACKAGES_TO_PUBLISH_PATHS = [
27+
...
28+
+ "packages/<your-package-folder-name>"
29+
];
30+
```
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
*/
9+
10+
'use strict';
11+
12+
const yargs = require('yargs');
13+
const {execSync, spawnSync} = require('child_process');
14+
const setupVerdaccio = require('../setup-verdaccio');
15+
16+
const {argv} = yargs
17+
.option('r', {
18+
alias: 'reactNativeRootPath',
19+
describe: 'Path to root folder of react-native',
20+
required: true,
21+
})
22+
.option('c', {
23+
alias: 'templatePath',
24+
describe: 'Path to template application folder',
25+
required: true,
26+
})
27+
.strict();
28+
29+
const {reactNativeRootPath, templatePath} = argv;
30+
31+
const VERDACCIO_CONFIG_PATH = `${reactNativeRootPath}/scripts/template/verdaccio.yml`;
32+
const VERDACCIO_STORAGE_PATH = `${templatePath}/node_modules`;
33+
34+
const PACKAGES_TO_PUBLISH_PATHS = [];
35+
36+
function install() {
37+
const VERDACCIO_PID = setupVerdaccio(
38+
reactNativeRootPath,
39+
VERDACCIO_CONFIG_PATH,
40+
VERDACCIO_STORAGE_PATH,
41+
);
42+
process.stdout.write('Bootstrapped Verdaccio \u2705\n');
43+
44+
// Publish all necessary packages...
45+
for (const packagePath of PACKAGES_TO_PUBLISH_PATHS) {
46+
execSync('npm publish --registry http://localhost:4873 --access public', {
47+
cwd: `${reactNativeRootPath}/${packagePath}`,
48+
stdio: [process.stdin, process.stdout, process.stderr],
49+
});
50+
51+
process.stdout.write(`Published /${packagePath} to proxy \u2705\n`);
52+
}
53+
54+
spawnSync('yarn', ['install'], {
55+
cwd: templatePath,
56+
stdio: [process.stdin, process.stdout, process.stderr],
57+
});
58+
process.stdout.write('Installed dependencies via Yarn \u2705\n');
59+
60+
process.stdout.write(`Killing verdaccio. PID — ${VERDACCIO_PID}...\n`);
61+
execSync(`kill -9 ${VERDACCIO_PID}`);
62+
process.stdout.write('Killed Verdaccio process \u2705\n');
63+
64+
process.exit();
65+
}
66+
67+
install();

scripts/template/verdaccio.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
storage: ./storage
2+
auth:
3+
htpasswd:
4+
file: ./htpasswd
5+
uplinks:
6+
npmjs:
7+
url: https://registry.npmjs.org/
8+
max_fails: 40
9+
maxage: 30m
10+
timeout: 60s
11+
fail_timeout: 10m
12+
cache: false
13+
agent_options:
14+
keepAlive: true
15+
maxSockets: 40
16+
maxFreeSockets: 10
17+
packages:
18+
'@*/*':
19+
access: $all
20+
publish: $authenticated
21+
proxy: npmjs
22+
'**':
23+
access: $all
24+
publish: $all
25+
proxy: npmjs
26+
logs:
27+
- {type: file, path: verdaccio.log, format: json, level: warn}

0 commit comments

Comments
 (0)