replace CRA with vite + update dependencies

.devcontainer/devcontainer.json

@@ -1,42 +1,41 @@
 {
-  "image": "mcr.microsoft.com/vscode/devcontainers/base:ubuntu-22.04",
-  // https://github.com/microsoft/vscode-dev-containers/tree/main/containers
+  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
   "features": {
-    "ghcr.io/devcontainers/features/rust:1": {
+    "rust": {
       "version": "latest"
     },
     "node": {
-      "version": "18"
+      "version": "20"
     }
   },
-  "settings": {
-    "telemetry.telemetryLevel": "off",
-    "telemetry.enableCrashReporter": false,
-    "telemetry.enableTelemetry": false,
-    "workbench.settings.enableNaturalLanguageSearch": false,
-    "editor.wordWrap": "on",
-    "editor.tabSize": 4,
-    "files.insertFinalNewline": true,
-    "files.trimTrailingWhitespace": true,
-    "editor.fontSize": 14,
-    "editor.minimap.enabled": false,
-    "editor.rulers": [
-      80
-    ],
-    "workbench.colorCustomizations": {
-      "editorRuler.foreground": "#fdb88056"
-    },
-    "workbench.colorTheme": "Dracula At Night",
-    "terminal.integrated.fontSize": 13
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "telemetry.telemetryLevel": "off",
+        "telemetry.enableTelemetry": false,
+        "workbench.settings.enableNaturalLanguageSearch": false,
+        "editor.wordWrap": "on",
+        "editor.tabSize": 2,
+        "files.insertFinalNewline": true,
+        "files.trimTrailingWhitespace": true,
+        "editor.fontSize": 14,
+        "editor.minimap.enabled": false,
+        "editor.rulers": [
+          80
+        ],
+        "workbench.colorCustomizations": {
+          "editorRuler.foreground": "#fdb88056"
+        },
+        "terminal.integrated.fontSize": 13
+      },
+      "extensions": [
+        "mutantdino.resourcemonitor",
+        "SirTori.indenticator",
+        "streetsidesoftware.code-spell-checker",
+        "esbenp.prettier-vscode"
+      ]
+    }
   },
-  "extensions": [
-    "bceskavich.theme-dracula-at-night",
-    "streetsidesoftware.code-spell-checker",
-    "SirTori.indenticator",
-    "rust-lang.rust-analyzer",
-    "unifiedjs.vscode-mdx",
-    "mutantdino.resourcemonitor"
-  ],
   "postCreateCommand": "bash setup.sh",
   "waitFor": "postCreateCommand"
 }

.github/workflows/gh-pages-deploy.yml

@@ -7,26 +7,29 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Prepare Node environment
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
-      - name: Prepare and build everything
+      - name: Build rust lib and install packages
         run: bash build.sh
 
+      - name: Build vite project
+        run: npm run build -- --base=/${{ github.event.repository.name }}/
+
       - name: Deploy on gh-pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         if: ${{ github.ref == 'refs/heads/main' }}
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          publish_dir: ./dist
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'

.gitignore

@@ -16,7 +16,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

README.md

@@ -4,7 +4,7 @@ You must have node (and npm) installed.
 
 ### Initialize React project
 ```console
-npx -y create-react-app wasm-rust-react --template typescript
+npx -y create vite@latest wasm-rust-react -- --template react-ts
 ```
 
 ### Install tools
@@ -14,7 +14,7 @@ Install rust related tools using the setup script:
 bash setup.sh
 ```
 
-Or create new rust lib:
+Create new rust lib:
 ```console
 cargo new rust-libs --lib
 cd rust-libs
@@ -33,7 +33,7 @@ wasm-pack build --target web
 ```
 
 Install/add package to npm:
-```
+```console
 npm i ./rust-libs/pkg
 ```
 
@@ -48,15 +48,13 @@ Start development server:
 npm start
 ```
 
-Running wasm in a web worker.
-```
-npm i @shopify/web-worker
-```
+To update rust dependencies:
 
-Currently, the shopify lib might have some [issues](
-https://github.com/Shopify/quilt/issues/2232), or my implementation is not
-correct.
+```console
+cargo install cargo-update --features vendored-openssl
+cargo install-update -a
+```
 
 ### Resources
-- <https://neoquest.xyz/blog/react+rust+wasm+introduction>
-- <https://rustwasm.github.io/docs/book/>
+
+- https://rustwasm.github.io/docs/book/

build.sh

@@ -4,9 +4,9 @@ sudo apt install -y curl
 curl https://sh.rustup.rs -sSf | sh -s -- -y
 source $HOME/.cargo/env
 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | bash
-cargo install cargo-generate
+cargo install cargo-generate --features vendored-openssl
 cd rust-libs
 wasm-pack build --target web
 cd ..
 npm i
-npm run build
+# npm run build

public/index.html → index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="A React application using WebAssemby generated from Rust code." />
@@ -13,6 +13,7 @@
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 
 </html>