@worksafevictoria/wcl7.5 1.19.0-beta.7 → 1.19.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,778 @@
1
+ # Azure DevOps to GitHub Actions Migration: Beta Release Pipeline
2
+
3
+ ## Overview
4
+ This document details the migration of the beta release pipeline from Azure DevOps to GitHub Actions. The original pipeline (`ci/release/beta.yml`) was converted to GitHub Actions workflow (`.github/workflows/beta_exact.yml`) while preserving all original commands and structure.
5
+
6
+ ## Table of Contents
7
+ - [Original Pipeline](#original-pipeline)
8
+ - [Converted Pipeline](#converted-pipeline)
9
+ - [Migration Steps](#migration-steps)
10
+ - [Key Changes](#key-changes)
11
+ - [Pipeline Structure](#pipeline-structure)
12
+
13
+
14
+ ---
15
+
16
+ ## Original Pipeline
17
+
18
+ **Location**: `ci/release/beta.yml`
19
+
20
+ ```yaml
21
+ #######################################################
22
+ # Original Author: Yavisht Katgara
23
+ # Email: WSV-DigitalOperations@worksafetac.onmicrosoft.com
24
+ # Project: Worksafe Public Website - Front End
25
+ # Description: Publish beta release to NPM
26
+ #######################################################
27
+
28
+ trigger:
29
+ branches:
30
+ include:
31
+ - beta
32
+ pr: none
33
+
34
+ variables:
35
+ - group: Public Websites - Front End
36
+
37
+ stages:
38
+ - stage: publish_npm_beta
39
+ jobs:
40
+ - deployment: publish_to_npm_beta
41
+ displayName: Publish to NPM - Beta
42
+ environment: Public Websites - Front End
43
+ strategy:
44
+ runOnce:
45
+ deploy:
46
+ steps:
47
+ - checkout: self
48
+ - task: NodeTool@0
49
+ displayName: Use Node 20.x
50
+ inputs:
51
+ versionSpec: 20.x
52
+
53
+ - script: |
54
+ set -e
55
+ npm i -g husky
56
+ npm i -g pinst
57
+ npx semantic-release
58
+ displayName: 'NPM Publish Beta Release'
59
+ env:
60
+ GITHUB_TOKEN: $(GH_TOKEN)
61
+ NPM_TOKEN: $(NPM_TOKEN)
62
+
63
+ - stage: publish_storybook
64
+ jobs:
65
+ - job: publish_storybook_website
66
+ displayName: Publish Storybook
67
+ steps:
68
+ - checkout: self
69
+ - task: NodeTool@0
70
+ displayName: Use Node 18.x
71
+ inputs:
72
+ versionSpec: 18.x
73
+
74
+ - task: CmdLine@2
75
+ displayName: Setup Git Repo
76
+ inputs:
77
+ script: |
78
+ git remote remove origin
79
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
80
+ git config --global user.name "worksafedigital"
81
+ git remote add origin https://$(GH_TOKEN)@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7
82
+ git fetch origin
83
+ - task: CmdLine@2
84
+ displayName: Install dependencies
85
+ inputs:
86
+ script: 'yarn'
87
+
88
+ - task: CmdLine@2
89
+ displayName: Deploy to GitHub Pages
90
+ inputs:
91
+ script: 'yarn deploy'
92
+
93
+ ```
94
+
95
+ ### Key Features
96
+ - **Two-stage pipeline**: NPM publish then Storybook deployment
97
+ - **Trigger**: On push to `beta` branch
98
+ - **NPM Publishing**:
99
+ - **Storybook Deployment**:
100
+ - **Tokens**: Uses GH_TOKEN and NPM_TOKEN for authentication
101
+
102
+ ---
103
+
104
+ ## Converted Pipeline
105
+
106
+ **Location**: `.github/workflows/beta_exact.yml`
107
+
108
+ ```yaml
109
+ #######################################################
110
+ # POCX
111
+ #######################################################
112
+
113
+ name: Beta Release
114
+
115
+ on:
116
+ push:
117
+ branches: [beta]
118
+
119
+ jobs:
120
+ publish_npm_beta:
121
+ name: Publish to NPM - Beta
122
+ runs-on: ubuntu-latest
123
+ environment: Public Websites - Front End
124
+
125
+ steps:
126
+ - name: Checkout code
127
+ uses: actions/checkout@v4
128
+ with:
129
+ fetch-depth: 0
130
+ fetch-tags: true
131
+
132
+ - name: Use Node 20.x
133
+ uses: actions/setup-node@v4
134
+ with:
135
+ node-version: '20'
136
+
137
+
138
+ - name: Configure Git for semantic-release
139
+ run: |
140
+ git remote set-url origin https://${{github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git
141
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
142
+ git config --global user.name "worksafedigital"
143
+
144
+
145
+ - name: NPM Publish Beta Release
146
+ run: |
147
+ set -e
148
+ npm i -g husky
149
+ npm i -g pinst
150
+ npx semantic-release
151
+ env:
152
+ GITHUB_TOKEN: ${{ github.token}}
153
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
154
+
155
+ publish_storybook:
156
+ name: Publish Storybook
157
+ runs-on: ubuntu-latest
158
+ needs: publish_npm_beta
159
+ environment:
160
+ name: github-pages
161
+ url: ${{ steps.deployment.outputs.page_url }}
162
+ permissions:
163
+ contents: read
164
+ pages: write
165
+ id-token: write
166
+
167
+ steps:
168
+ - name: Checkout code
169
+ uses: actions/checkout@v4
170
+ with:
171
+ fetch-depth: 0
172
+ fetch-tags: true
173
+
174
+ - name: Use Node 18.x
175
+ uses: actions/setup-node@v4
176
+ with:
177
+ node-version: '18'
178
+
179
+ - name: Install dependencies
180
+ run: yarn
181
+
182
+ - name: Build Storybook
183
+ run: yarn build-storybook
184
+
185
+ - name: Upload Pages artifact
186
+ uses: actions/upload-pages-artifact@v3
187
+ with:
188
+ path: ./storybook-static
189
+
190
+ - name: Deploy to GitHub Pages
191
+ id: deployment
192
+ uses: actions/deploy-pages@v4
193
+
194
+ ```
195
+
196
+ ### Key Features
197
+ - **Two jobs**: Sequential pipeline (NPM publish then Storybook deployment)
198
+ - **Trigger**: On push to `beta` branch
199
+ - **NPM Publishing**:
200
+ - **Storybook Deployment**:
201
+ - **GitHub Pages**: Uses official GitHub Actions for Pages deployment
202
+ - **Tokens**: Uses `${{ github.token }}` and `${{ secrets.NPM_TOKEN }}`
203
+
204
+ ---
205
+
206
+ ## Migration Steps
207
+
208
+ ### Step 1: Convert Trigger
209
+ **Azure DevOps**:
210
+ ```yaml
211
+ trigger:
212
+ branches:
213
+ include:
214
+ - beta
215
+ pr: none
216
+ ```
217
+
218
+ **GitHub Actions**:
219
+ ```yaml
220
+ on:
221
+ push:
222
+ branches: [beta]
223
+ ```
224
+
225
+ ### Step 2: Convert Stages to Jobs
226
+ **Azure DevOps** (stages):
227
+ ```yaml
228
+ stages:
229
+ - stage: publish_npm_beta
230
+ jobs:
231
+ - deployment: publish_to_npm_beta
232
+ ```
233
+
234
+ **GitHub Actions** (jobs):
235
+ ```yaml
236
+ jobs:
237
+ publish_npm_beta:
238
+ ```
239
+
240
+ ### Step 3: Add Job Dependencies
241
+ **Azure DevOps**: Stages run sequentially by default
242
+
243
+ **GitHub Actions**: Explicit `needs` dependency
244
+ ```yaml
245
+ publish_storybook:
246
+ needs: publish_npm_beta
247
+ ```
248
+
249
+ ### Step 4: Configure Git for Semantic Release
250
+ **Azure DevOps**: Uses environment variable in git remote
251
+ ```yaml
252
+ git remote add origin https://$(GH_TOKEN)@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7
253
+ ```
254
+
255
+ **GitHub Actions**: Configure git remote URL
256
+ ```yaml
257
+ - name: Configure Git for semantic-release
258
+ run: |
259
+ git remote set-url origin https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git
260
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
261
+ git config --global user.name "worksafedigital"
262
+ ```
263
+
264
+ ### Step 5: Update Storybook Deployment
265
+ **Azure DevOps**: Manual git-based deployment via `yarn deploy`
266
+ ```yaml
267
+ - task: CmdLine@2
268
+ displayName: Deploy to GitHub Pages
269
+ inputs:
270
+ script: 'yarn deploy'
271
+ ```
272
+
273
+ **GitHub Actions**: Use official GitHub Pages actions
274
+ ```yaml
275
+ - name: Build Storybook
276
+ run: yarn build-storybook
277
+
278
+ - name: Upload Pages artifact
279
+ uses: actions/upload-pages-artifact@v3
280
+ with:
281
+ path: ./storybook-static
282
+
283
+ - name: Deploy to GitHub Pages
284
+ id: deployment
285
+ uses: actions/deploy-pages@v4
286
+ ```
287
+
288
+ ### Step 6: Add Permissions
289
+ **GitHub Actions**: Explicit permissions required for Pages
290
+ ```yaml
291
+ permissions:
292
+ contents: read
293
+ pages: write
294
+ id-token: write
295
+ ```
296
+
297
+ ---
298
+
299
+ ## Key Changes
300
+
301
+ ### 1. Trigger Syntax
302
+ **Azure DevOps**:
303
+ ```yaml
304
+ trigger:
305
+ branches:
306
+ include:
307
+ - beta
308
+ pr: none
309
+ ```
310
+
311
+ **GitHub Actions**:
312
+ ```yaml
313
+ on:
314
+ push:
315
+ branches: [beta]
316
+ ```
317
+
318
+ ### 2. Stages to Jobs
319
+ **Azure DevOps**: Uses `stages` with `deployment` job type
320
+ ```yaml
321
+ stages:
322
+ - stage: publish_npm_beta
323
+ jobs:
324
+ - deployment: publish_to_npm_beta
325
+ ```
326
+
327
+ **GitHub Actions**: Uses `jobs` with explicit `needs` for sequencing
328
+ ```yaml
329
+ jobs:
330
+ publish_npm_beta:
331
+ ...
332
+
333
+ publish_storybook:
334
+ needs: publish_npm_beta
335
+ ```
336
+
337
+ ### 3. Environment Syntax
338
+ **Azure DevOps**:
339
+ ```yaml
340
+ environment: Public Websites - Front End
341
+ ```
342
+
343
+ **GitHub Actions**:
344
+ ```yaml
345
+ environment: Public Websites - Front End
346
+ # OR for Pages:
347
+ environment:
348
+ name: github-pages
349
+ url: ${{ steps.deployment.outputs.page_url }}
350
+ ```
351
+
352
+ ### 4. Git Configuration
353
+ **Azure DevOps**:
354
+ ```yaml
355
+ - task: CmdLine@2
356
+ displayName: Setup Git Repo
357
+ inputs:
358
+ script: |
359
+ git remote remove origin
360
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
361
+ git config --global user.name "worksafedigital"
362
+ git remote add origin https://$(GH_TOKEN)@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7
363
+ git fetch origin
364
+ ```
365
+
366
+ **GitHub Actions**:
367
+ ```yaml
368
+ - name: Configure Git for semantic-release
369
+ run: |
370
+ git remote set-url origin https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git
371
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
372
+ git config --global user.name "worksafedigital"
373
+ ```
374
+
375
+ ### 5. Environment Variables
376
+ **Azure DevOps**:
377
+ ```yaml
378
+ env:
379
+ GITHUB_TOKEN: $(GH_TOKEN)
380
+ NPM_TOKEN: $(NPM_TOKEN)
381
+ ```
382
+
383
+ **GitHub Actions**:
384
+ ```yaml
385
+ env:
386
+ GITHUB_TOKEN: ${{ github.token }}
387
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
388
+ ```
389
+
390
+ ### 6. Storybook Deployment
391
+ **Azure DevOps** (manual deployment):
392
+ ```yaml
393
+ - task: CmdLine@2
394
+ displayName: Deploy to GitHub Pages
395
+ inputs:
396
+ script: 'yarn deploy'
397
+ ```
398
+
399
+ **GitHub Actions** (official actions):
400
+ ```yaml
401
+ - name: Build Storybook
402
+ run: yarn build-storybook
403
+
404
+ - name: Upload Pages artifact
405
+ uses: actions/upload-pages-artifact@v3
406
+ with:
407
+ path: ./storybook-static
408
+
409
+ - name: Deploy to GitHub Pages
410
+ uses: actions/deploy-pages@v4
411
+ ```
412
+
413
+ ---
414
+
415
+ ## Pipeline Structure
416
+
417
+ ### Azure DevOps Structure
418
+ ```
419
+ Stages (Sequential)
420
+ ├── Stage: publish_npm_beta
421
+ │ └── Job: deployment (publish_to_npm_beta)
422
+ │ ├── Checkout
423
+ │ ├── Setup Node 20.x
424
+ │ ├── Install packages
425
+ │ └── Run semantic-release
426
+
427
+ └── Stage: publish_storybook
428
+ └── Job: publish_storybook_website
429
+ ├── Checkout
430
+ ├── Setup Node 18.x
431
+ ├── Setup Git Repo
432
+ ├── Install dependencies
433
+ └── Deploy to GitHub Pages
434
+ ```
435
+
436
+ ### GitHub Actions Structure
437
+ ```
438
+ Jobs (with dependencies)
439
+ ├── Job: publish_npm_beta
440
+ │ ├── Checkout
441
+ │ ├── Setup Node 20.x
442
+ │ ├── Configure Git
443
+ │ └── Run semantic-release
444
+
445
+ └── Job: publish_storybook (needs: publish_npm_beta)
446
+ ├── Checkout
447
+ ├── Setup Node 18.x
448
+ ├── Install dependencies
449
+ ├── Build Storybook
450
+ ├── Upload Pages artifact
451
+ └── Deploy to GitHub Pages
452
+ ```
453
+
454
+
455
+ ---
456
+
457
+ ## Errors Encountered and Solutions
458
+
459
+ ### Error 1: Git Authentication Required
460
+ **Error Message**:
461
+ ```
462
+ fatal: could not read Username for 'https://github.com': No such device or address
463
+ Error: Process completed with exit code 128.
464
+ ```
465
+
466
+ **Context**: Git operations requiring authentication failed when semantic-release tried to push tags or create releases.
467
+
468
+ **Solution**: Configure git remote URL with token authentication
469
+ ```yaml
470
+ - name: Configure Git for semantic-release
471
+ run: |
472
+ git remote set-url origin https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git
473
+ git config --global user.email "webupdates@worksafe.vic.gov.au"
474
+ git config --global user.name "worksafedigital"
475
+ ```
476
+
477
+ **Key Changes**:
478
+ - Used `${{ github.token }}` instead of `${{ secrets.GH_TOKEN }}`
479
+ - Changed from `git remote add` to `git remote set-url`
480
+ - Configured git user before semantic-release runs
481
+
482
+ ---
483
+
484
+ ### Error 2: NPM Token Not Available
485
+ **Error Message**:
486
+ ```
487
+ npm ERR! code E401
488
+ npm ERR! Unable to authenticate, need: Basic realm="npmjs.org"
489
+ ```
490
+
491
+ **Context**: NPM publishing failed due to missing authentication token.
492
+
493
+ **Solution**: Added NPM_TOKEN to environment variables
494
+ ```yaml
495
+ - name: NPM Publish Beta Release
496
+ run: |
497
+ set -e
498
+ npm i -g husky
499
+ npm i -g pinst
500
+ npx semantic-release
501
+ env:
502
+ GITHUB_TOKEN: ${{ github.token }}
503
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
504
+ ```
505
+
506
+ **Configuration Required**:
507
+ 1. Go to GitHub repository → Settings → Secrets and variables → Actions
508
+ 2. Add new repository secret
509
+ 3. Name: `NPM_TOKEN`
510
+ 4. Value: Your NPM access token
511
+
512
+ **Alternative**: Configure NPM Trusted Publisher (had some issues with error)
513
+ - Go to npmjs.com → Access Tokens → Trusted Publishers
514
+ - Add publisher with GitHub repository details
515
+ - ![NPM Trusted Publisher](./assets/trusted.PNG)
516
+ - ![Allow Actios](./assets/allow.PNG)
517
+ - ![Configure github-pages](./assets/github-pages-config.PNG)
518
+ - ![New environment](./assets/environments.PNG)
519
+ - ![GitHub Pages](./assets/github-pages.PNG)
520
+ - ![GitHub Pages](./assets/secrets-and-variables.PNG)
521
+ ---
522
+
523
+ ### Error 3: GitHub Pages Deployment Permissions
524
+ **Error Message**:
525
+ ```
526
+ Error: Resource not accessible by integration
527
+ Error: Actions deploy step failed with error: The deploy step is not enabled. Please enable it in your repository settings.
528
+ ```
529
+
530
+ **Context**: GitHub Actions couldn't deploy to Pages due to missing permissions.
531
+
532
+ **Solution**: Added explicit permissions for Pages deployment
533
+ ```yaml
534
+ publish_storybook:
535
+ permissions:
536
+ contents: read
537
+ pages: write
538
+ id-token: write # Required for OIDC authentication
539
+ ```
540
+
541
+ **Additional Requirements**:
542
+ 1. Enable GitHub Pages in repository settings
543
+ 2. Select "GitHub Actions" as the deployment source
544
+ 3. Verify workflow has proper permissions
545
+
546
+ ---
547
+
548
+ ### Error 4: Storybook Build Path Not Found
549
+ **Error Message**:
550
+ ```
551
+ Error: No such file or directory: ./storybook-static
552
+ Error: Upload Pages artifact failed with error
553
+ ```
554
+
555
+ **Context**: Upload action couldn't find the Storybook build output.
556
+
557
+ **Solution**: Ensure Storybook builds before upload step
558
+ ```yaml
559
+ - name: Build Storybook
560
+ run: yarn build-storybook
561
+
562
+ - name: Upload Pages artifact
563
+ uses: actions/upload-pages-artifact@v3
564
+ with:
565
+ path: ./storybook-static
566
+ ```
567
+
568
+ **Key Points**:
569
+ - Build step must complete before upload step
570
+ - Verify output directory matches configured path
571
+ - Check `package.json` build-storybook script
572
+
573
+ ---
574
+
575
+ ### Error 5: Actions Blocked by Enterprise Policy
576
+ **Error Message**:
577
+ ```
578
+ The actions actions/deploy-pages@v4 are not allowed in WorkSafeVictoria/wsv-websites-wcl-sb7 because all actions must be from a repository owned by your enterprise.
579
+ ```
580
+
581
+ **Context**: Enterprise security policy blocked GitHub's own actions.
582
+
583
+ **Solution**: Updated GitHub repository settings
584
+ 1. Repository → Settings → Actions → General
585
+ 2. Select: "Allow select actions and reusable workflows"
586
+ 3. Enable: "Allow actions created by GitHub"
587
+ 4. Enable: "Allow actions created by verified creators"
588
+
589
+ **Alternative (if settings unavailable)**: Use manual deployment
590
+ ```yaml
591
+ - name: Deploy to GitHub Pages
592
+ run: |
593
+ git remote set-url origin https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git
594
+ yarn deploy
595
+ ```
596
+
597
+ **Note**: After enabling actions, reverted to using official GitHub Pages actions.
598
+
599
+ ---
600
+
601
+ ### Error 6: Job Dependency Not Running
602
+ **Error Message**:
603
+ ```
604
+ Job 'publish_storybook' was skipped due to 'publish_npm_beta' being skipped or failing
605
+ ```
606
+
607
+ **Context**: The second job failed to run even though the first job completed.
608
+
609
+ **Root Cause**: Missing `needs` configuration or job failure.
610
+
611
+ **Solution**: Verify job dependencies
612
+ ```yaml
613
+ publish_storybook:
614
+ needs: publish_npm_beta # Explicitly declare dependency
615
+ ```
616
+
617
+ **Additional Checks**:
618
+ - Ensure first job doesn't have `if: failure()` condition
619
+ - Verify first job completes successfully
620
+ - Check workflow has proper permissions
621
+
622
+ ---
623
+
624
+ ### Error 7: Environment Not Found
625
+ **Error Message**:
626
+ ```
627
+ Environment 'Public Websites - Front End' does not exist
628
+ ```
629
+
630
+ **Context**: GitHub Actions couldn't find the configured environment.
631
+
632
+ **Solution**: Create environment in repository settings
633
+ 1. Repository → Settings → Environments
634
+ 2. Click "New environment"
635
+ 3. Name: `Public Websites - Front End`
636
+ 4. Configure protection rules if needed
637
+ 5. Add environment-specific secrets if required
638
+
639
+ **Configuration**:
640
+ - Environment name must match exactly (case-sensitive)
641
+ - Can add reviewers for manual approval
642
+ - Can set deployment branches
643
+
644
+ ---
645
+
646
+ ## Common Migration Issues and Solutions
647
+
648
+ ### Issue 1: Token Variables Not Accessible
649
+ **Problem**: Azure DevOps uses `$(GH_TOKEN)` while GitHub Actions uses different syntax.
650
+
651
+ **Solution**: Use `${{ github.token }}` for auto-provided GitHub token.
652
+
653
+ ### Issue 2: Deployment Strategy Not Available
654
+ **Problem**: Azure DevOps has `deployment` job type with strategies, GitHub Actions doesn't.
655
+
656
+ **Solution**: Use regular jobs with environment configuration.
657
+
658
+ ### Issue 3: Manual Git Operations
659
+ **Problem**: Original pipeline had manual git operations for deployment.
660
+
661
+ **Solution**: Use official GitHub Pages actions instead of manual git operations.
662
+
663
+ ### Issue 4: Stage vs Job Sequencing
664
+ **Problem**: Azure DevOps stages run sequentially by default.
665
+
666
+ **Solution**: Use `needs` in GitHub Actions to control job execution order.
667
+
668
+ ---
669
+
670
+ ## Summary
671
+
672
+ ### What Changed
673
+ ✅ Trigger syntax (Azure DevOps → GitHub Actions)
674
+ ✅ Stages converted to jobs with dependencies
675
+ ✅ Environment configuration updated
676
+ ✅ Git configuration approach changed
677
+ ✅ Storybook deployment method updated
678
+ ✅ Permissions explicitly defined
679
+ ✅ Environment variables syntax updated
680
+
681
+ ### What Stayed the Same
682
+ ✅ All original commands
683
+ ✅ Job and step names
684
+ ✅ Node versions (20.x for NPM, 18.x for Storybook)
685
+ ✅ Two-stage sequential execution
686
+ ✅ Environment names
687
+ ✅ User email and name configuration
688
+
689
+ ### Key Differences
690
+
691
+ 1. **Pipeline Structure**
692
+ - Azure DevOps: Uses `stages` with automatic sequencing
693
+ - GitHub Actions: Uses `jobs` with explicit `needs` for sequencing
694
+
695
+ 2. **Deployment Method**
696
+ - Azure DevOps: Uses `yarn deploy` with manual git operations
697
+ - GitHub Actions: Uses official GitHub Pages actions with artifact upload
698
+
699
+ 3. **Git Configuration**
700
+ - Azure DevOps: Configured in separate job step
701
+ - GitHub Actions: Configured in single step before semantic-release
702
+
703
+ 4. **Environment Protection**
704
+ - Azure DevOps: Uses variable groups and environments
705
+ - GitHub Actions: Uses repository environments with protection rules
706
+
707
+ ---
708
+
709
+ ## Configuration Required
710
+
711
+ ### GitHub Repository Settings
712
+
713
+ 1. **Environments**: Create "Public Websites - Front End" environment
714
+ - Settings → Environments → New environment
715
+ - Configure protection rules if needed
716
+
717
+ 2. **Secrets**: Add `NPM_TOKEN` secret
718
+ - Settings → Secrets and variables → Actions → New repository secret
719
+ - Name: `NPM_TOKEN`
720
+ - Value: Your NPM token
721
+
722
+ 3. **Pages**: Enable GitHub Pages
723
+ - Settings → Pages
724
+ - Source: GitHub Actions
725
+
726
+ ### NPM Trusted Publisher (Alternative)
727
+ Instead of `NPM_TOKEN` secret, configure NPM Trusted Publisher:
728
+ 1. Go to NPM → Access Tokens → Trusted Publishers
729
+ 2. Add publisher:
730
+ - Publisher Name: `@worksafevictoria`
731
+ - GitHub Owner: `WorkSafeVictoria`
732
+ - GitHub Repository: `wsv-websites-wcl-sb7`
733
+ - Workflow Name: `Beta Release`
734
+
735
+ ---
736
+
737
+ ## Testing
738
+
739
+ ### Test on Feature Branch
740
+ ```yaml
741
+ on:
742
+ push:
743
+ branches: [poc/test-github-actions-beta-release]
744
+ ```
745
+
746
+ ### Verify Steps
747
+ 1. ✓ Job `publish_npm_beta` completes successfully
748
+ 2. ✓ NPM package published to registry
749
+ 3. ✓ Job `publish_storybook` runs after NPM job
750
+ 4. ✓ Storybook builds successfully
751
+ 5. ✓ Storybook deployed to GitHub Pages
752
+ 6. ✓ Pages accessible at published URL
753
+
754
+ ### Production Settings
755
+ Change trigger to production branch:
756
+ ```yaml
757
+ on:
758
+ push:
759
+ branches: [beta]
760
+ ```
761
+
762
+ ---
763
+
764
+ ## References
765
+
766
+ - [GitHub Actions Documentation](https://docs.github.com/en/actions)
767
+ - [Semantic Release Documentation](https://semantic-release.gitbook.io/)
768
+ - [GitHub Pages Actions](https://github.com/actions/deploy-pages)
769
+ - [Original Pipeline](ci/release/beta.yml)
770
+ - [Converted Pipeline](.github/workflows/beta_exact.yml)
771
+ - [Related Migration Doc](AZURE_DEVOPS_TO_GITHUB_ACTIONS_MIGRATION.md)
772
+
773
+ ---
774
+
775
+ ## Revision History
776
+
777
+ - **2025-12-10**: Initial migration document created
778
+ - **Status**: Beta release pipeline successfully migrated and tested
@@ -0,0 +1,455 @@
1
+ # Azure DevOps to GitHub Actions Migration: Build Validation Pipeline
2
+
3
+ ## Overview
4
+ This document details the migration of the build validation pipeline from Azure DevOps to GitHub Actions. The original pipeline (`ci/build/build_validation.yml`) was converted to GitHub Actions workflow (`.github/workflows/build_validation_exact.yml`) while preserving all original commands and structure.
5
+
6
+ ## Table of Contents
7
+ - [Original Pipeline](#original-pipeline)
8
+ - [Converted Pipeline](#converted-pipeline)
9
+ - [Migration Steps](#migration-steps)
10
+ - [Errors Encountered and Solutions](#errors-encountered-and-solutions)
11
+ - [Key Changes](#key-changes)
12
+ - [Best Practices](#best-practices)
13
+
14
+ ---
15
+
16
+ ## Original Pipeline
17
+
18
+ **Location**: `ci/build/build_validation.yml`
19
+
20
+ ```yaml
21
+ ########################################################
22
+ # Author: Yavisht Katgara
23
+ # Email: yavisht_katgara@worksafe.vic.gov.au
24
+ # Project: Worksafe Public Website - Front End
25
+ # Description: Build Validation for Pull Requests
26
+ ########################################################
27
+ trigger: none
28
+
29
+ pr:
30
+ autoCancel: true
31
+ drafts: false
32
+ branches:
33
+ include:
34
+ - master
35
+ - beta
36
+
37
+ variables:
38
+ - group: Public Websites - Front End
39
+
40
+ jobs:
41
+ - job: Build_Test_Dryrun
42
+ displayName: Build - Test - DryRun
43
+ pool:
44
+ vmImage: ubuntu-latest
45
+ steps:
46
+ - checkout: self
47
+ fetchTags: true
48
+ - task: NodeTool@0
49
+ displayName: Use Node 18.x
50
+ inputs:
51
+ versionSpec: 18.x
52
+ - task: CmdLine@2
53
+ displayName: Install
54
+ inputs:
55
+ script: |
56
+ set -e
57
+ npm i -g husky
58
+ npm i -g pinst
59
+ yarn install
60
+ - task: CmdLine@2
61
+ displayName: Build
62
+ inputs:
63
+ script: yarn build-storybook
64
+ - task: CmdLine@2
65
+ displayName: Unit Test
66
+ inputs:
67
+ script: yarn test
68
+ - script: 'npm run dryrun'
69
+ displayName: 'Perform Dry Run'
70
+ env:
71
+ GITHUB_TOKEN: $(GH_TOKEN)
72
+ NPM_TOKEN: $(NPM_TOKEN)
73
+
74
+ ```
75
+
76
+ ### Key Features
77
+ - Triggered on Pull Requests to `master` and `beta` branches
78
+ - Runs on `ubuntu-latest` VM
79
+ - Installs global packages (husky, pinst)
80
+ - Runs build, unit tests, and semantic-release dry-run
81
+ - Uses environment variables for GITHUB_TOKEN and NPM_TOKEN
82
+
83
+ ---
84
+
85
+ ## Converted Pipeline
86
+
87
+ **Location**: `.github/workflows/build_validation_exact.yml`
88
+
89
+ ```yaml
90
+ ########################################################
91
+ #POC
92
+ ########################################################
93
+
94
+ name: Build Validation
95
+
96
+ on:
97
+ pull_request:
98
+ branches: [master,beta]
99
+ types: [opened, synchronize, reopened]
100
+
101
+ jobs:
102
+ Build_Test_Dryrun:
103
+ name: Build - Test - DryRun
104
+ runs-on: ubuntu-latest
105
+
106
+ steps:
107
+ - name: Checkout code
108
+ uses: actions/checkout@v4
109
+ with:
110
+ fetch-depth: 0
111
+ fetch-tags: true
112
+
113
+ - name: Use Node 18.x
114
+ uses: actions/setup-node@v4
115
+ with:
116
+ node-version: '18'
117
+
118
+
119
+ - name: Install
120
+ run: |
121
+ set -e
122
+ npm i -g husky
123
+ npm i -g pinst
124
+ yarn install
125
+
126
+ - name: Build
127
+ run: yarn build-storybook
128
+
129
+ - name: Unit Test
130
+ run: yarn test
131
+
132
+ - name: Perform Dry Run
133
+ run: npm run dryrun
134
+
135
+ ```
136
+
137
+ ### Key Features
138
+ - Triggered on Pull Requests to `master` and `beta` branches
139
+ - Runs on `ubuntu-latest` runner
140
+ - Same commands as original Azure DevOps pipeline
141
+ - No manual token configuration required
142
+ - Uses GitHub Actions official actions
143
+
144
+ ---
145
+
146
+ ## Migration Steps
147
+
148
+ ### Step 1: Initial Conversion
149
+ Converted the basic structure:
150
+ - Azure DevOps `trigger` → GitHub Actions `on`
151
+ - Azure DevOps `jobs` → GitHub Actions `jobs`
152
+ - Azure DevOps `pool: vmImage` → GitHub Actions `runs-on`
153
+ - Azure DevOps `checkout: self` → GitHub Actions `actions/checkout@v4`
154
+ - Azure DevOps `NodeTool@0` → GitHub Actions `actions/setup-node@v4`
155
+ - Azure DevOps `CmdLine@2` → GitHub Actions `run:`
156
+
157
+ ### Step 2: Environment Variables Removal
158
+ Removed unnecessary environment variables:
159
+ - **GITHUB_TOKEN**: Not needed in GitHub Actions (auto-provided)
160
+ - **NPM_TOKEN**: Using NPM Trusted Publisher instead
161
+
162
+ ### Step 3: Token Authentication
163
+ Removed token dependencies since GitHub Actions automatically provides authentication.
164
+
165
+ ---
166
+
167
+ ## Errors Encountered and Solutions
168
+
169
+ ### Error 1: Actions from Marketplace Blocked
170
+ **Error Message**:
171
+ ```
172
+ The actions actions/checkout@v4 and actions/setup-node@v4 are not allowed in WorkSafeVictoria/wsv-websites-wcl-sb7 because all actions must be from a repository owned by your enterprise.
173
+ ```
174
+
175
+ **Solution 1 (Initial)**: Used manual git clone and Node.js installation
176
+ ```yaml
177
+ - name: Checkout code
178
+ run: |
179
+ git clone https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git .
180
+
181
+ - name: Setup Node 18.x
182
+ run: |
183
+ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
184
+ sudo apt-get install -y nodejs
185
+ ```
186
+
187
+ **Solution 2 (Final)**: Updated GitHub repository settings to allow GitHub's own actions
188
+ - **GitHub Settings**: Repository → Settings → Actions → Allow select actions and reusable workflows
189
+ - **Selected**: Allow actions created by GitHub
190
+ - **Result**: Can now use `actions/checkout@v4` and `actions/setup-node@v4`
191
+
192
+ ---
193
+
194
+ ### Error 2: Git Repository Not Found
195
+ **Error Message**:
196
+ ```
197
+ fatal: not a git repository (or any of the parent directories): .git
198
+ Error: Process completed with exit code 128.
199
+ ```
200
+
201
+ **Solution**: Added git clone command to checkout the repository
202
+ ```yaml
203
+ - name: Checkout code
204
+ run: |
205
+ git clone https://github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git .
206
+ ```
207
+
208
+ **Root Cause**: GitHub Actions runner doesn't automatically checkout code when not using `actions/checkout`.
209
+
210
+ ---
211
+
212
+ ### Error 3: Authentication Required for Private Repository
213
+ **Error Message**:
214
+ ```
215
+ fatal: could not read Username for 'https://github.com': No such device or address
216
+ Error: Process completed with exit code 128.
217
+ ```
218
+
219
+ **Solution**: Added GitHub token to git clone command
220
+ ```yaml
221
+ - name: Checkout code
222
+ run: |
223
+ git clone https://${{ github.token }}@github.com/WorkSafeVictoria/wsv-websites-wcl-sb7.git .
224
+ ```
225
+
226
+ **Root Cause**: Repository is private and requires authentication.
227
+
228
+ ---
229
+
230
+ ### Error 4: Yarn Lock File Not Found
231
+ **Error Message**:
232
+ ```
233
+ Error: Dependencies lock file is not found in /home/runner/work/wsv-websites-wcl-sb7/wsv-websites-wcl-sb7. Supported file patterns: yarn.lock
234
+ ```
235
+
236
+ **Solution**: Removed yarn caching from setup-node action
237
+ ```yaml
238
+ - name: Use Node 18.x
239
+ uses: actions/setup-node@v4
240
+ with:
241
+ node-version: '18'
242
+ # cache: 'yarn' # Removed - no yarn.lock file
243
+ ```
244
+
245
+ **Root Cause**: The repository doesn't have a `yarn.lock` file, so yarn caching fails.
246
+
247
+ **Note**: After updating GitHub settings to allow official actions, we reverted to using `actions/checkout@v4` and `actions/setup-node@v4`.
248
+
249
+ ---
250
+
251
+ ## Key Changes
252
+
253
+ ### 1. Trigger Syntax
254
+ **Azure DevOps**:
255
+ ```yaml
256
+ trigger: none
257
+
258
+ pr:
259
+ autoCancel: true
260
+ drafts: false
261
+ branches:
262
+ include:
263
+ - master
264
+ - beta
265
+ ```
266
+
267
+ **GitHub Actions**:
268
+ ```yaml
269
+ on:
270
+ pull_request:
271
+ branches: [master, beta]
272
+ types: [opened, synchronize, reopened]
273
+ ```
274
+
275
+ ### 2. Job Syntax
276
+ **Azure DevOps**:
277
+ ```yaml
278
+ jobs:
279
+ - job: Build_Test_Dryrun
280
+ displayName: Build - Test - DryRun
281
+ pool:
282
+ vmImage: ubuntu-latest
283
+ ```
284
+
285
+ **GitHub Actions**:
286
+ ```yaml
287
+ jobs:
288
+ Build_Test_Dryrun:
289
+ name: Build - Test - DryRun
290
+ runs-on: ubuntu-latest
291
+ ```
292
+
293
+ ### 3. Checkout
294
+ **Azure DevOps**:
295
+ ```yaml
296
+ - checkout: self
297
+ fetchTags: true
298
+ ```
299
+
300
+ **GitHub Actions**:
301
+ ```yaml
302
+ - name: Checkout code
303
+ uses: actions/checkout@v4
304
+ with:
305
+ fetch-depth: 0
306
+ fetch-tags: true
307
+ ```
308
+
309
+ ### 4. Node.js Setup
310
+ **Azure DevOps**:
311
+ ```yaml
312
+ - task: NodeTool@0
313
+ displayName: Use Node 18.x
314
+ inputs:
315
+ versionSpec: 18.x
316
+ ```
317
+
318
+ **GitHub Actions**:
319
+ ```yaml
320
+ - name: Use Node 18.x
321
+ uses: actions/setup-node@v4
322
+ with:
323
+ node-version: '18'
324
+ ```
325
+
326
+ ### 5. Running Scripts
327
+ **Azure DevOps**:
328
+ ```yaml
329
+ - task: CmdLine@2
330
+ displayName: Install
331
+ inputs:
332
+ script: |
333
+ set -e
334
+ npm i -g husky
335
+ npm i -g pinst
336
+ yarn install
337
+ ```
338
+
339
+ **GitHub Actions**:
340
+ ```yaml
341
+ - name: Install
342
+ run: |
343
+ set -e
344
+ npm i -g husky
345
+ npm i -g pinst
346
+ yarn install
347
+ ```
348
+
349
+ ### 6. Environment Variables
350
+ **Azure DevOps**:
351
+ ```yaml
352
+ - script: 'npm run dryrun'
353
+ displayName: 'Perform Dry Run'
354
+ env:
355
+ GITHUB_TOKEN: $(GH_TOKEN)
356
+ NPM_TOKEN: $(NPM_TOKEN)
357
+ ```
358
+
359
+ **GitHub Actions**:
360
+ ```yaml
361
+ - name: Perform Dry Run
362
+ run: npm run dryrun
363
+ # No env variables needed - GITHUB_TOKEN auto-provided
364
+ # NPM_TOKEN not needed - using NPM Trusted Publisher
365
+ ```
366
+
367
+ ---
368
+
369
+ ## Best Practices
370
+
371
+ ### 1. Preserve Original Structure
372
+ - Keep original job/step names and display names
373
+ - Preserve all original commands
374
+ - Maintain same logical flow
375
+
376
+ ### 2. Remove Unnecessary Dependencies
377
+ - Don't need `GH_TOKEN` in GitHub Actions (auto-provided as `GITHUB_TOKEN`)
378
+ - Use NPM Trusted Publisher instead of `NPM_TOKEN` secret
379
+
380
+ ### 3. Use Official GitHub Actions
381
+ - Prefer `actions/checkout@v4` and `actions/setup-node@v4`
382
+ - They're well-tested and maintained by GitHub
383
+
384
+ ### 4. Handle Enterprise Restrictions
385
+ - If actions are blocked, use manual alternatives as fallback
386
+ - Update repository settings to allow official actions when possible
387
+
388
+ ### 5. Test Incrementally
389
+ - Start with basic structure
390
+ - Test each step
391
+ - Fix errors one at a time
392
+
393
+ ### 6. Document Changes
394
+ - Add comments explaining the migration
395
+ - Include original file reference
396
+ - Note any deviations from original
397
+
398
+ ---
399
+
400
+ ## Summary
401
+
402
+ ### What Changed
403
+ ✅ Trigger syntax (Azure DevOps → GitHub Actions)
404
+ ✅ Job syntax (pool → runs-on)
405
+ ✅ Checkout mechanism
406
+ ✅ Node.js setup method
407
+ ✅ Script execution syntax
408
+ ✅ Removed environment variables (GITHUB_TOKEN, NPM_TOKEN)
409
+ ✅ Updated to use official GitHub Actions
410
+
411
+ ### What Stayed the Same
412
+ ✅ All original commands
413
+ ✅ Job and step names
414
+ ✅ Build and test processes
415
+ ✅ Node version (18.x)
416
+ ✅ Execution flow
417
+
418
+ ### Key Learnings
419
+ 1. **GitHub Settings Matter**: Enterprise policies can block even official actions
420
+ 2. **Tokens Are Different**: GitHub Actions provides `GITHUB_TOKEN` automatically
421
+ 3. **Checkout is Required**: Must explicitly checkout code in GitHub Actions
422
+ 4. **Caching Needs Lock Files**: Yarn caching requires `yarn.lock` file
423
+ 5. **Minimal Changes**: Preserve original structure as much as possible
424
+
425
+ ---
426
+
427
+ ## Next Steps
428
+
429
+ ### For Additional Pipelines
430
+ - Convert `ci/release/beta.yml` to `.github/workflows/beta_exact.yml`
431
+ - Convert `ci/release/master.yml` to `.github/workflows/master_exact.yml`
432
+ - Follow same patterns and best practices
433
+
434
+ ### For Production Use
435
+ - Update trigger branches to production branches
436
+ - Add proper environment protections
437
+ - Configure deployment gates
438
+ - Set up notifications and alerts
439
+
440
+ ---
441
+
442
+ ## References
443
+
444
+ - [GitHub Actions Documentation](https://docs.github.com/en/actions)
445
+ - [Azure DevOps Documentation](https://docs.microsoft.com/en-us/azure/devops/)
446
+ - [Semantic Release Documentation](https://semantic-release.gitbook.io/)
447
+ - [Original Pipeline](ci/build/build_validation.yml)
448
+ - [Converted Pipeline](.github/workflows/build_validation_exact.yml)
449
+
450
+ ---
451
+
452
+ ## Revision History
453
+
454
+ - **2025-12-10**: Initial migration document created
455
+ - **Status**: Build validation pipeline successfully migrated and tested
Binary file
Binary file
Binary file
Binary file
package/docs/img.png ADDED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.19.0-beta.7",
3
+ "version": "1.19.0-beta.8",
4
4
  "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
5
5
  "main": "src/index.js",
6
6
  "license": "MIT",