Move teleport over to Vite (gravitational#21168)

.eslintignore

@@ -1 +1,2 @@
 **/*_pb.*
+.eslintrc.js

.gitignore

@@ -90,3 +90,7 @@ webassets/
 
 # jest --coverage
 coverage
+
+# vite
+.swc
+web/certs/

package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "scripts": {
     "build-ui": "yarn build-ui-oss && yarn build-ui-e",
-    "build-ui-oss": "yarn workspace @gravitational/teleport build --output-path=../../../webassets/teleport/app",
-    "build-ui-e": "yarn workspace @gravitational/teleport.e build --output-path=../../../webassets/e/teleport/app",
+    "build-ui-oss": "yarn workspace @gravitational/teleport build",
+    "build-ui-e": "yarn workspace @gravitational/teleport.e build",
     "start-teleport": "yarn workspace @gravitational/teleport start",
     "start-teleport-e": "yarn workspace @gravitational/teleport.e start",
     "build-term": "yarn workspace @gravitational/teleterm build",
@@ -18,7 +18,7 @@
     "tdd": "jest --watch",
     "lint": "yarn prettier-check && yarn eslint",
     "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx}'",
-    "type-check": "tsc --noEmit",
+    "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --noEmit",
     "prettier-check": "yarn prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx}'",
     "prettier-write": "yarn prettier --write --loglevel silent '+(e|web)/**/*.{ts,tsx,js,jsx}'",
     "nop": "exit 0"
@@ -28,6 +28,7 @@
     "react": "16.14.0",
     "**/minimist": "^1.2.5",
     "**/@types/react": "^16.8.19",
+    "webpack": "^5.75.0",
     "x-default-browser": "^0.5.2"
   },
   "workspaces": {

tsconfig.json

@@ -3,20 +3,23 @@
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
     "baseUrl": ".",
+    "useDefineForClassFields": true,
     "esModuleInterop": true,
     "importHelpers": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
     "lib": [
       "dom",
+      "dom.iterable",
       "esnext"
     ],
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
     "noEmitHelpers": true,
-    "pretty": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
-    "sourceMap": true,
-    "stripInternal": true,
+    "sourceMap": false,
     "target": "esnext",
     "types": [
       "node",
@@ -56,7 +59,20 @@
       ]
     }
   },
+  "include": [
+    "e/web/**/*.ts",
+    "e/web/**/*.tsx",
+    "e/web/**/*.js",
+    "e/web/**/*.jsx",
+    "web/**/*.ts",
+    "web/**/*.tsx",
+    "web/**/*.js",
+    "web/**/*.jsx"
+  ],
+  "references": [{ "path": "./tsconfig.node.json"}],
   "exclude": [
+    "**/vite.config.ts",
+    "web/packages/build/**/*",
     "node_modules",
     "**/node_modules/*",
     "dist",

tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "web/packages/build/vite/*.ts",
+    "web/packages/teleport/vite.config.ts"
+  ]
+}

web/.storybook/preview.js

@@ -18,7 +18,7 @@ import React from 'react';
 import { setupWorker, rest } from 'msw';
 import { addDecorator, addParameters } from '@storybook/react';
 import theme from './../packages/design/src/theme';
-import DefaultThemeProvider from './../packages/design/src/ThemeProvider';
+import DefaultThemeProvider from '../packages/design/src/ThemeProvider';
 import Box from './../packages/design/src/Box';
 import { ThemeProvider as TeletermThemeProvider } from './../packages/teleterm/src/ui/ThemeProvider';
 import { handlersTeleport } from './../packages/teleport/src/mocks/handlers';

web/README.md

