ci: add frontend CI and release steps (#486)

* feat: Adding Query Profiling Support to BendSQL

* feat: edit the front-end page

* fix: handle case-insensitive check for "GRAPHICAL" in query

* fix: Correct time conversion in ProfileOverview component

* fix: query to lowercase

* fix: Remove frontend/** from excludes in licenserc.toml

* feat: frontend ci

* ci: Add frontend release steps to .github/workflows/release.yml

* fix: delete unused base64 dependency

* feat: integrate frontend build into CI pipeline

* fix: release frontend

* feat: add frontend build process to Makefile

* feat: integrate frontend build with Rust binary using rust-embed

* feat: update CI workflow and project configuration

* chore: update CI workflows and project configuration

* fix: build frontend before cargo clippy

* fix: mkdir cli/frontend before move files

* fix: ci add frontend build

* fix: add frontend build at setup action

* feat: if yarn not found install it

* fix(frontend): ensure cross-platform compatibility for build scripts

* feat: remove fronetend install at check

* fix: increase Yarn network timeout for reliability

* fix: resolve SVG display issue by ensuring correct MIME type handling

* chore: delete useless comments

.github/actions/setup/action.yml

@@ -87,3 +87,28 @@ runs:
         echo "SCCACHE_REGION=us-east-2" >> $GITHUB_ENV
         echo "SCCACHE_S3_KEY_PREFIX=bendsql/sccache/" >> $GITHUB_ENV
         echo "SCCACHE_S3_USE_SSL=true" >> $GITHUB_ENV
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+
+    - name: Install Yarn
+      shell: bash
+      run: |
+        if ! command -v yarn &> /dev/null
+        then
+          echo "Yarn not found, installing..."
+          npm install --global yarn
+        else
+          echo "Yarn is already installed"
+        fi
+
+    - name: Install Frontend
+      working-directory: frontend
+      shell: bash
+      run: |
+        rm -rf ../cli/frontend
+        mkdir -p ../cli/frontend
+        yarn config set network-timeout 600000 # Increase network timeout for reliability
+        yarn install && yarn build && mv build ../cli/frontend/

.github/workflows/release.yml

@@ -18,6 +18,24 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install frontend dependencies
+        working-directory: ./frontend
+        run: yarn install
+
+      - name: Build frontend
+        working-directory: ./frontend
+        run: |
+          yarn build
+          rm -rf ../cli/frontend
+          mkdir -p ../cli/frontend
+          mv build ../cli/frontend/
+
       - uses: dtolnay/rust-toolchain@stable
         with:
           toolchain: stable
@@ -121,12 +139,14 @@ jobs:
             }
     steps:
       - uses: actions/checkout@v4
+
       - name: Setup nfpm
         shell: bash
         run: |
           curl -sSfLo /tmp/nfpm.tar.gz https://github.com/goreleaser/nfpm/releases/download/v2.28.0/nfpm_2.28.0_Linux_x86_64.tar.gz
           tar -xzf /tmp/nfpm.tar.gz -C /tmp
           sudo mv /tmp/nfpm /usr/local/bin/nfpm
+
       - name: Download
         shell: bash
         env:
@@ -135,12 +155,14 @@ jobs:
           mkdir -p dist/pkg
           gh release download ${{ github.ref_name }} --pattern "bendsql-${{ matrix.target }}.tar.gz" --dir dist/
           tar -xzf dist/bendsql-${{ matrix.target }}.tar.gz -C dist/
+
       - name: Package
         shell: bash
         run: |
           export arch=${{ matrix.arch }}
           export version=${{ github.ref_name }}
           nfpm package --packager ${{ matrix.packager }} --target dist/pkg/ -f <(envsubst '${arch} ${version}' < nfpm.yaml)
+
       - name: Publish
         shell: bash
         env:

.gitignore

@@ -8,3 +8,5 @@ venv/
 *.output
 
 /dist
+cli/frontend
+

Makefile

@@ -13,7 +13,19 @@ check:
 	# cargo install typos-cli
 	typos
 
+build-frontend:
+	rm -rf cli/frontend
+	mkdir -p cli/frontend
+	cd frontend && \
+	if [ ! -d node_modules ]; then yarn install; fi && \
+	yarn build && mv build ../cli/frontend/
+
+run:
+	make build-frontend
+	cargo run
+
 build:
+	make build-frontend
 	cargo build --release
 
 test:

cli/Cargo.toml

@@ -48,7 +48,8 @@ unicode-segmentation = "1.10"
 url = { version = "2.5", default-features = false }
 actix-web = "4.0"
 webbrowser = "1.0.1"
-actix-files = "0.6"
+rust-embed = "6.8.1"
+mime_guess = "2.0"
 
 [build-dependencies]
 vergen = { version = "8.2", features = ["build", "git", "gix"] }

cli/src/web.rs

@@ -12,12 +12,35 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-use actix_files as fs;
 use actix_web::middleware::Logger;
 use actix_web::{get, web, App, HttpResponse, HttpServer, Responder};
 use anyhow::Result;
+use mime_guess::from_path;
+use rust_embed::RustEmbed;
 use tokio::net::TcpListener;
 
+#[derive(RustEmbed)]
+#[folder = "frontend/build/"]
+struct Asset;
+
+async fn embed_file(path: web::Path<String>) -> HttpResponse {
+    let file_path = if path.is_empty() {
+        "index.html".to_string()
+    } else {
+        path.into_inner()
+    };
+
+    match Asset::get(&file_path) {
+        Some(content) => {
+            let mime_type = from_path(&file_path).first_or_octet_stream();
+            HttpResponse::Ok()
+                .content_type(mime_type.as_ref())
+                .body(content.data)
+        }
+        None => HttpResponse::NotFound().body("File not found"),
+    }
+}
+
 struct AppState {
     result: String,
 }
@@ -61,7 +84,7 @@ pub async fn start_server<'a>(port: u16, result: String) {
             .wrap(Logger::default())
             .app_data(app_state.clone())
             .service(get_message)
-            .service(fs::Files::new("/", "./frontend/build").index_file("index.html"))
+            .route("/{filename:.*}", web::get().to(embed_file))
     })
     .bind(("127.0.0.1", port))
     .expect("Cannot bind to port")

frontend/.env

@@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false

frontend/package.json

@@ -4,13 +4,6 @@
   "private": true,
   "dependencies": {
     "@ant-design/charts": "v1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.101",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "antd": "^5.19.1",
     "lodash-es": "^4.17.21",
     "pretty-ms": "^9.1.0",
@@ -22,7 +15,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "cross-env CI=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -45,8 +38,17 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^16.18.101",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13"
   }

frontend/tailwind.config.js

@@ -1,8 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-  // darkMode: false, // or 'media' or 'class'
-  content: [],
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   theme: {
     extend: {},
   },