Skip to content

Conversation

@pyanderson
Copy link
Contributor

@pyanderson pyanderson commented Oct 10, 2025

Description

This PR migrates the frontend package manager from npm to pnpm.

The following updates were made:

  • Replaced all npm commands in scripts and documentation with pnpm equivalents.
  • Added the lockfile pnpm-lock.yaml.
  • Updated CI/CD configurations to use pnpm.
  • Verified that all frontend dependencies install and build correctly using pnpm.

Motivation and Context

Migrating to pnpm provides several advantages:

  • Faster installations due to efficient content-addressable storage.
  • Aligns the project with modern dependency management best practices.

Screenshots (if appropriate):

Steps to reproduce (if appropriate):

  • Create a new project using this branch as the template:
django-admin startproject new_styling --extension py,json,yml,yaml,toml --name Dockerfile,README.md,.env.example,.gitignore,Makefile,.npmrc --template=https://github.com/vintasoftware/django-react-boilerplate/archive/refs/heads/migrate-npm-to-pnpm.zip
  • Follow the setup instructions and test it locally;

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires documentation updates.
  • I have updated the documentation accordingly.
  • My change requires dependencies updates.
  • I have updated the dependencies accordingly.

Summary by Sourcery

Migrate the project’s frontend package management from npm to pnpm and update all related tooling, workflows, and documentation to use pnpm commands

New Features:

  • Switch the frontend package manager from npm to pnpm and add pnpm-lock.yaml

Enhancements:

  • Configure CI/CD workflows and shared build action to install and cache pnpm store
  • Update Dockerfiles, Makefile, and render_build.sh to enable corepack and run pnpm commands
  • Adjust webpack configuration to include Node polyfills and provide Buffer globally
  • Upgrade frontend dependencies and bump various Sentry and utility packages

Documentation:

  • Replace all npm command examples with pnpm equivalents in README setup instructions

Summary by Sourcery

Switch the project’s frontend package manager from npm to pnpm by adding a pnpm lockfile, updating all build and deployment scripts, CI workflows, Dockerfiles, Makefile, and documentation to use pnpm commands, and bump frontend dependencies accordingly.

New Features:

  • Add pnpm-lock.yaml and configure project to use pnpm as the frontend package manager.

Enhancements:

  • Update GitHub Actions workflows and shared build steps to install pnpm, cache the pnpm store, and run frontend tasks with pnpm.
  • Modify Makefile, Dockerfiles, and render_build.sh to enable corepack and replace npm commands with pnpm equivalents.
  • Adjust webpack configuration to include Node polyfills and provide Buffer globally.
  • Upgrade various frontend dependencies (including Sentry and utility packages) to compatible versions.

Documentation:

  • Replace npm command examples with pnpm equivalents in README.md.

Tests:

  • Run frontend tests using pnpm in CI pipelines.

@sourcery-ai
Copy link

sourcery-ai bot commented Oct 10, 2025

Reviewer's Guide

This PR replaces npm with pnpm as the frontend package manager, updating all scripts, CI/CD workflows, Docker and build configurations to use pnpm, and adding the pnpm lockfile; it also upgrades various frontend dependencies and adjusts webpack for Node polyfills.

File-Level Changes

Change Details Files
Swap npm commands for pnpm across scripts, docs, and Docker
  • Updated package.json scripts to use pnpm
  • Replaced npm invocations in Makefile, render_build.sh, and Dockerfile with pnpm
  • Changed README install and command examples to pnpm equivalents
package.json
Makefile
render_build.sh
frontend/Dockerfile
README.md
Modify CI/CD workflows to install and cache pnpm store
  • Added pnpm/action-setup and verify steps
  • Computed lockfile hash for cache key
  • Changed cache actions to target ~/.pnpm-store
.github/workflows/proj_main.yml
.github/workflows/shared-build/action.yml
Introduce pnpm lockfile and packageManager config
  • Added pnpm-lock.yaml to repository
  • Created .npmrc specifying pnpm as packageManager
pnpm-lock.yaml
.npmrc
Upgrade frontend dependencies and add Node polyfills
  • Bumped Sentry, axios, and utility package versions
  • Inserted node-polyfill-webpack-plugin and ProvidePlugin(Buffer) in webpack
  • Added several polyfill and buffer-related devDependencies
package.json
webpack.config.js

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

sourcery-ai[bot]
sourcery-ai bot previously requested changes Oct 10, 2025
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there - I've reviewed your changes and found some issues that need to be addressed.

