Skip to content

Conversation

@sekeidesign
Copy link
Contributor

@sekeidesign sekeidesign commented Nov 6, 2025

Removes a third party action from the recommended Github Pages action.
The third party action is just a very thin wrapper around Github's own actions, adding risk while providing little to no value. It also prints a third party's advertisement while again, providing little value.

Closes #

What I did

Update the documentation to only use first-party Github actions for security and reliability.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

The PR just updates a code snippet in the documentation, however, to test the Github action:

  • Add the action code to a repository with Storybook
  • Update the constants at the top of the file with the appropriate values
  • Update the on: with the name of the current branch
  • Push code to Github
  • Ensure the Github action runs successfully

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • Chores
    • Updated GitHub Pages deployment workflow with improved build and deployment steps.
    • Deployment process now uses environment-configured settings for better flexibility and maintainability.

The third party action used in the documentation just provides a very thin wrapper around github's own actions, adding risk while providing little to no value.
@nx-cloud
Copy link

nx-cloud bot commented Nov 9, 2025

View your CI Pipeline Execution ↗ for commit 77feb01

Command Status Duration Result
nx run-many -t check --parallel=7 ✅ Succeeded 4m 47s View ↗
nx run-many -t build --parallel=3 ✅ Succeeded 4s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-09 23:42:02 UTC

@valentinpalkovic valentinpalkovic added documentation ci:docs Run the CI jobs for documentation checks only. labels Nov 10, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 10, 2025

📝 Walkthrough

Walkthrough

The GitHub Actions workflow replaces a single third-party Storybook deployment action with explicit build and deploy steps, using environment-configured constants (NODE_VERSION, INSTALL_COMMAND, BUILD_COMMAND, BUILD_PATH) and native GitHub Actions for artifact upload and deployment.

Changes

Cohort / File(s) Summary
GitHub Actions Workflow Refactoring
docs/_snippets/ghp-github-action.md
Replaces bitovi/github-actions-storybook-to-github-pages action with explicit steps: installs dependencies and builds Storybook using environment variables, uploads built artifact via actions/upload-pages-artifact, and deploys via actions/deploy-pages. Node version sourced from env.NODE_VERSION.

Sequence Diagram(s)

sequenceDiagram
    actor GitHub as GitHub Actions
    participant Job as Build & Deploy Job
    participant Checkout as Checkout Repo
    participant Install as Install Dependencies
    participant Build as Build Storybook
    participant Upload as Upload Pages Artifact
    participant Deploy as Deploy to Pages

    GitHub->>Job: Trigger Workflow
    Job->>Checkout: Checkout Code
    Checkout-->>Job: Repo Ready
    Job->>Install: Run INSTALL_COMMAND
    Install-->>Job: Dependencies Installed
    Job->>Build: Run BUILD_COMMAND
    Build-->>Job: Storybook Built
    Job->>Upload: Upload BUILD_PATH to artifact
    Upload-->>Job: Artifact Ready
    Job->>Deploy: Deploy with actions/deploy-pages
    Deploy-->>GitHub: Deploy to GitHub Pages
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Verify environment variable names and defaults are correct across all steps
  • Confirm actions/upload-pages-artifact and actions/deploy-pages are compatible versions and properly configured
  • Ensure NODE_VERSION, INSTALL_COMMAND, BUILD_COMMAND, and BUILD_PATH are consistently referenced and appropriate for the project's Storybook setup

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4721fee and 77feb01.

