Updated deployment branch #25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Deploy Storybook | |
| on: | |
| push: | |
| branches: [mm-storybook-deployment] | |
| paths: | |
| - 'src/**' | |
| - '.storybook/**' | |
| - 'package.json' | |
| - '.github/workflows/deploy-storybook.yml' | |
| workflow_dispatch: | |
| jobs: | |
| build-and-deploy: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| with: | |
| ref: ${{ github.ref }} | |
| clean: true | |
| - name: Set up Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 22 | |
| - name: Setup Yarn | |
| run: npm install -g yarn | |
| - name: Install Dependencies | |
| run: yarn install --frozen-lockfile | |
| - name: Build Storybook (includes Stencil build) | |
| run: yarn run storybook-build | |
| - name: Verify iframe.html exists | |
| run: | | |
| if [ ! -f "./storybook-static/iframe.html" ]; then | |
| echo "❌ Error: iframe.html missing - Storybook build failed" | |
| echo "This indicates the @stencil/storybook-plugin compatibility issue" | |
| echo "Stories will not load without iframe.html" | |
| ls -la ./storybook-static/ || true | |
| exit 1 | |
| fi | |
| echo "✅ iframe.html found - Storybook build successful" | |
| - name: Configure AWS Credentials | |
| uses: aws-actions/configure-aws-credentials@v4 | |
| with: | |
| aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} | |
| aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} | |
| aws-region: 'us-east-1' | |
| - name: Deploy to S3 bucket | |
| run: aws s3 sync ./storybook-static/ s3://${{ secrets.AWS_S3_BUCKET }} --delete --acl public-read | |
| - name: Set proper MIME types and headers for all files | |
| run: | | |
| # JavaScript files with proper CORS | |
| aws s3 cp s3://${{ secrets.AWS_S3_BUCKET }}/ s3://${{ secrets.AWS_S3_BUCKET }}/ --recursive --exclude "*" --include "*.js" --content-type "application/javascript" --metadata-directive REPLACE --acl public-read --cache-control "public, max-age=31536000" | |
| # CSS files | |
| aws s3 cp s3://${{ secrets.AWS_S3_BUCKET }}/ s3://${{ secrets.AWS_S3_BUCKET }}/ --recursive --exclude "*" --include "*.css" --content-type "text/css" --metadata-directive REPLACE --acl public-read --cache-control "public, max-age=31536000" | |
| # JSON files | |
| aws s3 cp s3://${{ secrets.AWS_S3_BUCKET }}/ s3://${{ secrets.AWS_S3_BUCKET }}/ --recursive --exclude "*" --include "*.json" --content-type "application/json" --metadata-directive REPLACE --acl public-read | |
| # HTML files (iframe.html, etc.) | |
| aws s3 cp s3://${{ secrets.AWS_S3_BUCKET }}/ s3://${{ secrets.AWS_S3_BUCKET }}/ --recursive --exclude "*" --include "*.html" --content-type "text/html" --metadata-directive REPLACE --acl public-read --cache-control "no-cache" | |
| - name: No-cache index.html | |
| run: aws s3 cp s3://${{ secrets.AWS_S3_BUCKET }}/index.html s3://${{ secrets.AWS_S3_BUCKET }}/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --acl public-read | |
| - name: Slack Notification | |
| uses: rtCamp/action-slack-notify@master | |
| env: | |
| SLACK_ICON_EMOJI: ':books:' | |
| SLACK_USERNAME: mx-sdk-dapp-ui | |
| SLACK_TITLE: 'Storybook' | |
| SLACK_MESSAGE: 'Successfully deployed to: https://${{ secrets.AWS_S3_BUCKET }}' | |
| SLACK_COLOR: 'good' | |
| SLACK_FOOTER: 'Deployed from branch: ${{ github.ref_name }}' | |
| MSG_MINIMAL: false | |
| SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} |