alteryx / dev-harness

Alteryx Dev Harness

The Dev Harness is a real time development environment for building custom tools that will be used within the Alteryx platform. It allows you to rapidly prototype and prove out UIs for your custom tools utilizing the UI-SDK packages: react-comms and alteryx-ui.

Getting Started

The Dev Harness is already equipped with all of the packages you'll need to build a custom tool. After cloning the repo, an npm install will get you setup.

To run the Dev Harness, the standard npm run start command will launch the Dev Harness at localhost port 8080.

Templates

The Dev Harness provides 4 example templates for basic tool frontends. You can simply copy and paste these into the src/index.tsx file, or you can change your webpack configuration to use one of those templates as your entry point.

Webpack

We provide a basic webpack configuration that can be extended to your individual use case. The configuration that comes with the Dev Harness is setup for both dev and prod environments.

dev-harness's Issues

Dev-harness gives me a blank webpage on 8080.

I've been trying to run Alteryx UI, and it wouldn't show in my designer. So, I tried running dev-harness in order to debug this but after many node module incompatibilities and chokidar resource locks I was able to run it and it gave me a blank page.


I resolved the 'resource lock' by deleting createMuitheme which would throw an error causing compiling error.

Support changing the locale

Currently there is no way to change the locale with the dev-harness. Seems like everything is in place for it, but there's no UI yet.

/* AppHeader/index.tsx */

import React, { ChangeEvent } from 'react';
import { Box, MenuItem, TextField } from '@alteryx/ui';

/* ... */

const AppHeader = (props: IAppHeaderProps): JSX.Element => {
  /* ... */
  const handleChangeLocale = (event: ChangeEvent<HTMLInputElement>): void => {
    handleSetLocale(event.target.value);
  };

  return (
    /* ... */
                <Grid item>
                  <FormControlLabel
                    control={(
                      <TextField
                        onChange={handleChangeLocale}
                        select
                        SelectProps={{ autoWidth: false }}
                        value={locale}
                      >
                        {localeOptions.map(option => (
                          <MenuItem key={option.value} value={option.value}>
                            {option.primary}
                          </MenuItem>
                        ))}
                      </TextField>
                    )}
                    label={<Box mr={2}>Locale</Box>}
                    labelPlacement="start"
                  />
                </Grid>
    /* ... */
  );
};

UI SDK Could not resolve dependency: typescript

