Switching to Vite for UI Dev (#924)

* WIP * Get bulma and fontawesome to work * Fix sass division warnings * Rm .vue extensions * Restore ui folder back to main * setup proxy * Get Jest working * eslint and prettier configs * prettier ignore * Rm old ui dir * Fix build * Support proxying config via env vars * Add filter func * README updates; run vite on 8081 * Cleanup * Fix Dockerfile
flipt-io · Jul 5, 2022 · 6cb4025 · 6cb4025
1 parent ed07fea
commit 6cb4025
Show file tree

Hide file tree

Showing 67 changed files with 24,211 additions and 32,041 deletions.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -34,7 +34,7 @@ The `bootstrap` task will install all of the necessary tools used for developmen
 Configuration for running when developing Flipt can be found at `./config/local.yml`. To run Flipt with this configuration, run:
 
 ```shell
-task dev
+task server
 ```
 
 ## Changes
@@ -55,30 +55,36 @@ Running `task assets` will regenerate the embedded assets (ui, api documentation
 
 #### UI components
 
-The UI is built using [NPM](https://nodejs.org/en/) and [webpack](https://webpack.js.org/) and is also statically compiled into the Flipt binary.
+The UI is built using [NPM](https://nodejs.org/en/) and [Vite](https://vitejs.dev/) and is also statically compiled into the Flipt binary.
 
 The [ui/README.md](https://github.com/markphelps/flipt/tree/main/ui/README.md) has more information on how to build the UI and also how to run it locally during development.
 
-## Remote Containers/GitHub Codespaces
+## Building/Running
 
-Flipt now supports [VSCode Remote Containers](https://github.com/Microsoft/vscode-dev-containers)/[GitHub Codespaces](https://github.com/features/codespaces).
+**Run `script/server` from the project root.**
 
-These technologies allow you to quickly get setup with a Flipt development environment either locally or 'in the cloud'.
+Vite will rebuild the UI assets when applicable files in the `ui` folder change. See [ui/README.md](https://github.com/markphelps/flipt/tree/main/ui/README.md) for more info.
 
-For VSCode Remote Containers (devcontainers), make sure you have [Docker](https://www.docker.com/get-started) and the [ms-vscode-remote.remote-containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed. Then simply clone this repo, open it in VSCode and run the [`Remote-Containers: Open Folder in Container`](https://code.visualstudio.com/docs/remote/containers#_quick-start-open-an-existing-folder-in-a-container) command in VSCode.
+You'll need to stop and re-run `script/server` for any changes in the server (Go) code :exclamation:
 
-If you have access to [GitHub Codespaces](https://github.com/features/codespaces), simply open Flipt in a codespaces from the `Code` tab in the repo on GitHub or click the button below.
+### Ports
 
-[![Open in Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new/?repo=markphelps/flipt)
+In development, the three ports that Flipt users are:
+
+- `8080`: The port for the Flipt REST API
+- `8081`: The port for the Flipt UI (via `npm run dev`)
+- `9000`: The port for the Flipt GRPC Server
 
-### Building/Running
+These three ports will be forwarded to your local machine automatically if you are developing Flipt in a VSCode Remote Container or GitHub Codespace.
 
-Run `script/server` from the project root.
+## Remote Containers/GitHub Codespaces
 
-The `webpack-dev-server` that is used when running the UI in development mode will rebuild the UI assets when applicable files in the `ui` folder change. See [ui/README.md](https://github.com/markphelps/flipt/tree/main/ui/README.md) for more info.
+Flipt now supports [VSCode Remote Containers](https://github.com/Microsoft/vscode-dev-containers)/[GitHub Codespaces](https://github.com/features/codespaces).
 
-### Ports
+These technologies allow you to quickly get setup with a Flipt development environment either locally or 'in the cloud'.
 
-The three ports `8080`, `8081`, `9000` will be forwarded to your local machine automatically.
+For VSCode Remote Containers (devcontainers), make sure you have [Docker](https://www.docker.com/get-started) and the [ms-vscode-remote.remote-containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed. Then simply clone this repo, open it in VSCode and run the [`Remote-Containers: Open Folder in Container`](https://code.visualstudio.com/docs/remote/containers#_quick-start-open-an-existing-folder-in-a-container) command in VSCode.
+
+If you have access to [GitHub Codespaces](https://github.com/features/codespaces), simply open Flipt in a codespaces from the `Code` tab in the repo on GitHub or click the button below.
 
-`8081` is the UI dev port that runs the `npm dev server` that you can open in your browser.
+[![Open in Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new/?repo=markphelps/flipt)
diff --git a/Dockerfile b/Dockerfile
@@ -19,7 +19,7 @@ RUN apt-get update && \
 RUN curl -sSL https://deb.nodesource.com/setup_18.x | bash && \
     apt-get update && \
     apt-get install -y --no-install-recommends \
-    nodejs \
+    nodejs && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*
 

diff --git a/Taskfile.yml b/Taskfile.yml
@@ -4,6 +4,7 @@ version: 3
 vars:
   PROJECT: flipt
   SOURCE_FILES: ./...
+  UI: ui
 
 tasks:
   default:
@@ -20,29 +21,28 @@ tasks:
   assets:
     desc: Build the UI
     deps: [assets:deps]
+    dir: "{{.UI}}"
     cmds:
-      - cd ui && npm run build
-    env:
-      NODE_OPTIONS: --openssl-legacy-provider
+      - npm run build
     sources:
-      - ./ui/static/*
-      - ./ui/src/**/*
-      - ./ui/src/**/**/*
-      - ./ui/index.html
-      - ./ui/package.json
+      - ./{{.UI}}/static/*
+      - ./{{.UI}}/src/**/*
+      - ./{{.UI}}/src/**/**/*
+      - ./{{.UI}}/index.html
+      - ./{{.UI}}/package.json
     method: checksum
 
   assets:deps:
     desc: Install UI dependencies
+    dir: "{{.UI}}"
     cmds:
-      - cd ui && npm ci
-    env:
-      NODE_OPTIONS: --openssl-legacy-provider
+      - npm ci
 
   assets:dev:
     desc: Run the UI dev server
+    dir: "{{.UI}}"
     cmds:
-      - cd ui && npm run dev
+      - npm run dev
 
   bench:
     desc: Run benchmarks
@@ -92,6 +92,11 @@ tasks:
     cmds:
       - buf generate
 
+  server:
+    desc: Start the server
+    cmds:
+      - go run ./cmd/flipt/. --config ./config/local.yml --force-migrate
+
   clean:
     desc: Remove built assets
     cmds:
@@ -107,11 +112,6 @@ tasks:
     vars:
       COVERAGE_FILE: coverage.txt
 
-  dev:
-    desc: Start the server
-    cmds:
-      - go run ./cmd/flipt/. --config ./config/local.yml --force-migrate
-
   fmt:
     desc: Run goimports
     cmds:

diff --git a/script/server b/script/server
@@ -2,4 +2,4 @@
 
 set -euo pipefail
 
-task --parallel dev assets:dev
+task --parallel server assets:dev
diff --git a/ui/.babelrc b/ui/.babelrc
diff --git a/ui/.eslintignore b/ui/.eslintignore
diff --git a/ui/.eslintrc.cjs → ui/.eslintrc.js b/ui/.eslintrc.cjs → ui/.eslintrc.js
@@ -2,9 +2,6 @@
 
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: "babel-eslint",
-  },
   env: {
     browser: true,
     node: true,
@@ -42,6 +39,7 @@ module.exports = {
         ignores: ["draggable"],
       },
     ],
+    "vue/no-reserved-component-names": "off",
     "vue/multi-word-component-names": "off",
     "no-async-promise-executor": "off",
     "no-misleading-character-class": "off",

diff --git a/ui/.gitignore b/ui/.gitignore
@@ -1,16 +1,27 @@
-.DS_Store
-node_modules/
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?
 /test-results/
 /playwright-report/
 /playwright/.cache/
diff --git a/ui/.postcssrc.yml b/ui/.postcssrc.yml
diff --git a/ui/.prettierignore b/ui/.prettierignore
@@ -1 +1,3 @@
-dist/
+dist/
+src/assets/
+README.md
diff --git a/ui/.tool-versions b/ui/.tool-versions
diff --git a/ui/README.md b/ui/README.md
@@ -2,8 +2,11 @@
 
 The Flipt UI uses the [Vue.js](https://vuejs.org/) framework to build a modern single page application.
 
-The ui directory contains these `.vue` files, along with others used in the web UI. These source files are built and packed together into simple HTML, JS, and CSS assets. For easier distribution these assets are statically compiled into the Flipt binary using the [go/embed](https://golang.org/pkg/embed/) package.
+This directory contains these `.vue` files, along with others used in the web UI. These source files are built and packed together into simple HTML, JS, and CSS assets using the [Vite](https://vitejs.dev/) build tool.
+
+For easier distribution these assets are then statically compiled into the Flipt binary using the [go/embed](https://golang.org/pkg/embed/) package.
 
 ## Build Requirements
 
 - [NodeJS >= 18](https://nodejs.org/en/)
+- [Go >= 1.17](https://golang.org/doc/install/source.html)
diff --git a/ui/babel.config.js b/ui/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+};
diff --git a/ui/build/build.js b/ui/build/build.js