Use npx for calling JS apps

[ChrisWiegman]

Tasks

• I have signed a Contributor License Agreement (CLA) with WP Engine.
• If a code change, I have written testing instructions that the whole team & outside contributors can understand.
• I have written and included a comprehensive changeset to properly document the changes I've made.

Description

With our mono repo we're hitting numerous issues in calling scripts such as the faust cli in various workspaces when work on the project itself (see https://github.com/wpengine/faustjs/actions/runs/9404217613/job/25902618771 for an example). This causes lost time and frustration and it isn't necessary.

To combat this, this PR replaces direct calls to apps such as faust, next and more by using npx to call the apps. This ensures they can be found in the mono repo, changes nothing for existing scripts that already work and reduces setup time and confusion when cloning the repo fresh or working with various packages such as the examples.

Testing

Testing can be accomplished with existing CI tools

[changeset-bot]

⚠️ No Changeset found

Latest commit: 03a071f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[theodesp]

@ChrisWiegman I took a look at this. It looks like it's related to this issue:
npm/cli#4591

However I think the solution is simpler. We just have to run npm i after we use npm run build to install the faust cli binary to the project after it was build.

Here is the workflow that I used:

% git clone git@github.com:wpengine/faustjs.git faust2
Cloning into 'faust2'...
remote: Enumerating objects: 16369, done.
remote: Counting objects: 100% (1440/1440), done.
remote: Compressing objects: 100% (746/746), done.
remote: Total 16369 (delta 818), reused 1088 (delta 592), pack-reused 14929
Receiving objects: 100% (16369/16369), 41.77 MiB | 11.55 MiB/s, done.
Resolving deltas: 100% (9250/9250), done.
7s theo.despoudis ~/workspace
% cd faust2 
theo.despoudis ~/workspace/faust2
% npm i                         
% npm run dev -w examples/next/faustwp-getting-started                                                                                                                                                                           (canary)

> @faustwp/getting-started-example@0.1.0 dev
> faust dev

sh: faust: command not found
npm ERR! Lifecycle script `dev` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @faustwp/getting-started-example@0.1.0 
npm ERR!   at location: /Users/theo.despoudis/workspace/faust2/examples/next/faustwp-getting-started

% npm i                                                                                                                                                                  (canary)
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@faustwp/block-support-example@0.2.0',
npm WARN EBADENGINE   required: { node: '>=18', npm: '>=10' },
npm WARN EBADENGINE   current: { node: 'v18.17.0', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@faustwp/block-support-example@0.2.0',
npm WARN EBADENGINE   required: { node: '>=18', npm: '>=10' },
npm WARN EBADENGINE   current: { node: 'v18.17.0', npm: '9.6.7' }
npm WARN EBADENGINE }

changed 1 package, and audited 2861 packages in 2s

311 packages are looking for funding
  run `npm fund` for details

2 vulnerabilities (1 low, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


% npm run dev -w examples/next/block-support                                                                                                                             (canary)

> @faustwp/block-support-example@0.2.0 predev
> faust generatePossibleTypes && faust generateGlobalStylesheet

error - Could not find NEXT_PUBLIC_WORDPRESS_URL environment variable.
npm ERR! Lifecycle script `dev` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @faustwp/block-support-example@0.2.0 
npm ERR!   at location: /Users/theo.despoudis/workspace/faust2/examples/next/block-support 

We probably need to just update the DEVELOPMENT.md file to include this step.

[ChrisWiegman]

After chatting with @theodesp on this, I'm going to close it and re-open with a documentation approach.