section(www): Deployment - esbuild + gh deployment workflow (#11)

* bundle using esbuild

* add rust build to gh-workflow

Author: tauseefk

.github/workflows/gh-deploy.yml

@@ -0,0 +1,69 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build Connectors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install wasm-pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Build WASM binary
+        run: |
+          cd connecto.rs
+          chmod +x build.sh
+          ./build.sh
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1.10.9
+        with:
+          working-directory: ./www
+
+      - name: Build project
+        run: npm run build
+        working-directory: ./www
+
+      - name: Upload build files
+        uses: actions/upload-artifact@v4
+        with:
+          name: artifacts
+          path: ./www/dist
+
+  deploy:
+    name: Deploy Connectors
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: artifacts
+          path: ./www/dist
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./www/dist
+    needs: build

README.md

@@ -64,6 +64,8 @@ connectors/
   - [5.2 - Adding interactivity](https://github.com/tauseefk/connectors/tree/interactivity)
 - Chapter 6
   - [Chapter 6 - Computing the winner](https://github.com/tauseefk/connectors/tree/winning-move)
+- Chapter 7
+  - [Chapter 7 - Build and deploy]()
 
 ## Other Resources
 

connecto.rs/build.sh

@@ -2,7 +2,7 @@
 
 set -euo pipefail
 
-TARGET=web
+TARGET=bundler
 OUTDIR=../../www/connectors
 
 wasm-pack build connectors --target $TARGET --release --out-dir $OUTDIR

www/.gitignore

@@ -0,0 +1,4 @@
+/connectors
+.DS_Store
+node_modules
+/dist

www/build.js

@@ -0,0 +1,53 @@
+import esbuild from "esbuild";
+import { copy } from "esbuild-plugin-copy";
+import { wasmLoader } from "esbuild-plugin-wasm";
+
+const isDevelopment = process.env.NODE_ENV === "development";
+
+const buildOptions = {
+  logLevel: "info",
+  entryPoints: ["src/index.js"],
+  bundle: true,
+  minify: !isDevelopment,
+  format: "esm",
+  platform: "browser",
+  target: "es2022",
+  outdir: "./dist",
+  plugins: [
+    wasmLoader(),
+    // copy the index.html and styles.css as they are
+    copy({
+      resolveFrom: "cwd",
+      assets: {
+        from: ["./public/*"],
+        to: ["./dist"],
+      },
+    }),
+  ],
+};
+
+const run = async () => {
+  try {
+    const ctx = await esbuild.context(buildOptions);
+
+    if (!isDevelopment) {
+      await esbuild.build(buildOptions);
+      console.log("Build complete");
+
+      process.exit(0);
+      return;
+    }
+
+    // DEV server
+    await ctx.serve({
+      port: 8000,
+      servedir: "./dist",
+    });
+    await ctx.watch();
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+};
+
+run();