feat(device-ui): change name and config

BREAKING CHANGE: use node cli device-ui-config instead

This changes the naming of the Device UI and also
separates the config script from the react-config
because the Device Simulator Web Application
(formerly Device UI) is no longer based on
create-react-app

cdk/apps/Bifravst.ts

@@ -36,10 +36,10 @@ export class BifravstApp extends App {
  onUndefined: 'enabled',
  onEnabled: () => new WebAppStack(this),
  })
- // Device UI
+ // Device Simulator Web Application
  checkFlag({
  key: 'deviceui',
- component: 'Device UI',
+ component: 'Device Simulator Web Application',
  onUndefined: 'enabled',
  onEnabled: () => new DeviceUIStack(this),
  })

cdk/stacks/Bifravst.ts

@@ -471,7 +471,7 @@ export type StackOutputs = {
  webAppDomainName: string
  deviceUiBucketName: string
  cloudfrontDistributionIdDeviceUi: string
- deviceUiDomainName: string
+ deviceUiBaseUrl: string
  jitpRoleArn: string
  thingPolicyArn: string
  thingGroupName: string

cdk/stacks/ContinuousDeployment.ts

@@ -49,20 +49,20 @@ export class ContinuousDeploymentStack extends CloudFormation.Stack {
  'Whether the continuous deployment of the Web App is enabled or disabled.',
  })
 
- // CD for the Device UI is implied by enabled CD (in that case this Stack exists) and enabled Device UI
+ // CD for the Device Simulator Web Application is implied by enabled CD (in that case this Stack exists) and enabled Device Simulator Web Application
  const enableDeviceUICD = checkFlag({
  key: 'deviceui',
- component: 'Device UI Continuous Deployment',
+ component: 'Device Simulator Web Application Continuous Deployment',
  onUndefined: 'enabled',
  })
  new CloudFormation.CfnOutput(this, 'deviceUICD', {
  value: enableDeviceUICD ? 'enabled' : 'disabled',
  exportName: `${this.stackName}:deviceUICD`,
  description:
- 'Whether the continuous deployment of the Device UI is enabled or disabled.',
+ 'Whether the continuous deployment of the Device Simulator Web Application is enabled or disabled.',
  })
 
