https://flyte.org logo
Join Slack
Powered by
hi folks, i am trying to find play around the fly...
# ask-the-community
j
hi folks, i am trying to find play around the flyte console code base https://github.com/flyteorg/flyteconsole. I was able to start a mock UI at 3000 by running yarn install and yarn start. However I cannot find the project i started in the backend. I started the backend by
Copy code
flytectl demo start
and its output is
Copy code
→ flytectl demo start
INFO[0000] [0] Couldn't find a config file []. Relying on env vars and pflags.
 Bootstrapping a brand new Flyte cluster...
 Going to use Flyte v1.10.0 release with image cr.flyte.org/flyteorg/flyte-sandbox-bundled:sha-fa49d3bfcdc081328e2f1514fd513ec46fdbf734
 Pulling image cr.flyte.org/flyteorg/flyte-sandbox-bundled:sha-fa49d3bfcdc081328e2f1514fd513ec46fdbf734
sha-fa49d3bfcdc081328e2f1514fd513ec46fdbf734: Pulling from flyteorg/flyte-sandbox-bundled
60f6cde338d5: Pull complete
d06791c7889c: Pull complete
e16c15fb07ef: Pull complete
353c3c722b3b: Pull complete
b43b7213dfc9: Pull complete
a68cc7c2ab6d: Pull complete
1bc7f4db6d75: Pull complete
Digest: sha256:71665d019657e9f93585ff21743559006909833a4dac2ff1b616491c2599b815
Status: Downloaded newer image for cr.flyte.org/flyteorg/flyte-sandbox-bundled:sha-fa49d3bfcdc081328e2f1514fd513ec46fdbf734
 Starting container...
 Waiting for cluster to come up...
 Activated context "flyte-sandbox"!
+-----------------------------------------------------+---------------+-----------+
|                       SERVICE                       |    STATUS     | NAMESPACE |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-kubernetes-dashboard-6757db879c-hjzj9 | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-docker-registry-6ddd797ddb-fnh79      | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-proxy-d95874857-h7f6c                 | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-minio-645c8ddf7c-slqkx                | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-postgresql-0                          | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-buildkit-7d7d55dbb-mjfj2              | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyteagent-7b7f469dbf-tlvr8                         | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
| flyte-sandbox-76f7d4c6c9-r2r6p                      | Running       | flyte     |
+-----------------------------------------------------+---------------+-----------+
 Flyte is ready! Flyte UI is available at <http://localhost:30080/console>
 Run the following command to export demo environment variables for accessing flytectl
        export FLYTECTL_CONFIG=/home/jassun/.flyte/config-sandbox.yaml
 Flyte sandbox ships with a Docker registry. Tag and push custom workflow images to localhost:30000
 The Minio API is hosted on localhost:30002. Use <http://localhost:30080/minio/login> for Minio console
Then i ran
Copy code
pyflyte run --remote example.py training_workflow \
    --hyperparameters '{"C": 0.1}'
