The Fade Room Inc.

Setting up this repo

(1) Create a root .npmrc file

• before installing the dependencies from the root (cwd = this directory, where package.json is named @fade/root) be sure to add the following to a .npmrc file

# Required -- include these two settings no matter what
enable-pre-post-scripts=true
node-linker=hoisted

# Optional -- populate these values to publish packages to the npm registry
//registry.npmjs.org/:_authToken=
//registry.npmjs.org/:_password=
//registry.npmjs.org/:username=

---

(2) Run install from the root

• if you have pnpm installed run the following command

pnpm install

• if you don't have pnpm installed then continue reading otherwise skip to the next section (step (3))

Install pnpm on Windows

• Run the following command

npm install -g pnpm

• alternatively, open powershell as an administrator and run the following command

Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression

• However, the pnpm docs warn that Windows Defender might block their executable when installing via powershell. Therefore, using npm or corepack to install pnpm is advisable

• Finally, add the path for pnpm to the system environment on your device

  • press the windows key or click on the start button
  • search for "system environment" and select "Edit the system environment variables" -- this will open the "System Properties" window
  • select the "Advanced" tab and click on the "Environmental Variables..." button
  • Double-click "Path" in the "User variables for username"
  • check to see if you already have %PNPM_HOME% set
  • if %PNPM_PATH% is not present click on the "New" button
  • in the variable name field input %PNPM_PATH%; in the variable value field input C:\Users\username\AppData\Local\pnpm and be sure to replace username with the username for your device
  • Then, repeat these same steps to add the %PNPM_PATH% to the "System Variables" on your device

• You're now ready to install the pnpm workspace dependencies

pnpm install

Install pnpm on Mac, Linux, or WSL

• if you use Mac or Linux (or WSL) run one of the following commands in your terminal to install pnpm

curl -fsSL https://get.pnpm.io/install.sh | sh -

wget -qO- https://get.pnpm.io/install.sh | sh -

brew install pnpm

npm install -g pnpm

• You're now ready to install the pnpm workspace dependencies

pnpm install

Troubleshooting pnpm installation

• see the pnpm docs troubleshooting section for more info

---

(3) Ensure pnpm is updated to its latest version

• There are two options for doing this

(1)

pnpm self-update

(2)

pnpm latest:pnpm

where option (2) executes the following command

corepack use pnpm@latest

---

(4) Configuring secrets

Link to the existing project

• ensure that vercel is globally installed with pnpm by running

pnpm add vercel --global

• next, cd into apps/web and run the following command

vercel login

• Once logged in with vercel (and with access to the Wcd vercel pro account) run

vercel link

• This will bring up a prompt that first asks

 Set up “~/wcd/faderoom-github/faderoom/apps/web”? [Y/n] 

• type Y and hit enter; the next prompt should look something like

? Which scope should contain your project? 
● Wcd 
○ Andrew Ross' projects 

• use the up and down arrow keys to select the scope; for our purposes the correct scope is Wcd, select that option and hit enter to bring up the next prompt

? Link to existing project? [y/N]

• type Y and hit enter; the next prompt will ask for the name of the existing Wcd project

? What’s the name of your existing project? 

• type thefaderoominc and hit enter; your repo is now linked to the vercel project and a .vercel directory should be output in the root

• Summary

? Set up “~/wcd/faderoom-github/faderoom/apps/web”? [Y/n] y
? Which scope should contain your project? Wcd
? Link to existing project? [y/N] y
? What’s the name of your existing project? thefaderoominc
✅  Linked to wcd/thefaderoominc (created .vercel)

Generate .env.local

• With the vercel project linked we can now generate the environmental variables

vercel env pull

• The following output should appear in your terminal

vercel env pull
> Downloading `development` Environment Variables for Project thefaderoominc
✅  Created .env.local file  [129ms]

• this generates a .env.local file

• create another file named .env and copy-paste the contents of .env.local into .env (both are .gitignored)

• important - ensure that the .env and .env.local files are in the root of the apps/web directory

---

(5) Run the configure command once in the apps/web directory

• Before spinning up the dev server locally, be sure to run the following command while your current woring directory is apps/web

pnpm configure

• This command generates a number of files via the @d0paminedriven/booksy cli-package

---

(6) fire up the dev server of the apps/web project

• after running the configure command, cd out of the apps/web directory and return to the root

cd ../..

• run the following command to fire up the fade room web project

pnpm run:web

• this executes the following script

turbo run dev --continue --filter=@fade/web

• success ✔ navigate to http://localhost:3007

---

(7) Tip

• see extensions.json in the root .vscode directory for extension recommendations to enhance your coding experience