Installing Js Stack

First time setup

The following will get you set up with node, yarn & webpack. You can skip steps like installing nvm if they are not required.

Install nvm https://github.com/nvm-sh/nvm#install--update-script

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

Close and re-open terminal session before continuing

Install node 16

nvm install 16.13.1

Set as default

nvm use 16.13.1
nvm alias default 16.13.1

Optional: remove old versions

nvm ls
nvm uninstall <version to remove>

Update npm (NOTE: Doing so will break things)

npm update -g npm

npm login

The credentials for npm login are stored on the 1Password, login as warmlyyours and use the webmaster email when prompted for email

  npm login      #This will open a prompt, open the url in your browser (copy the url if installing on a server and run it on your local machine)

Now you should have node & npm configured. Next we need to setup yarn; continue below.

Recovery/Upgrade Steps

Sometimes your node_modules can get in a state were you need a fresh install. The following steps should put you in a valid state. It is ok to run these periodically, this will (a) keep yarn up to date and (b) clean up unneeded compiled webpack files.

Install a bunch of global scripts that you need

You need to do this every time you change node versions.

npm i -g webpack@latest webpack-dev-server@latest webpack-cli@latest yarn agentkeepalive

Ensure compatibility with coworkers who want to use yarn

You will most likely start here if you are recovering from an invalid build. (This is like npm update)

YARN_IGNORE_NODE=1 yarn set version 3.1.1
yarn plugin import workspace-tools
yarn plugin import plugin-interactive-tools

Verify .yarnrc.yml looks like this

nodeLinker: node-modules

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmAuthToken: 4A42EAC4-7723-4FF7-AA62-8074642D0678
    npmRegistryServer: "https://npm.fontawesome.com/"

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

yarnPath: .yarn/releases/yarn-3.1.1.cjs

Reset everything

It is ok if this fails (it means that there is nothing to clean). This removes old webpack builds and node_modules

yarn run clean

#####Install with yarn
The next step will not work if you don't do a basic install beforehand.

yarn install

#####Use the following ONLY if you are upgrading from npm or recovering from an invalid build.
This runs the clean script above fol

yarn clean-install

Yarn Build

This runs yarn install and initiates a development webpack build. You (ideally) should do this every time you pull from git. I even created up.sh to: pull from git and concurrently run yarn build & db:migrate.

yarn build

Yarn build for production

Sometimes you want to do a production webpack build. This can be useful if you are testing for site speed or need local mapping files for styles or debugging.

yarn wp:soft

All of the scripts above can be edited in package.json under scripts.