Connectivity GUI App: Please include minimum or recommended nodejs and yarn version

[amircybersec]

I am running Ubuntu (uname -a Linux 17Z990-R-AAS7U1 6.2.0-34-generic #34~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Sep 7 13:12:03 UTC 2 x86_64 x86_64 x86_64 GNU/Linux) and managed to get the following working to run the Android Connectivity Mobile App:

> yarn --version 
1.22.19
> npm -v
9.8.0
> node -v
v20.5.1

I had to fiddle with it to get it working. The main contributing factor is that Nodejs version on Ubuntu default repos are outdated and node needs to be re-installed with the new way! Anyways, I thought it might be helpful to have a record of successful installation, and perhaps provide recommendations for minimum version numbers.

[fortuna]

The SDK doesn't use Node.js. That's for the connectivity graphical app. We need to add that to the app README.

Can you send a PR to update the README? /cc @daniellacosse

[daniellacosse]

@amircybersec does nvm work on ubuntu?

[amircybersec]

@daniellacosse I did some research on this and here's my findings:

Installing nvm

Yes, nvm works on Ubuntu. I did not have it installed initially but I also believe that is the way to go (at least on Ubuntu LTS / Jammy Jellyfish). nvm installation instructions are provided here, but basically it is just one line:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

The above bash script also automatically updates ~/.bashrc' to set the NVM_DIR` and other environment variables. Installation can be verified by running:

$ nvm -v
0.39.5

After installing nvm, I used the following commands to install node version 20:

$ nvm install 20
$ nvm use 20
$ node -v
v20.8.0

We can verify that node has been indeed installed by nvm (under $HOME/.nvm):

which node
/home/$USER/.nvm/versions/node/v20.8.0/bin/node

Installing Yarn

The preferred way to manage Yarn is by-project and through Corepack, a tool shipped by default with Node.js. Modern releases of Yarn aren't meant to be installed globally, or from npm (i.e. npm install --global yarn).

$ corepack -v
0.20.0

To install yarn in project directory, I did the following steps:

$ corepack enable
$ yarn set version stable
$ yarn install
$ yarn -v
3.6.4

[amircybersec]

Also seems like I am using Yarn 2 (Yarn Modern, Yarn Berry) which is more recent that Yarn Classic but it has some nuances....

[daniellacosse]

I've had difficulty with corepack on mac, but I'm glad to see it works for you. The usage of Yarn Berry is intentional! Do you think you could add your instructions to the README and I'll review?

[amircybersec]

I am new to all this and I just wanted to document what ended up working on my machine. It has been a bit confusing to navigate the yarn stuff. Also, on my machine I have to do 'yarn install' every time I switch branch. Yarn has this thing called zero install which apparently addresses that issue but it would require committing some files to git.

https://yarnpkg.com/features/caching#zero-installs

I am still working out through some of the details but will definitely do a PR to README docs once I get more clarity on best install strategy.

[daniellacosse]

Yeah you get in the habit of just running yarn reset constantly haha. Looking forward to your PR!

[amircybersec]

I got my mac a few days ago and managed to get the app built for iOS. Along the way, I ran into some minor setup issues and fixes that I wanted to share here. I will do a PR for this issue to reflect the necessary code tweaks and readme update.

Yarn versions

Yarn 3.6.1 does not seem to work well for me and I get the following error message. I can't fully understand the root cause.

amir@amirs-Laptop outline-connectivity-app % yarn set version 3.6.1        
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.6.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.6.1.cjs
➤ YN0000: Done in 0s 352ms
amir@amirs-Laptop outline-connectivity-app % yarn install       
➤ YN0000: ┌ Resolution step
➤ YN0060: │ app_mobile@workspace:app_mobile provides @capacitor/core (peddcb) with version 5.2.2, which doesn't satisfy what @capacitor/android requests
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 324ms

amir@amirs-Laptop outline-connectivity-app % yarn watch:ios
[frontend] Type Error: Cannot read properties of undefined (reading '/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.pnp.cjs')
[frontend]     at c3 (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:12692)
[frontend]     at a0e (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:13173)
[frontend]     at Object.mf (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:13402)
[frontend]     at /Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:694:4611
[frontend]     at Object.Ta (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:10714)
[frontend]     at wl.findPackageLocation (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:694:4566)
[frontend]     at /Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1264
[frontend]     at Function.from (<anonymous>)
[frontend]     at LB (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1008)
[frontend]     at d9 (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1589)
[ios] Type Error: Cannot read properties of undefined (reading '/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.pnp.cjs')
[ios]     at c3 (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:12692)
[ios]     at a0e (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:13173)
[ios]     at Object.mf (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:13402)
[ios]     at /Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:694:4611
[ios]     at Object.Ta (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:390:10714)
[ios]     at wl.findPackageLocation (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:694:4566)
[ios]     at /Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1264
[ios]     at Function.from (<anonymous>)
[ios]     at LB (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1008)
[ios]     at Object.d9 (/Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/.yarn/releases/yarn-3.6.1.cjs:423:1589)
[frontend] yarn app_mobile watch:frontend exited with code 1
[ios] yarn workspaces foreach -piv run watch:ios exited with code 1

Changing the version to Yarn 3.6.4 seems to address this issue and I don't get the same error with that version. I have tested this version on Ubuntu LTS and it worked well for me.

Yarn 4

I also tested yarn 4.0.1 and I got the following error:

amir@amirs-Laptop outline-connectivity-app % yarn watch:ios         
[ios] Usage Error: Invalid option schema: missing at least one property from "all", "recursive", "since", or "worktree"
[ios] 
[ios] $ yarn workspaces foreach [--from #0] [-A,--all] [-R,--recursive] [-W,--worktree] [-v,--verbose] [-p,--parallel] [-i,--interlaced] [-j,--jobs #0] [-t,--topological] [--topological-dev] [--include #0] [--exclude #0] [--no-private] [--since] [-n,--dry-run] <commandName> ...
[ios] yarn workspaces foreach -piv run watch:ios exited with code 1

It seems like that in yarn 4, yarn workspaces foreach now requires one of --all, --recursive, --since, or --worktree to be explicitly specified; the previous default was --worktree, but it was rarely what users expected.

Solution:

Adding -W (--worktree) flag to the commands in package.json addresses this issue:

"build": "yarn workspaces foreach -ptivW run build",

Yarn workspaces

To get things working with Yarn 3.4.6, I had to install yarn workspaces plugin manually but seems like this step is not longer required in Yarn v4 as it is included by default:

yarnpkg/berry#4367 (comment)

Fix (only yarn versions < 4)

yarn plugin import workspace-tools

Vite

To get vite working, I had to manually add esbuild package. I did not run into this issue on Ubuntu as far as I remember. Not sure why this didn't get installed automatically.
vitejs/vite#5187

Fix:

yarn add -D [email protected] (& update yarn lock file)

Xcode hiccups

Since this was the first time I was setting up xcode on my machine, I had some minor hiccups along the way. I thought it could be helpful to have a note of them:

When building iOS app, I got the following error:

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

Reason explaind here: nodejs/node-gyp#569 (comment)

Fix:

Run sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

Sandbox error:

Sandbox: bash(40813) deny(1) file-read-data /Users/amir/Documents/Outline/outline-sdk/x/examples/outline-connectivity-app/app_mobile/ios/App/Pods/Target Support Files/Pods-App/Pods-App-frameworks.sh

Fix:

Check that ENABLE_USER_SCRIPT_SANDBOXING is disabled in the project's build settings.

[daniellacosse]

@amircybersec

I think we can alleviate most of the things you ran into by upgrading to yarn 4, updating the CLI calls and install esbuild explicitly. I think that setting you found can be committed as well (the one that turns off script sandboxing). Feel free to make a PR and add me as reviewer!

Xcode is just generally kind of annoying to work with, thanks for documenting the xcode-select issue.