Blocking issues:

  • An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload. (link)
  • An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload. (link)
  • An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload. (link)
Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location> `frontend/Dockerfile:6` </location>
<code_context>
-RUN npm install
+ADD package.json pnpm-lock.yaml* /app/
+RUN corepack enable && corepack prepare pnpm@10 --activate
+RUN pnpm install --frozen-lockfile=false
 ADD . /app/

</code_context>

<issue_to_address>
**suggestion:** Consider using --frozen-lockfile=true for reproducible builds.

Using --frozen-lockfile=true ensures dependencies are installed exactly as specified, preventing unintended updates and improving build consistency.

```suggestion
RUN pnpm install --frozen-lockfile=true
```
</issue_to_address>

### Comment 2
<location> `Makefile:55-56` </location>
<code_context>
 docker_backend_update_schema:
 	docker compose run --rm backend python manage.py spectacular --color --file schema.yml

+docker_frontend_shell:
+	docker compose run --rm frontend sh
+
 docker_frontend_update_api:
</code_context>

<issue_to_address>
**suggestion:** Adding docker_frontend_shell target is useful; consider documenting its intended use.

A short comment explaining the target's purpose would assist future maintainers.

```suggestion
# Opens a shell in the frontend container for debugging or manual commands.
docker_frontend_shell:
	docker compose run --rm frontend sh
```
</issue_to_address>

### Comment 3
<location> `proj_main.yml:40` </location>
<code_context>
       with:
         node-version: "20.13"
-    - name: Cache node modules
+        cache: "pnpm"
+
+    - name: Install pnpm
</code_context>

<issue_to_address>
**suggestion (performance):** Enabling pnpm cache is beneficial, but ensure cache invalidation is handled.

Include a hash of pnpm-lock.yaml in the cache key to prevent using outdated dependencies when the lockfile changes.
</issue_to_address>

### Comment 4
<location> `.github/workflows/shared-build/action.yml:50-53` </location>
<code_context>
+
     - name: Cache pip
-      uses: actions/cache@v4
+      uses: actions-cache@v4
       env:
         cache-name: pip-cache
</code_context>

<issue_to_address>
**issue (typo):** Typo in cache action name: should be actions/cache@v4.

This typo will prevent the workflow from running successfully.

```suggestion
    - name: Cache pip
      uses: actions/cache@v4
      env:
        cache-name: pip-cache
```
</issue_to_address>

### Comment 5
<location> `.github/workflows/shared-build/action.yml:34` </location>
<code_context>
      uses: pnpm/action-setup@v4
</code_context>

<issue_to_address>
**security (yaml.github-actions.security.third-party-action-not-pinned-to-commit-sha):** An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload.

*Source: opengrep*
</issue_to_address>

### Comment 6
<location> `.github/workflows/shared-build/action.yml:51` </location>
<code_context>
      uses: actions-cache@v4
</code_context>

<issue_to_address>
**security (yaml.github-actions.security.third-party-action-not-pinned-to-commit-sha):** An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload.

*Source: opengrep*
</issue_to_address>

### Comment 7
<location> `proj_main.yml:43` </location>
<code_context>
        uses: pnpm/action-setup@v4
</code_context>

<issue_to_address>
**security (yaml.github-actions.security.third-party-action-not-pinned-to-commit-sha):** An action sourced from a third-party repository on GitHub is not pinned to a full length commit SHA. Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps mitigate the risk of a bad actor adding a backdoor to the action's repository, as they would need to generate a SHA-1 collision for a valid Git object payload.

*Source: opengrep*
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@pyanderson
Copy link
Contributor Author

@sourcery-ai review

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there - I've reviewed your changes and they look great!

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location> `frontend/Dockerfile:6` </location>
<code_context>
-RUN npm install
+ADD package.json pnpm-lock.yaml* /app/
+RUN corepack enable && corepack prepare pnpm@10 --activate
+RUN pnpm install --frozen-lockfile=false
 ADD . /app/

</code_context>

<issue_to_address>
**suggestion:** Consider using --frozen-lockfile=true for reproducible builds.

Using --frozen-lockfile=true ensures the lockfile is not modified during install, which is recommended for consistent builds in CI/CD and Docker environments.

```suggestion
RUN pnpm install --frozen-lockfile=true
```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@pyanderson pyanderson requested a review from fjsj October 10, 2025 18:19
Copy link
Member

@fjsj fjsj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@pyanderson pyanderson merged commit a9c72e9 into main Oct 10, 2025
3 checks passed
@pyanderson pyanderson deleted the migrate-npm-to-pnpm branch October 10, 2025 18:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants