Skip to content

chore(monorepo): migrate frontend bundling from webpack to vite #7705

chore(monorepo): migrate frontend bundling from webpack to vite

chore(monorepo): migrate frontend bundling from webpack to vite #7705

# Run tests, build components bundle, and deploy it to sandbox
name: 'Components test, build, and deploy'
on:
pull_request:
paths:
- 'Makefile'
- 'components/**'
- 'app/**/*.stories.@(js|jsx|ts|tsx)'
- 'package.json'
- '.github/workflows/components-test-build-deploy.yaml'
push:
paths:
- 'components/**'
- 'app/**/*.stories.@(js|jsx|ts|tsx)'
- 'package.json'
- '.github/workflows/components-test-build-deploy.yaml'
branches:
- '**'
tags:
- 'components*'
workflow_dispatch:
concurrency:
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}-${{ github.ref_name != 'edge' || github.run_id}}-${{ github.ref_type != 'tag' || github.run_id }}
cancel-in-progress: true
defaults:
run:
shell: bash
env:
CI: true
jobs:
js-unit-test:
name: 'components unit tests'
timeout-minutes: 30
runs-on: 'ubuntu-22.04'
steps:
- uses: 'actions/checkout@v3'
- uses: pnpm/action-setup@v3
with:
version: 8
- uses: 'actions/setup-node@v3'
with:
node-version: '18.19.0'
- name: 'install udev for usb-detection'
run: sudo apt-get update && sudo apt-get install libudev-dev
- name: 'setup-js'
run: |
npm config set cache ./.npm-cache
make setup-js
- name: 'run components unit tests'
run: make -C components test-cov
- name: 'Upload coverage report'
uses: codecov/codecov-action@v3
with:
files: ./coverage/lcov.info
flags: components
build-components-storybook:
name: 'build components artifact'
runs-on: 'ubuntu-22.04'
if: github.event_name != 'pull_request'
# TODO IMMEDIATELY: revert change below. doing this so i can test component builds without tests passing
#needs: ['js-unit-test']
steps:
- uses: 'actions/checkout@v3'
- uses: pnpm/action-setup@v3
with:
version: 8
- uses: 'actions/setup-node@v3'
with:
node-version: '18.19.0'
- name: 'install udev for usb-detection'
run: sudo apt-get update && sudo apt-get install libudev-dev
- name: 'setup-js'
run: |
npm config set cache ./.npm-cache
make setup-js
- name: 'build components'
run: make -C components
- name: 'upload github artifact'
uses: actions/upload-artifact@v3
with:
name: 'components-artifact'
path: storybook-static
determine-build-type:
runs-on: 'ubuntu-latest'
name: 'Determine build type'
outputs:
type: ${{steps.determine-build-type.outputs.type}}
steps:
- id: determine-build-type
run: |
echo "Determining build type for event ${{github.event_type}} and ref ${{github.ref}}"
if [ "${{ format('{0}', github.ref == 'refs/heads/edge') }}" = "true" ] ; then
echo "storybook s3 builds for edge"
echo 'type=storybook' >> $GITHUB_OUTPUT
elif [ "${{ format('{0}', startsWith(github.ref, 'refs/tags/components')) }}" = "true" ] ; then
echo "publish builds for components tags"
echo 'type=publish' >> $GITHUB_OUTPUT
else
echo "No build for ref ${{github.ref}} and event ${{github.event_type}}"
echo 'type=none' >> $GITHUB_OUTPUT
fi
deploy-components:
name: 'deploy components storybook artifact to S3'
runs-on: 'ubuntu-22.04'
needs:
# TODO IMMEDIATELY: revert change below. doing this so i can test component builds without tests passing
['build-components-storybook', 'determine-build-type']
if: needs.determine-build-type.outputs.type != 'none'
steps:
- uses: 'actions/checkout@v3'
# https://github.com/actions/checkout/issues/290
- name: 'Fix actions/checkout odd handling of tags'
if: startsWith(github.ref, 'refs/tags')
run: |
git fetch -f origin ${{ github.ref }}:${{ github.ref }}
git checkout ${{ github.ref }}
- uses: pnpm/action-setup@v3
with:
version: 8
- uses: 'actions/setup-node@v3'
with:
node-version: '18.19.0'
- name: 'set complex environment variables'
id: 'set-vars'
uses: actions/github-script@v6
with:
script: |
const { buildComplexEnvVars } = require(`${process.env.GITHUB_WORKSPACE}/.github/workflows/utils.js`)
buildComplexEnvVars(core, context)
- name: 'download components build'
uses: 'actions/download-artifact@v3'
with:
name: components-artifact
path: ./dist
- name: 'deploy builds to s3'
env:
AWS_ACCESS_KEY_ID: ${{ secrets.S3_SANDBOX_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SANDBOX_SECRET }}
AWS_DEFAULT_REGION: us-east-2
run: |
aws s3 sync ./dist s3://opentrons-components/${{ env.OT_BRANCH}} --acl public-read
publish-components:
name: 'publish components package to npm'
runs-on: 'ubuntu-latest'
# TODO IMMEDIATELY: revert change below. doing this so i can test component builds without tests passing
needs: ['determine-build-type']
if: needs.determine-build-type.outputs.type == 'publish'
steps:
- uses: 'actions/checkout@v3'
# https://github.com/actions/checkout/issues/290
- name: 'Fix actions/checkout odd handling of tags'
if: startsWith(github.ref, 'refs/tags')
run: |
git fetch -f origin ${{ github.ref }}:${{ github.ref }}
git checkout ${{ github.ref }}
- uses: pnpm/action-setup@v3
with:
version: 8
- uses: 'actions/setup-node@v3'
with:
node-version: '18.19.0'
registry-url: 'https://registry.npmjs.org'
- name: 'setup-js'
run: |
npm config set cache ./.npm-cache
yarn config set cache-folder ./.yarn-cache
- name: 'build typescript'
run: make build-ts
- name: 'build library'
run: |
make -C components lib
# replace package.json stub version number with version from tag
- name: 'set version number'
run: |
npm install -g json
VERSION_STRING=$(echo ${{ github.ref }} | sed 's/refs\/tags\/components@//')
json -I -f ./components/package.json -e "this.version=\"$VERSION_STRING\""
json -I -f ./components/package.json -e "this.dependencies['@opentrons/shared-data']=\"$VERSION_STRING\""
- uses: 'actions/setup-node@v3'
with:
node-version: '18.19.0'
registry-url: 'https://registry.npmjs.org'
- name: 'publish to npm registry'
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
cd ./components && echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" > ./.npmrc && npm publish --access public