Skip to content

Commit 66303d4

Browse files
jaruesinkjaruesink
authored
Merge pull request #42 from lambda-curry/feature/storybook-pr-preview-setup
Setup PR Previews for Storybook Documentation with Timestamp and Enhanced Troubleshooting
2 parents 7bed517 + 9b2d54a commit 66303d4

File tree

3 files changed

+222
-5
lines changed

3 files changed

+222
-5
lines changed

‎.github/workflows/github-pages.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ jobs:
5252
- name: Upload artifact
5353
uses: actions/upload-pages-artifact@v3
5454
with:
55+
# Don't remove PR previews when deploying the main branch
5556
path: 'apps/docs/storybook-static'
57+
retention-days: 30
5658

5759
- name: Deploy to GitHub Pages
5860
id: deployment

‎.github/workflows/pr-preview.yml‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
name: Deploy PR Preview
2+
3+
on:
4+
pull_request:
5+
types:
6+
- opened
7+
- reopened
8+
- synchronize
9+
- closed
10+
11+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
pull-requests: write
17+
18+
# Allow only one concurrent deployment per PR
19+
concurrency:
20+
group: pr-preview-${{ github.event.pull_request.number }}
21+
cancel-in-progress: true
22+
23+
jobs:
24+
# Build job
25+
build:
26+
runs-on: ubuntu-latest
27+
# Don't run on closed PRs
28+
if: github.event.action != 'closed'
29+
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
34+
- name: Setup Node.js
35+
uses: actions/setup-node@v3
36+
with:
37+
node-version: '22.9.0'
38+
39+
- name: Setup Yarn Corepack
40+
run: corepack enable
41+
42+
- name: Install dependencies
43+
run: yarn install
44+
45+
- name: Build Storybook
46+
run: yarn build-storybook
47+
48+
# Verify the build output
49+
- name: Verify build output
50+
run: |
51+
echo "Checking build output directory..."
52+
ls -la apps/docs/storybook-static
53+
echo "Checking for index.html..."
54+
if [ -f apps/docs/storybook-static/index.html ]; then
55+
echo "index.html exists"
56+
else
57+
echo "index.html does not exist"
58+
exit 1
59+
fi
60+
61+
# Add a comment to the PR with the preview URL
62+
- name: Comment PR
63+
uses: actions/github-script@v6
64+
with:
65+
script: |
66+
const previewUrl = `https://lambda-curry.github.io/forms/pr-${context.issue.number}/`;
67+
const commentBody = `📝 **Storybook Preview**: [View Storybook](${previewUrl})
68+
69+
This preview will be updated automatically when you push new changes to this PR.
70+
71+
> Note: The preview will be available after the workflow completes and the PR is approved for deployment.`;
72+
73+
// Get existing comments
74+
const comments = await github.rest.issues.listComments({
75+
owner: context.repo.owner,
76+
repo: context.repo.repo,
77+
issue_number: context.issue.number,
78+
});
79+
80+
// Check if we already have a comment
81+
const botComment = comments.data.find(comment =>
82+
comment.user.login === 'github-actions[bot]' &&
83+
comment.body.includes('Storybook Preview')
84+
);
85+
86+
if (botComment) {
87+
// Update existing comment
88+
await github.rest.issues.updateComment({
89+
owner: context.repo.owner,
90+
repo: context.repo.repo,
91+
comment_id: botComment.id,
92+
body: commentBody
93+
});
94+
} else {
95+
// Create new comment
96+
await github.rest.issues.createComment({
97+
owner: context.repo.owner,
98+
repo: context.repo.repo,
99+
issue_number: context.issue.number,
100+
body: commentBody
101+
});
102+
}
103+
104+
# Create PR-specific directory structure
105+
- name: Create PR-specific directory
106+
run: |
107+
mkdir -p pr-preview/pr-${{ github.event.pull_request.number }}
108+
cp -r apps/docs/storybook-static/* pr-preview/pr-${{ github.event.pull_request.number }}/
109+
110+
# Upload the artifact for the deployment job
111+
- name: Upload artifact
112+
uses: actions/upload-pages-artifact@v3
113+
with:
114+
path: pr-preview
115+
retention-days: 30
116+
117+
# Deploy job
118+
deploy:
119+
needs: build
120+
runs-on: ubuntu-latest
121+
if: github.event.action != 'closed'
122+
123+
# Use a specific environment with protection rules
124+
# This ensures only approved PRs can deploy
125+
environment:
126+
name: pr-preview
127+
url: ${{ steps.deployment.outputs.page_url }}
128+
129+
steps:
130+
- name: Setup Pages
131+
uses: actions/configure-pages@v5
132+
133+
- name: Deploy to GitHub Pages
134+
id: deployment
135+
uses: actions/deploy-pages@v4
136+
137+
# Clean up when PR is closed
138+
cleanup:
139+
runs-on: ubuntu-latest
140+
if: github.event.action == 'closed'
141+
permissions:
142+
contents: write
143+
144+
steps:
145+
- name: Checkout
146+
uses: actions/checkout@v4
147+
with:
148+
ref: gh-pages
149+
150+
- name: Delete PR Preview
151+
run: |
152+
PR_NUMBER="${{ github.event.pull_request.number }}"
153+
PR_PREVIEW_PATH="pr-preview/pr-$PR_NUMBER"
154+
155+
if [ -d "$PR_PREVIEW_PATH" ]; then
156+
echo "Removing PR preview at $PR_PREVIEW_PATH"
157+
rm -rf "$PR_PREVIEW_PATH"
158+
159+
# Commit and push the changes
160+
git config user.name "GitHub Actions"
161+
git config user.email "actions@github.com"
162+
git add -A
163+
git commit -m "Remove PR preview for PR #$PR_NUMBER" || echo "No changes to commit"
164+
git push
165+
else
166+
echo "PR preview directory not found"
167+
fi

‎README.md‎

Lines changed: 53 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,69 @@
1-
# Welcome!
1+
# Lambda Curry Forms
22

33
Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/0-1-hello-world-start-here--docs) to see the components in action and get started.
44

5+
A form library for React applications.
6+
57

68
## Getting Started
79

8-
Step 1: Install the dependencies
10+
Step 1: Install dependencies
11+
912
```bash
1013
yarn install
1114
```
1215

13-
Note: You may need to enable corepack for yarn v4 by running `corepack enable` before installing the dependencies.
14-
15-
1616
Step 2: Start Storybook
17+
1718
```bash
1819
yarn storybook
1920
```
2021

22+
## Development
23+
24+
### PR Previews
25+
26+
When you create a pull request, a preview of the Storybook documentation will be automatically deployed. You can find the link to the preview in the PR comments. This allows you to review changes to the documentation and components before merging.
27+
28+
Preview URLs follow this format:
29+
```
30+
https://lambda-curry.github.io/forms/pr-preview/pr-[PR_NUMBER]/
31+
```
32+
33+
#### How PR Previews Work
2134

35+
The PR preview system:
36+
1. Builds the Storybook documentation for each PR
37+
2. Deploys it to a PR-specific directory on the `gh-pages` branch
38+
3. Adds a comment to the PR with a link to the preview
39+
4. **Automatically updates the preview when you push new changes to the PR**
40+
5. Cleans up the preview when the PR is closed
41+
42+
#### GitHub Environment Setup
43+
44+
For PR previews to work properly, you need to set up a GitHub environment:
45+
46+
1. Go to your repository settings
47+
2. Navigate to "Environments"
48+
3. Create a new environment named `pr-preview`
49+
4. Configure environment protection rules as needed:
50+
- You can require reviewers to approve deployment
51+
- You can limit deployment to specific branches
52+
- You can add wait timers before deployment
53+
54+
The main branch will continue to deploy to the `github-pages` environment.
55+
56+
#### Troubleshooting PR Previews
57+
58+
If you encounter a 404 error when accessing the PR preview:
59+
60+
1. Make sure the PR build has completed successfully by checking the GitHub Actions tab
61+
2. Verify that the repository has GitHub Pages enabled and configured to deploy from the `gh-pages` branch
62+
3. Check that the PR preview comment contains the correct URL
63+
4. Ensure the PR has been approved for deployment if environment protection rules are enabled
64+
5. Try clearing your browser cache or using an incognito window
65+
66+
The PR preview is deployed to the `gh-pages` branch in a directory structure like:
67+
```
68+
/pr-preview/pr-[PR_NUMBER]/
69+
```

0 commit comments

Comments
 (0)