@@ -31,7 +31,7 @@ To build the Teleport open source version
 $ yarn build-ui-oss
 ```
 
-The resulting output will be in the `packages/{package-name}/dist/` folders respectively.
+The resulting output will be in the `webassets` folder.
 
 ### Docker Build
 
@@ -47,124 +47,76 @@ See [`README.md` in `packages/teleterm`](packages/teleterm#readme).
 
 ## Development
 
-### Web UI
-
-To avoid having to install a dedicated Teleport cluster,
-you can use a local development server which can proxy network requests
-to an existing cluster.
+### Local HTTPS
 
-For example, if `https://example.com:3080/web` is the URL of your cluster then:
+To run `vite` for either Teleport or Teleport enterprise, you'll need to generate local
+self-signed certificates. The recommended way of doing this is via [mkcert](https://github.com/FiloSottile/mkcert).
 
-To start your local Teleport development server
+You can install mkcert via
 
 ```
-$ yarn start-teleport --target=https://example.com:3080/web
+brew install mkcert
 ```
 
-This service will serve your local javascript files and proxy network
-requests to the given target.
-
-> Keep in mind that you have to use a local user because social
-> logins (google/github) are not supported by development server.
-
-#### Caching
-
-By default, Webpack will store a cache in `node_modules/.cache/webpack` during development. This
-makes starting `webpack-dev-server` really quick after having ran it once, as it will re-use the
-cache from the last time it was running.
-
-If you want to change the location of the cache, you can set `WEBPACK_CACHE_DIRECTORY` to an
-absolute file path of the folder where you want to store Webpack's cache.
-
-If you wish to disable the cache, you can set `WEBPACK_CACHE_DISABLED` to `yes`.
-
-#### Source Maps
-
-During development, Webpack will default to generating source maps using `eval-source-map`.
-This can be overridden by setting the `WEBPACK_SOURCE_MAP` environment variable to one of the
-[available values that Webpack offers](https://webpack.js.org/configuration/devtool/#devtool).
-
-To turn them off, set `WEBPACK_SOURCE_MAP` to `none` -
+After you've done this, run:
 
 ```
-$ WEBPACK_SOURCE_MAP=none yarn start-teleport --target=https://example.com:3080/web
+mkcert -install
 ```
 
-#### Changing the port Webpack runs on
+This will generate a root CA on your machine and automatically trust it (you'll be prompted for your password).
+
+Once you've generated a root CA, you'll need to generate a certificate for local usage.
 
-To make Webpack listen on a different port, you can set the `WEBPACK_PORT` environment variable
-to whatever port you need.
+Run the following from the `web/` directory, replacing `localhost` if you're using a different hostname.
 
 ```
-$ WEBPACK_PORT=6060 yarn start-teleport --target=https://example.com:3080/web
+mkdir -p certs && mkcert -cert-file certs/server.crt -key-file certs/server.key localhost "*.localhost"
 ```
 
-#### Custom HTTPS configuration
+(Note: the `certs/` directory in this repo is ignored by git, so you can place your certificate/keys
+in there without having to worry that they'll end up in a commit.)
 
-If you'd like to provide your own key/certificate for Webpack's development server, you can
-override the default behavior by setting some environment variables.
 
-You should either set:
+#### Certificates in an alternative location
 
-- `WEBPACK_HTTPS_CERT` **(required)** - absolute path to the certificate
-- `WEBPACK_HTTPS_KEY` **(required)** - absolute path to the key
-- `WEBPACK_HTTPS_CA` - absolute path to the ca
-- `WEBPACK_HTTPS_PASSPHRASE` - the passphrase
+If you already have local certificates, you can set the environment variables:
 
-Or:
-
-- `WEBPACK_HTTPS_PFX` **(required)** - absolute path to the certificate
-- `WEBPACK_HTTPS_PASSPHRASE` - the passphrase
+- `VITE_HTTPS_CERT` **(required)** - absolute path to the certificate
+- `VITE_HTTPS_KEY` **(required)** - absolute path to the key
 
 You can set these in your `~/.zshrc`, `~/.bashrc`, etc.
 
 ```
-export WEBPACK_HTTPS_CERT=/Users/you/go/src/github.com/gravitational/webapps/certs/server.crt
-export WEBPACK_HTTPS_KEY=/Users/you/go/src/github.com/gravitational/webapps/certs/server.key
+export VITE_HTTPS_CERT=/Users/you/certs/server.crt
+export VITE_HTTPS_KEY=/Users/you/certs/server.key
 ```
 
-The `certs/` directory in this repo is ignored by git, so you can place your certificate/keys
-in there without having to worry that they'll end up in a commit.
-
-#### Making application access work locally
+### Web UI
 
-For application access to work, you should have it set so you're running Webpack on the same machine
-as Teleport. This is so you can access both Webpack and Teleport via the same domain.
+To avoid having to install a dedicated Teleport cluster,
+you can use a local development server which can proxy network requests
+to an existing cluster.
 
-Imagine you're using the domain `go.teleport` instead of `localhost`.
+For example, if `https://example.com:3080` is the URL of your cluster then:
 
-You should setup `/etc/hosts.yml` like so:
+To start your local Teleport development server
 
 ```
-0.0.0.0 go.teleport
-0.0.0.0 dumper.go.teleport
+PROXY_TARGET=example.com:3080 yarn start-teleport
 ```
 
-Then, run Webpack with the environment variable `WEBPACK_PROXY_APP_ACCESS` set to `true`. This will
-check the incoming `Host` header and compare it against the hostname of the given target flag.
+If you're running a local cluster at `https://localhost:3080`, you can just run
 
 ```
-WEBPACK_PROXY_APP_ACCESS=true yarn start-teleport --target=https://go.teleport:3080/web
+yarn start-teleport
 ```
 
-Going to `go.teleport`, Webpack will compare the `Host` header (`go.teleport`) and the hostname of the target (also
-`go.teleport`). It will therefore only proxy API requests through to Teleport, and serve the Webpack content for all
-other requests.
-
-Going to `dumper.go.teleport`, comparing the `Host` header (`dumper.go.teleport`) and the hostname of the target
-(`go.teleport`). It will proxy every request for this host through to Teleport, making application access work properly.
-
-Note: this only works for local Teleport instances, and won't work for Cloud.
-
-#### Analyzing Webpack's bundle output
-
-To see what is being included in each bundle via [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer), you can set `WEBPACK_ANALYZE_BUNDLE` to `true` to have it running at `localhost:8888`.
-
-```
-$ WEBPACK_ANALYZE_BUNDLE=true yarn start-teleport --target=https://example.com:3080/web
-```
+This service will serve your local javascript files and proxy network
+requests to the given target.
 
-And then go to http://localhost:8888.
+> Keep in mind that you have to use a local user because social
+> logins (google/github) are not supported by development server.
 
 ### Unit-Tests
 

web/packages/build/.eslintrc.js

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const configFactory = require('./webpack/webpack.base');
-
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -111,7 +109,6 @@ module.exports = {
     'no-alert': 0,
     'import/no-named-as-default': 0,
     'import/default': 2,
-    'import/named': 2,
     // XXX Change to a 2 once e pkg imports are removed from teleterm.
     'import/no-unresolved': 1,
     'no-underscore-dangle': 0,
@@ -154,9 +151,7 @@ module.exports = {
       version: 'detect',
     },
     'import/resolver': {
-      webpack: {
-        config: configFactory.createDefaultConfig(),
-      },
+      typescript: {},
     },
   },
 };

web/packages/build/package.json

@@ -40,27 +40,30 @@
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
+    "@swc/plugin-styled-components": "1.5.41",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^27.3.1",
+    "@types/jsdom": "^21.1.0",
     "@types/node": "^16.11.10",
     "@types/react": "^16.8.19",
     "@types/react-router-dom": "^4.3.3",
     "@types/react-transition-group": "^4.4.5",
     "@types/webpack": "^5.28.0",
     "@types/webpack-dev-server": "^4.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "babel-loader": "^8.2.5",
     "clean-webpack-plugin": "4.0.0",
     "core-js": "^3",
     "cross-env": "5.0.5",
     "cross-spawn": "6.0.5",
-    "css-loader": "^6.7.1",
     "electron-builder": "24.0.0-alpha.5",
-    "eslint": "^8.3.0",
+    "eslint": "^8.33.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "2.25.3",
@@ -70,10 +73,11 @@
     "eslint-plugin-testing-library": "^5.6.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "events": "1.0.2",
-    "fork-ts-checker-webpack-plugin": "^7.2.12",
+    "fork-ts-checker-webpack-plugin": "^7.3.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.3.1",
     "jest-styled-components": "^7.0.8",
+    "jsdom": "^21.1.0",
     "msw": "^0.47.4",
     "optimist": "^0.6.1",
     "prettier": "^2.5.0",
@@ -83,11 +87,12 @@
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^17.0.2",
     "react-transition-group": "^4.4.2",
-    "style-loader": "^3.3.1",
+    "rollup-plugin-visualizer": "^5.9.0",
     "styled-components": "5.1.0",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.2.0",
+    "vite-tsconfig-paths": "^4.0.7",
+    "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3"