- // CD for the Device UI is implied by enabled CD (in that case this Stack exists) and enabled Device UI
+ // CD for the Device Simulator Web Application is implied by enabled CD (in that case this Stack exists) and enabled Device Simulator Web Application
  const enabledFirmwareCiCD = checkFlag({
  key: 'firmware-ci',
  component: 'Firmware CI Continuous Deployment',
@@ -240,14 +240,15 @@ export class ContinuousDeploymentStack extends CloudFormation.Stack {
  ).codeBuildProject
  }
 
- // Sets up the continuous deployment for the device UI
+ // Sets up the continuous deployment for the Device Simulator Web Application
  let deviceUICDProject
  if (enableDeviceUICD) {
  deviceUICDProject = new WebAppCD(
  this,
  `${CONTINUOUS_DEPLOYMENT_STACK_NAME}-deviceUICD`,
  {
- description: 'Continuously deploys the Bifravst Device UI',
+ description:
+ 'Continuously deploys the Bifravst Device Simulator Web Application',
  sourceCodeActions: {
  bifravst: bifravstSourceCodeAction,
  webApp: deviceUISourceCodeAction,

cdk/stacks/DeviceUI.ts

@@ -17,9 +17,9 @@ export class DeviceUIStack extends CloudFormation.Stack {
  exportName: `${this.stackName}:cloudfrontDistributionIdDeviceUi`,
  })
 
- new CloudFormation.CfnOutput(this, 'deviceUiDomainName', {
- value: deviceUIHosting.distribution.attrDomainName,
- exportName: `${this.stackName}:deviceUiDomainName`,
+ new CloudFormation.CfnOutput(this, 'deviceUiBaseUrl', {
+ value: `https://${deviceUIHosting.distribution.attrDomainName}/`,
+ exportName: `${this.stackName}:deviceUiBaseUrl`,
  })
  }
 }

cli/bifravst.ts

@@ -21,6 +21,7 @@ import { region } from '../cdk/regions'
 import { firmwareCICommand } from './commands/firmware-ci'
 import { certsDir as provideCertsDir } from './jitp/certsDir'
 import { flashCommand } from './commands/flash'
+import { deviceUIConfigCommand } from './commands/device-ui-config'
 
 const iot = new Iot({
  region,
@@ -75,6 +76,7 @@ const bifravstCLI = async ({ isCI }: { isCI: boolean }) => {
  createCACommand({ certsDir }),
  createDeviceCertCommand({ endpoint, certsDir }),
  reactConfigCommand(),
+ deviceUIConfigCommand(),
  infoCommand(),
  cdCommand(),
  purgeIotUserPolicyPrincipals(),

cli/commands/connect.ts

@@ -27,12 +27,16 @@ export const connectCommand = ({
  action: async (deviceId: string, { endpoint: e }) => {
  let deviceUiUrl = ''
  try {
- const { deviceUiDomainName } = await stackOutput(
+ const { deviceUiBaseUrl } = await stackOutput(
  new CloudFormation({ region }),
  )<StackOutputs>(DEVICEUI_STACK_NAME)
- deviceUiUrl = `https://${deviceUiDomainName}`
+ deviceUiUrl = deviceUiBaseUrl
  } catch (err) {
- console.error(chalk.red.dim(`Could not determine Device UI URL.`))
+ console.error(
+ chalk.red.dim(
+ `Could not determine Device Simulator Web Application URL.`,
+ ),
+ )
  }
  return connect({
  deviceId,

cli/commands/device-ui-config.ts

@@ -0,0 +1,24 @@
+import { CommandDefinition } from './CommandDefinition'
+import { stackOutput } from '@bifravst/cloudformation-helpers'
+import { objectToEnv } from '@bifravst/object-to-env'
+import { CloudFormation } from 'aws-sdk'
+import { DEVICEUI_STACK_NAME } from '../../cdk/stacks/stackName'
+import { region } from '../../cdk/regions'
+
+export const deviceUIConfigCommand = (): CommandDefinition => ({
+ command: 'device-ui-config',
+ action: async () => {
+ const so = stackOutput(new CloudFormation({ region }))
+ process.stdout.write(
+ objectToEnv(
+ {
+ ...(await so(DEVICEUI_STACK_NAME)),
+ region,
+ },
+ 'SNOWPACK_PUBLIC_',
+ ),
+ )
+ },
+ help:
+ 'Prints environment variables needed for the Device Simulator Web Application.',
+})

cli/commands/react-config.ts

@@ -2,11 +2,7 @@ import { CommandDefinition } from './CommandDefinition'
 import { stackOutput } from '@bifravst/cloudformation-helpers'
 import { objectToEnv } from '@bifravst/object-to-env'
 import { CloudFormation } from 'aws-sdk'
-import {
- CORE_STACK_NAME,
- WEBAPP_STACK_NAME,
- DEVICEUI_STACK_NAME,
-} from '../../cdk/stacks/stackName'
+import { CORE_STACK_NAME, WEBAPP_STACK_NAME } from '../../cdk/stacks/stackName'
 import { region } from '../../cdk/regions'
 
 export const reactConfigCommand = (): CommandDefinition => ({
@@ -18,7 +14,6 @@ export const reactConfigCommand = (): CommandDefinition => ({
  {
  ...(await so(CORE_STACK_NAME)),
  ...(await so(WEBAPP_STACK_NAME)),
- ...(await so(DEVICEUI_STACK_NAME)),
  region,
  },
  'REACT_APP_',

continuous-deployment-device-ui-app.yml

@@ -8,7 +8,7 @@ phases:
  - npx tsc
  build:
  commands:
- - node cli react-config >
+ - node cli device-ui-config >
  $CODEBUILD_SRC_DIR_DeviceUI/.env.production.local
  - export INITIATOR_PIPELINE_NAME=`echo $CODEBUILD_INITIATOR | cut -d'/'
  -f2`
@@ -21,7 +21,9 @@ phases:
  - export $(cat $CODEBUILD_SRC_DIR_DeviceUI/.env.production.local | xargs)
  - cd $CODEBUILD_SRC_DIR_DeviceUI/; npm ci --no-audit; npm run build;
  - aws s3 cp $CODEBUILD_SRC_DIR_DeviceUI/build
- s3://$REACT_APP_DEVICE_UI_BUCKET_NAME --recursive --metadata-directive
- REPLACE --cache-control 'public,max-age=600' --expires ''
+ s3://$SNOWPACK_PUBLIC_DEVICE_UI_BUCKET_NAME --recursive
+ --metadata-directive REPLACE --cache-control 'public,max-age=600'
+ --expires ''
  - aws cloudfront create-invalidation --distribution-id
- $REACT_APP_CLOUDFRONT_DISTRIBUTION_ID_DEVICE_UI --paths /,/index.html
+ $SNOWPACK_PUBLIC_CLOUDFRONT_DISTRIBUTION_ID_DEVICE_UI --paths
+ /,/index.html