Move teleport over to Vite

[ryanclark]

Moves the build process for teleport and teleport.e from Webpack to Vite. This is still a draft as I'm sure there are some bugs to iron out.

Example commands

Build Teleport

As normal -

yarn build-ui

Develop Teleport

Instead of passing through --target, you need to specify your target via PROXY_TARGET. If you're running a proxy locally at localhost:3080, you don't need to specify PROXY_TARGET.

When running the dev server locally, it will try and look for certificates in web/certs. Please follow the instructions in web/README.md to configure HTTPS

yarn start-teleport
PROXY_TARGET=some.other.host.com:3080 yarn start-teleport-e

If you use my development environment, you can switch over to the vite branch to test this out.

[zmb3]

It would be cool if we could somehow detect https_keypairs from teleport.yaml rather than generating a separate set of certs for the dev server, but I guess that would require we somehow tell vite where the teleport config is.

I tried to run locally and it looks like the dev server starts, but I get an SSL protocol error when connecting from Chrome.

VITE_TARGET=localhost:3080 VITE_HTTPS_CERT=~/t/proxy.127.0.0.1.nip.io+4.pem VITE_HTTPS_KEY=~/t/proxy.127.0.0.1.nip.io+4-key.pem yarn start-teleport
yarn run v1.22.19
$ yarn workspace @gravitational/namespaces start-teleport
$ yarn workspace @gravitational/teleport start
$ vite

  VITE v4.0.4  ready in 391 ms

  ➜  Local:   https://localhost:3000/
  ➜  Network: https://192.168.1.136:3000/
  ➜  press h to show help

[strideynet]

As of the fix introduced in f6dedd5 this now works on my machine where I run teleport on a domain name that is not localhost :D

[ravicious]

Do you happen to have some stats on how it affects the size of compiled assets?

[public-teleport-github-review-bot]

@ryanclark - this PR will require admin approval to merge due to its size. Consider breaking it up into a series smaller changes.

[gzdunek]

I have two issues:

• without VITE_SKIP_SSL I get:

grzegorz@mbp teleport % VITE_TARGET=localhost:3080 yarn start-teleport 
yarn run v1.22.19
$ yarn workspace @gravitational/teleport start
$ vite
error when starting dev server:
Error: Command failed: "/Users/grzegorz/.vite-plugin-mkcert/mkcert" -CAROOT
/bin/sh: /Users/grzegorz/.vite-plugin-mkcert/mkcert: is a directory

    at ChildProcess.exithandler (node:child_process:402:12)
    at ChildProcess.emit (node:events:513:28)
    at maybeClose (node:internal/child_process:1100:16)
    at Socket.<anonymous> (node:internal/child_process:458:11)
    at Socket.emit (node:events:513:28)
    at Pipe.<anonymous> (node:net:301:12)

• with VITE_SKIP_SSL=yes I can't log in (access denied). I found this in logs:

2023-02-23T13:49:09+01:00 WARN [WEB]       http: named cookie not present request:GET /web web/apiserver.go:3399
2023-02-23T13:49:10+01:00 WARN [WEB]       http: named cookie not present request:GET /web web/apiserver.go:3399
2023-02-23T13:49:15+01:00 WARN             "unable to validate CSRF token unable to extract CSRF token from cookie\n\thttp: named cookie not present" httplib/httplib.go:145

Is something misconfigured on my end?

[gzdunek]

Connect seems to work fine, but I can't login to the Web UI :(

I still get Access denied and I see this in logs:

2023-03-16T10:14:39+01:00 WARN [WEB]       http: named cookie not present request:GET /web web/apiserver.go:3472
2023-03-16T10:14:45+01:00 WARN             "unable to validate CSRF token unable to extract CSRF token from cookie\n\thttp: named cookie not present" httplib/httplib.go:146

@ryanclark could you try clearing cookies and then logging in?

[kimlisa]

working great so far, except for that one bug.

can we also update outdated default ports on our web/README file? eg: mfa stuff

another thing is when i run yarn build-ui, an extra file gets created in the web/teleport/.swc file (idk what it is or if we need it):

[kimlisa]

not true, i tested it by setting up github for local use and it works. this was also supported before as well. other connectors might not work for local, i think there was another one that worked for local use but can't remember (i favor github for testing b/c it's the easiest to set up)

[ryanclark]

This was there already - shall I remove this?

[kimlisa]

oh i see, yeah i'd remove it

[hatched]

Thanks for keeping up with this, this is a huge build speed improvement! 👍

[ravicious]

This is so fast. 😵‍💫

[ravicious]

The css attribute doesn't appear to be handled correctly in stories. Compare the Quick Input Suggestions story between 471a82b and its parent. The css attribute of the div returned by QuickInputListWrapper is not processed in any way and is just inserted verbatim into the HTML.

IIRC there were some problems with Vite and styled-components, right? Though Storybook still uses Webpack so idk what's going on here. 🤔

[ryanclark]

@ravicious #23427