There looks to be a dependency issue with typescript when setting up the UI SDK. This error occurs when running npm install or using the CLI commands to package a plugin.

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^4.5" from @formatjs/[email protected]
npm ERR!   node_modules/react-intl/node_modules/@formatjs/intl
npm ERR!     @formatjs/intl@"2.2.1" from [email protected]
npm ERR!     node_modules/react-intl
npm ERR!       react-intl@"^5.8.1" from the root project
npm ERR!       1 more (@alteryx/ui)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^4.5" from [email protected]
npm ERR! node_modules/react-intl
npm ERR!   react-intl@"^5.8.1" from the root project
npm ERR!   peer react-intl@"^5.8.1" from @alteryx/[email protected]
npm ERR!   node_modules/@alteryx/ui
npm ERR!     @alteryx/ui@"^1.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^4.5" from [email protected]
npm ERR!   node_modules/react-intl
npm ERR!     react-intl@"^5.8.1" from the root project
npm ERR!     peer react-intl@"^5.8.1" from @alteryx/[email protected]
npm ERR!     node_modules/@alteryx/ui
npm ERR!       @alteryx/ui@"^1.0.0" from the root project```

The App's <iframe> extends beyond the window

The <iframe> that the child app lives in has its height set to 100% which causes the "Tool Name (1)" header to push it offscreen, which is annoying when developing a plugin that normally extends beyond the vertical space. Could be fixed by using flex to fill the remaining space.

<Grid container direction="column" item xs="auto" className={...}>
  <Box m={4}>
    <Grid container alignItems="center">
      <Grid item xs><Typography variant="overline">Tool Name (1)</Typography></Grid>
      <Grid item><IconButton onClick={this.toggleToolDrawer}>...</IconButton></Grid>
    </Grid>
  </Box>
  <Divider />
  <Grid item xs>
    <iframe style={{ border: 0, height: '100%', width: '100%' }} {...} />
  </Grid>
</Grid>

Allow for specifying the port

Currently dev-harness only runs on port 8080 and can't be changed. This is annoying when trying to develop two plugins side-by-side, or if port 8080 is already used by something else.

Webpack already allows specifying the port (e.g. npm start -- --port 1234), but 8080 is hardcoded into the Adapter.

<iframe
  ref={this.handleRef}
  src="http://localhost:8080/childApp.html"
  style={{ border: 0, height: '100%', width: '100%'}}
  title="child-app"
/>

Cannot `npm install`: artifactory.alteryx.com not available

Hi everyone,

when cloning the repository and running npm install, the installation fails with the following error message:

❯ npm install
npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://artifactory.alteryx.com/artifactory/api/npm/npm/yargs/-/yargs-13.3.2.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.alteryx.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/c.harms/.npm/_logs/2021-05-23T10_18_34_757Z-debug.log

The relevant lines in the log file are as follows:

1538 timing reifyNode:node_modules/@material-ui/styles Completed in 5620ms
1539 timing reifyNode:node_modules/react-select Completed in 5688ms
1540 timing reifyNode:node_modules/dom-helpers Completed in 5694ms
1541 timing reifyNode:node_modules/@alteryx/icons Completed in 5730ms
1542 timing reifyNode:node_modules/@material-ui/lab Completed in 5790ms
1543 timing reifyNode:node_modules/@alteryx/ui Completed in 5933ms
1544 timing reifyNode:node_modules/babel-plugin-polyfill-corejs3/node_modules/caniuse-lite Completed in 5996ms
1545 timing reifyNode:node_modules/lodash Completed in 6061ms
1546 timing reifyNode:node_modules/core-js Completed in 6143ms
1547 timing reifyNode:node_modules/@material-ui/core Completed in 6214ms
1548 timing reify:rollback:createSparse Completed in 982ms
1549 timing reify:rollback:retireShallow Completed in 0ms
1550 timing command:install Completed in 8025ms
1551 verbose type system
1552 verbose stack FetchError: request to https://artifactory.alteryx.com/artifactory/api/npm/npm/yargs/-/yargs-13.3.2.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.alteryx.com
1552 verbose stack     at ClientRequest.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:97:14)
1552 verbose stack     at ClientRequest.emit (node:events:365:28)
1552 verbose stack     at TLSSocket.socketErrorListener (node:_http_client:447:9)
1552 verbose stack     at TLSSocket.emit (node:events:377:35)
1552 verbose stack     at emitErrorNT (node:internal/streams/destroy:193:8)
1552 verbose stack     at emitErrorCloseNT (node:internal/streams/destroy:158:3)
1552 verbose stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
1553 verbose cwd /Users/c.harms/Code/External Libs/dev-harness
1554 verbose Darwin 20.4.0
1555 verbose argv "/usr/local/Cellar/node/16.2.0/bin/node" "/usr/local/bin/npm" "install"
1556 verbose node v16.2.0
1557 verbose npm  v7.13.0
1558 error code ENOTFOUND
1559 error syscall getaddrinfo
1560 error errno ENOTFOUND
1561 error network request to https://artifactory.alteryx.com/artifactory/api/npm/npm/yargs/-/yargs-13.3.2.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.alteryx.com
1562 error network This is a problem related to network connectivity.
1562 error network In most cases you are behind a proxy or have bad network settings.
1562 error network
1562 error network If you are behind a proxy, please make sure that the
1562 error network 'proxy' config is set properly.  See: 'npm help config'
1563 verbose exit 1

I could not find an explicit reference to https://artifactory.alteryx.com, but I'm not very familiar with npm, so not sure where to look for a fix. At least it seems to try to get packages from this URL, which is not publicly available.

The problem occurred initially when running from a properly set up Alteryx SDK workspace.

Looking forward to a fix!
Best
Christopher

(see also my post in the Alteryx Community: https://community.alteryx.com/t5/Dev-Space/Alteryx-UI-SDK-Not-able-to-launch-Dev-Harness/td-p/763169)