Then i was able to find the project in localhost:30080. Bot localhost:3000 only shows a blank page as shown in the screenshot. Wondering if i set things up the wrong way. This is my first attempt at flyte codebase...
s
@Jason Sun any specific reason behind running flyte console in development mode? if you want to just test flyte, why don't you spin up the demo cluster and run your workflows?
flytectl demo start
command should also display the UI with flytesnacks project installed by default.
j
hi @Samhita Alla, I want to dabble with the flyte console's react UI and test it with my local flyte backend.
y
any console errors you’re seeing?
localhost:30080 should be properly forwarded to handle all api calls. you should be able to confirm this by running curl commands on the command line.
i think there’s an ADMIN_API_URL environment variable or something that you can set.
maybe @Jason Porter knows off the top of his head.
j
when i use 30080 to find the flytesnacks project i can and this is the screenshot. But when i change the address's port from 30080 to 3000, the page returned empty and bounced back with the following screenshot . And the yarn local server is printing the following
Copy code
modules by path ../node_modules/ 3.84 MiB 636 modules
  modules by path ../packages/console/src/ 1.18 MiB (javascript) 775 bytes (asset) 463 modules
  modules by path ../packages/ui-atoms/ 1.34 MiB 360 modules
  modules by path ../packages/components/ 1.29 MiB 350 modules
  modules by path ../packages/flyte-api/ 92.8 KiB 49 modules
  modules by path ../packages/common/src/ 1.56 KiB 4 modules
  modules by path ./ 2.8 KiB 2 modules
  modules by path ../packages/flyteidl-types/ 2.78 MiB 2 modules
  modules by path ../packages/locale/src/*.ts 912 bytes 2 modules
  ../packages/console/package.json 3.83 KiB [optional] [built] [code generated]
    Entrypoint HtmlWebpackPlugin_0-0 =
    runtime modules 734 bytes 4 modules
    cacheable modules 2.08 KiB
      data:text/javascript,__webpack_public.. 77 bytes [built] [code generated]
      ../node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 2.01 KiB [built] [code generated]

    Child HtmlWebpackCompiler compiled successfully
  client (webpack 5.88.2) compiled successfully in 45669 ms

server:
  asset server.js 4.19 MiB [emitted] (name: main)
  runtime modules 23.4 KiB 9 modules
  modules by path ../node_modules/ 1.58 MiB
    javascript modules 1.32 MiB 202 modules
    json modules 262 KiB
      modules by path ../node_modules/iconv-lite/ 86.7 KiB 8 modules
      + 3 modules
  modules by path ./ 7.28 KiB
    modules by path ./src/server/*.ts 5.13 KiB
      ./src/server/index.ts 3.2 KiB [built] [code generated]
      ./src/server/router.ts 1 KiB [built] [code generated]
      ./src/server/plugins.ts 953 bytes [built] [code generated]
    ./env.js 1.99 KiB [built] [code generated]
    ./src/server/ sync 160 bytes [built] [code generated]
  + 16 modules

  WARNING in ../node_modules/express/lib/view.js 81:13-25
  Critical dependency: the request of a dependency is an expression
   @ ../node_modules/express/lib/application.js 22:11-28
   @ ../node_modules/express/lib/express.js 18:12-36
   @ ../node_modules/express/index.js 11:0-41
   @ ./src/server/index.ts 11:42-60

  WARNING in ./src/server/plugins.ts 9:6-33
  Critical dependency: the request of a dependency is an expression
   @ ./src/server/index.ts 15:18-38

  2 warnings have detailed information that is not shown.
  Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

  server (webpack 5.88.2) compiled with 2 warnings in 10533 ms
Rewriting GET /select-project to /index.html
Rewriting GET /select-project to /index.html
Rewriting GET /select-project to /index.html
Rewriting GET /console/projects to /index.html
Rewriting GET /console/projects/flytesnacks/domains/development/executions/f37821ecb8e494a698c6?duration=all to /index.html
Rewriting GET /console/projects/flytesnacks/domains/development/executions/f37821ecb8e494a698c6?duration=all to /index.html
Rewriting GET /select-project to /index.html
Rewriting GET /console/projects/flytesnacks/domains/development/executions/f37821ecb8e494a698c6?duration=all to /index.html
I did set
Copy code
export ADMIN_API_URL=<http://localhost:30080>
before 
yarn start
and this is the console error i got in chrome F12.
ok i think i resolved the issue at least part of by installing the CORS chrome extension.
now i can view the flow in 3000 port cc: @Byron Hsu @Samhita Alla
hi team, i seem to come across a new issue w.r.t hot reload: so i setup a dev server via yarn start. And it can read the backend workflows fine. But when i tried to change one of the ts files, it triggers a reload which is expected. However, the reload fails with a lot of module resolution errors: (close to 200 of them..)
Copy code
ERROR in ../packages/console/src/routes/constants.ts:1:27
  TS2307: Cannot find module '@flyteorg/common' or its corresponding type declarations.
    > 1 | import { makeRoute } from '@flyteorg/common';
        |                           ^^^^^^^^^^^^^^^^^^
      2 |
      3 | const projectPrefix = '/projects/:projectId';
      4 |

  ERROR in ../packages/console/src/routes/routes.ts:3:27
  TS2307: Cannot find module '@flyteorg/common' or its corresponding type declarations.
      1 | import { ensureSlashPrefixed } from 'common/utils';
      2 | import { WorkflowExecutionIdentifier } from 'models/Execution/types';
    > 3 | import { makeRoute } from '@flyteorg/common';
        |                           ^^^^^^^^^^^^^^^^^^
      4 | import { projectBasePath, projectDomainBasePath } from './constants';
      5 |
It seems like the root cause is that it cannot resolve the module import for 
@flyteorg/*.
I didn't touch anything in the tsconfig.json file. Wondering if this is a known issue or i set up thing incorrectly.. It's weird since i can build it on my first clone. But all subsequent build code change would fail. My dev environment: 1. linux centos 7 2. terminal+neovim I tried 1. add skipLibCheck=true in tsconfig.json in the root dir, but it doesn't work. 2. yarn clean cache and rebuild, it doesn't work. 3. delete the whole project folder and restart my linux vm and reclone / resetup everything, it works on the first build, but subsequent build will fail after code change. To reproduce: 1. clone the flyte console repo 2. cd flyte-console 3. mkdir pyenv && cd pyenv && python -m venv ./ && pip install flytekit flytekitplugins-deck-standard scikit-learn 4. source ./bin/activate 5. cd .. 6. mkdir test_flows 7. create a file called example.py inside test_flows folder, verbatim from https://docs.flyte.org/projects/cookbook/en/latest/index.html 8. flytectl demo start 9. export ADMIN_API_URL=http://localhost:30080 10. pyflyte run --remote test_flows/example.py training_workflow --hyperparameters '{"C": 0.1}' 11. yarn install 12. yarn build 13. open https://localhost:3000 14. things should work as expected up to this point. 15. change something in the code base, what i did: change package/components/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts: change the 
duration
name to 
duratio
16. at this point, it dev server triggers a hot reload. but it will fail because it could'nt find all the 
@flyteorg/
related imports/type declarations. @Samhita Alla @Jason Porter cc: @Byron Hsu
y
oh… this is very much in the wheelhouse of frontend dev.
@Jason Porter could you ping someone on your team?
j
@Jason Porter ^^
update on this: I figured out what is causing this error and its fix. I need to run
Copy code
npm run build:pack
and
Copy code
npm run build:type
before yarn start so make sure the relevant bindings are there (this step is not described in the README.md and i found it out by reading 
package.json
in search of clues on what's causing the erro... But all is good now, I can now do hot reload. cc: @Jason Porter @Byron Hsu @Yee
5 Views
Open in Slack
PreviousNext
Powered by