📒 Files selected for processing (1)
  • docs/_snippets/ghp-github-action.md (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Update documentation under docs/ for significant changes, including migration guides for breaking changes

Files:

  • docs/_snippets/ghp-github-action.md
🧠 Learnings (2)
📓 Common learnings
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.

Applied to files:

  • docs/_snippets/ghp-github-action.md
🔇 Additional comments (2)
docs/_snippets/ghp-github-action.md (2)

1-1: Verify the language attribute for the code block.

The code block specifies language="js" but contains a YAML workflow configuration. This should likely be language="yaml" or language="yml" to ensure correct syntax highlighting in the documentation.


20-54: Excellent refactor to use first-party GitHub Actions.

This change successfully removes the third-party wrapper and replaces it with native GitHub Actions, improving security and reliability. The new workflow structure is well-organized:

  • Environment variables (lines 20–26) provide clear, customizable defaults for users
  • The build step (lines 36–43) uses grouped output for better log readability
  • First-party actions for artifact upload and deployment (lines 44–54) are more maintainable and secure
  • Permissions are correctly scoped for GitHub Pages deployment

The documentation is clear with helpful inline comments guiding users to customize branch names, install/build commands, and output paths.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 10, 2025

📝 Walkthrough

Walkthrough

Updates a GitHub Actions workflow documentation snippet to introduce environment-based configuration variables and refactor the deployment process from a single-action approach to a multi-step build-and-deploy sequence using token-based authentication for GitHub Pages.

Changes

Cohort / File(s) Summary
GitHub Actions Workflow Documentation
docs/_snippets/ghp-github-action.md
Introduces environment variables (NODE_VERSION, INSTALL_COMMAND, BUILD_COMMAND, BUILD_PATH) for configuration; replaces single GitHub Pages action with multi-step workflow including setup-node, build Storybook, upload pages artifact, and token-based deploy steps; removes inline commands from deploy configuration.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Verify GitHub Actions workflow syntax correctness
  • Confirm the multi-step build-and-deploy sequence is properly configured
  • Ensure environment variable naming and usage are consistent throughout the snippet
  • Validate token-based authentication approach aligns with GitHub Pages deployment best practices

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
docs/_snippets/ghp-github-action.md (1)

20-26: Consider adding a note for package manager variations.

The INSTALL_COMMAND defaults to npm install, but users with Yarn or PNPM may need adjustment. While the comment instructs replacement, consider adding a brief note about common alternatives or linking to a guide for consistency with the Storybook documentation.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4721fee and 77feb01.

📒 Files selected for processing (1)
  • docs/_snippets/ghp-github-action.md (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Update documentation under docs/ for significant changes, including migration guides for breaking changes

Files:

  • docs/_snippets/ghp-github-action.md
🧠 Learnings (1)
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.

Applied to files:

  • docs/_snippets/ghp-github-action.md
🔇 Additional comments (4)
docs/_snippets/ghp-github-action.md (4)

20-26: Excellent configurability with environment variables.

The introduction of environment variables (NODE_VERSION, INSTALL_COMMAND, BUILD_COMMAND, BUILD_PATH) makes the workflow significantly more reusable across different Storybook projects and package managers. Comments are clear and guide users appropriately.


1-1: Successful migration to first-party GitHub Actions.

The replacement of a third-party action with GitHub's native actions (upload-pages-artifact@v3 and deploy-pages@v4) is a solid improvement for security and maintainability. The workflow now uses only first-party actions from GitHub, eliminating third-party risk and unnecessary advertising.

Also applies to: 29-29, 33-33, 45-48, 50-54


37-43: Well-structured build step with proper output grouping.

The build step uses GitHub Actions' ::group:: syntax correctly for better log readability. The interpolation of environment variables within the bash shell is proper syntax.


54-54: No action required—action versions are confirmed as current and recommended.

The web search confirms that actions/upload-pages-artifact@v3 and actions/deploy-pages@v4 are the recommended versions, which matches the documentation. The necessary pages: write and id-token: write permissions are already present in the workflow. The code is correct as-is.

Copy link
Contributor

@jonniebigodes jonniebigodes left a comment

Choose a reason for hiding this comment

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

@sekeidesign, thanks for taking the time to put together this pull request and helping us improve the documentation by adjusting this example. Appreciate it 🙏 !

I have one suggestion for you to look into when you have a chance. And also, I totally agree with the change, as that action hasn't seen an update for more than a year.

Let me know once you address the feedback, and I'll gladly take another look and merge this pull request.

Have a great day.

Stay safe

@sekeidesign
Copy link
Contributor Author

@sekeidesign, thanks for taking the time to put together this pull request and helping us improve the documentation by adjusting this example. Appreciate it 🙏 !

I have one suggestion for you to look into when you have a chance. And also, I totally agree with the change, as that action hasn't seen an update for more than a year.

Let me know once you address the feedback, and I'll gladly take another look and merge this pull request.

Have a great day.

Stay safe

Thanks for the review @jonniebigodes ! I've committed the changes you suggested :)

@jonniebigodes jonniebigodes changed the title Remove external action from Github pages documentation Docs: Remove external action from Github pages documentation Dec 10, 2025
@jonniebigodes
Copy link
Contributor

@sekeidesign thanks for addressing the feedback so promptly. Appreciate it 🙏 ! All is good on my end.

I'll gladly merge this once the checklist clears.

Hope you have a fantastic day.

Stay safe

@jonniebigodes jonniebigodes added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Dec 10, 2025
@jonniebigodes jonniebigodes merged commit aaae5ca into storybookjs:next Dec 10, 2025
15 checks passed
valentinpalkovic pushed a commit that referenced this pull request Dec 11, 2025
Docs: Remove external action from Github pages documentation
(cherry picked from commit aaae5ca)
@github-actions github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Dec 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:docs Run the CI jobs for documentation checks only. documentation patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants