Replace npm with pnpm

[sean-zlai]

Summary

pnpm vs npm

• Pros
  • Integrated (interactive) version manager
    • pnpm up-deps / (aliased pnpm update -r -i --latest)
    • npm outdated / npm update --save-dev --save only adhere to package.json semver
      • Must manually modify versions for major versions (ex. Vite 5 => 6)
      • Can use npx npm-check-updates package to provide similar functionality
  • Efficient Disk space
  • Workspace support
    • npm added support but not aware of any major projects using it
  • Typically faster installs than npm
  • Slightly better developer ergonomics (pnpm dev vs npm run dev)
  • Used by many large projects/companies (Vite, Svelte, etc)
• Cons
  • Additional install (npm included with Node.js)
  • Synk support is currently in preview
  • package version overrides not currently applying with Synk (configuration, preview status of integration, ...). Likely because snyk is configured to scan package-lock.json (npm) and not pnpm-lock.yaml (pnpm). (here)

---

Checklist

• Added Unit Tests
• Covered by existing CI
• Integration tested
• Documentation update

Summary by CodeRabbit

• Documentation

  • Updated README files to reflect the use of pnpm as the recommended package manager, including installation instructions and best practices.

• New Features

  • Transitioned scripts in the project to utilize pnpm for various tasks including development, building, and testing.

• Configuration

  • Modified Playwright configuration and other build configurations to use pnpm for starting the web server and managing dependencies.

• Dependency Updates

  • Updated Spark dependency version from 3.5.0 to 3.5.1 and Jackson version from 2.15.1 to 2.15.2.

[coderabbitai]

Walkthrough

This pull request updates the frontend project configuration to transition from npm to pnpm as the package manager. The changes are comprehensive, affecting multiple configuration files including README.md, package.json, and playwright.config.ts. The modifications ensure consistent use of pnpm across installation instructions, script definitions, and test configurations. Additionally, the build.sbt file has been updated to reflect these changes and to update dependency versions. No functional changes to the project's core logic were introduced, only package management tooling updates.

Changes

File	Change Summary
frontend/README.md	Replaced all npm references with pnpm in installation, development, and testing instructions.
frontend/package.json	Updated scripts to use pnpm instead of npm for codegen, dev, build, and test commands.
frontend/playwright.config.ts	Modified web server startup command from npm to pnpm.
build.sbt	Updated frontend build process to use pnpm; changed dependency versions for Spark and Jackson.
docker-init/README.md	Updated command to start the development server from npm to pnpm.

Possibly related PRs

• Create svelte project and build it using play for deployment #19: This PR involves changes to the frontend directory, specifically updating the build process to utilize pnpm, which aligns with the changes made in the main PR regarding the transition from npm to pnpm.
• Wire up Play frontend + server in docker setup #24: This PR modifies the docker-init/README.md to reflect the use of pnpm for starting the development server, similar to the changes in the main PR.
• Frontend: Build, wireframe, config #26: The updates in this PR include changes to the frontend/package.json to incorporate pnpm, which directly relates to the main PR's focus on replacing npm with pnpm.
• Frontend tests #32: This PR adds a section in the frontend/README.md about running tests, which emphasizes the use of npm commands that have been updated to pnpm in the main PR, indicating a related context.
• Tweak obs demo docker init image to pull out sbt steps outside docker build #102: This PR modifies the Dockerfile and build process, which may indirectly relate to the changes in package management in the main PR, as it affects how the frontend is built and served.
• asdf to install runtime versions for chronon #106: While this PR focuses on tool versions, it may relate to the overall development environment setup, which includes the package manager changes in the main PR.

Suggested reviewers

• piyush-zlai
• nikhil-zlai
• chewy-zlai

Poem

🐰 Hop, hop, pnpm's the way,
Npm steps aside today!
Scripts now dance with pnpm's grace,
Faster builds at lightning pace.
Package management's new delight! 📦✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 02779d3 and 11f662a.

⛔ Files ignored due to path filters (1)

• frontend/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

• frontend/package.json (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/package.json

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

frontend/package.json (1)

Line range hint 1-150: Consider utilizing pnpm workspace features.

Since one of the advantages mentioned in the PR description is workspace support, consider leveraging pnpm workspaces to better manage the frontend and potential future packages.

This would involve:

1. Creating a pnpm-workspace.yaml in the root
2. Moving shared dependencies to the root package.json
3. Utilizing workspace protocols in dependency declarations

frontend/README.md (1)

10-10: Specify the required pnpm version.

Consider adding the minimum required pnpm version to the prerequisites section.

-- [pnpm](https://pnpm.io/installation) - fast and disk space efficient package manager
+- [pnpm](https://pnpm.io/installation) (v8.0.0 or higher) - fast and disk space efficient package manager

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 2b7efd8 and 39133b7.

⛔ Files ignored due to path filters (2)

• frontend/package-lock.json is excluded by !**/package-lock.json
• frontend/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

• frontend/README.md (6 hunks)
• frontend/package.json (1 hunks)
• frontend/playwright.config.ts (1 hunks)

🔇 Additional comments (4)

frontend/playwright.config.ts (1)

5-5: LGTM! Verify the preview server port.

The command update from npm to pnpm is correct. Please verify that the preview server still binds to port 4173 with pnpm.

✅ Verification successful

LGTM! Port configuration is correctly maintained

The preview server port is explicitly set to 4173 in the playwright.config.ts file and this configuration remains unchanged with the pnpm command update. The port setting is independent of the package manager being used.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if the preview server port is configured in vite.config
rg -A 2 "preview:" frontend/vite.config.*

Length of output: 42

---

Script:

#!/bin/bash
# Let's check the vite config file directly and any preview configuration
cat frontend/vite.config.ts

Length of output: 516

---

Script:

#!/bin/bash
# Also check the playwright config for port settings
cat frontend/playwright.config.ts

Length of output: 312

---

Script:

#!/bin/bash
# Search for any preview port configuration in the codebase
rg -i "preview.*port|port.*preview" frontend/

Length of output: 47

frontend/package.json (2)

6-8: LGTM! Script updates are consistent.

The npm to pnpm conversion in scripts is correct and comprehensive.

Also applies to: 11-11

---

Line range hint 1-150: Verify all npm commands are replaced.

Let's ensure no npm commands were missed in the conversion.

✅ Verification successful

All package manager commands in frontend have been replaced with pnpm

The only remaining npm reference in the frontend directory is in the pnpm-lock.yaml file, which is expected as it contains metadata about package compatibility with different package managers. The single npm command outside frontend is in docker-init/compose.yaml for a different service.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for any remaining npm commands
rg --type-add 'config:*.{json,yaml,yml,js,ts}' -t config 'npm' .

Length of output: 810

frontend/README.md (1)

29-29: LGTM! Documentation updates are comprehensive.

All npm commands have been correctly updated to their pnpm equivalents throughout the documentation.

Also applies to: 56-56, 66-66, 76-76, 88-88, 96-96, 102-102, 110-110, 116-116, 122-122, 130-130, 136-136, 144-144, 150-150, 155-155

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

docker-init/README.md (1)

36-36: Format the URL as a proper markdown link

The URL should be properly formatted as a markdown link to improve readability and follow markdown best practices.

-The **frontend** is served at: http://localhost:3000. This serves statically built code - no live dev server. `cd frontend; pnpm run dev` for a live dev server.
+The **frontend** is served at: [http://localhost:3000](http://localhost:3000). This serves statically built code - no live dev server. `cd frontend; pnpm run dev` for a live dev server.

🧰 Tools

🪛 Markdownlint (0.37.0)

36-36: null
Bare URL used

(MD034, no-bare-urls)

build.sbt (1)

243-246: LGTM! Consider enhancing error messages

The transition from npm to pnpm is implemented correctly. However, the error message could be more descriptive to help with debugging.

-        sys.error("pnpm install failed!")
+        sys.error(s"pnpm install failed with exit code: $pnpmCiResult. Please ensure pnpm is installed and the lockfile is up to date.")

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 39133b7 and 02779d3.

📒 Files selected for processing (2)

• build.sbt (1 hunks)
• docker-init/README.md (1 hunks)

🧰 Additional context used

🪛 Markdownlint (0.37.0)

docker-init/README.md

36-36: null
Bare URL used

(MD034, no-bare-urls)

[coderabbitai]

💡 Codebase verification

Update npm reference in service/README.md to use pnpm

Found one remaining npm reference that needs to be updated:

• In service/README.md: The instruction to install statsd-logger uses npm install -g statsd-logger and should be updated to use pnpm global install syntax

🔗 Analysis chain

Verify all npm references have been updated to pnpm

Let's ensure all npm references in the documentation have been updated to pnpm.

---

Let's examine the content of these files to see the specific npm references.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any remaining npm references in markdown files
echo "Searching for npm references in markdown files..."
rg --type md "npm" -l

Length of output: 189

---

Script:

#!/bin/bash
# Check the content of npm references in each markdown file
echo "=== docker-init/README.md ==="
rg -A 2 -B 2 "npm" docker-init/README.md

echo -e "\n=== frontend/README.md ==="
rg -A 2 -B 2 "npm" frontend/README.md

echo -e "\n=== service/README.md ==="
rg -A 2 -B 2 "npm" service/README.md

Length of output: 1814

🧰 Tools

🪛 Markdownlint (0.37.0)

36-36: null
Bare URL used

(MD034, no-bare-urls)

[coderabbitai]

💡 Codebase verification

CI environment needs pnpm configuration

The project is indeed using pnpm as the package manager (confirmed by package.json scripts and presence of pnpm-lock.yaml), but there's no CI configuration detected. This poses a risk for the build process.

• No CI workflow files were found in common locations (.github/workflows/, .gitlab-ci.yml, etc.)
• A pnpm-lock.yaml exists at frontend/pnpm-lock.yaml, confirming pnpm usage
• Package.json shows heavy reliance on pnpm for various scripts (build, dev, test, etc.)

Action needed: Add CI configuration that includes:

• pnpm installation step
• Proper caching of pnpm dependencies
• Execution of the build command with pnpm

🔗 Analysis chain

Verify CI environment compatibility

The build process now relies on pnpm. We should ensure that the CI environment has pnpm installed and properly configured.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if CI configuration files exist and contain pnpm setup
echo "Checking CI configuration files..."
fd -t f "^\.github/workflows/.*\.ya?ml$|^\.gitlab-ci\.ya?ml$|^\.circleci/.*\.ya?ml$|^azure-pipelines\.ya?ml$" -x cat {} \; | rg "pnpm"

# Check if there's a pnpm setup action or installation step
fd -t f "^\.github/workflows/.*\.ya?ml$" -x rg "actions/setup-node|pnpm install" {} \;

Length of output: 516

---

Script:

#!/bin/bash
# Check CI configuration files with hidden flag
echo "Checking CI configuration files..."
fd -H -t f "^\.github/workflows/.*\.ya?ml$|^\.gitlab-ci\.ya?ml$|^\.circleci/.*\.ya?ml$|^azure-pipelines\.ya?ml$" -x cat {} \;

# Also check package.json for any pnpm-related configurations
echo -e "\nChecking package.json in frontend directory..."
fd -H "package.json" frontend -x cat {} \;

# Check if there's any pnpm-lock.yaml file
echo -e "\nChecking for pnpm-lock.yaml..."
fd -H "pnpm-lock.yaml"

Length of output: 2888

[sean-zlai]

@ken-zlai verified docker-init/build.sh --all runs successfully (localhost:3000)

[ken-zlai]

@sean-zlai Nice stuff! Working well for me. I just had to add the pnpm style overrides.

[sean-zlai]

@sean-zlai Nice stuff! Working well for me. I just had to add the pnpm style overrides.

Thanks! I lost that commit after a bad rebase

[sean-zlai]

Reverted via #144 due to Snyk UI pnpm.overrides support at this time (couldn't find a way to make it work)