feat: create-script Vite + React + JS template (#107)

* feat: Create Fedimint App script * feat: polish, update versions, fix tests * feat: add vite-react JS template * chore: add changeset * chore: update package name
fedimint · Dec 17, 2024 · 014ea79 · 014ea79
1 parent 4943332
commit 014ea79
Show file tree

Hide file tree

Showing 17 changed files with 844 additions and 60 deletions.
diff --git a/.changeset/big-lies-wonder.md b/.changeset/big-lies-wonder.md
@@ -1,5 +1,5 @@
 ---
-'@fedimint/create-fedimint-app': patch
+'create-fedimint-app': patch
 ---
 
 Introducing the create-fedimint-app script! Your helper to quickly get started with the fedimint-web-sdk.
diff --git a/.changeset/fast-chicken-swim.md b/.changeset/fast-chicken-swim.md
@@ -0,0 +1,5 @@
+---
+'create-fedimint-app': patch
+---
+
+Added Vite + React + JS Template
diff --git a/package.json b/package.json
@@ -31,8 +31,8 @@
     "test": "pnpm run test:setup pnpm run test:lib",
     "test:setup": "bash testing/setup_test_shell.sh",
     "test:coverage": "vitest run --coverage",
-    "test:lib": "vitest",
-    "test:create": "vitest --watch=false create-fedimint",
+    "test:lib": "vitest --project core",
+    "test:create": "vitest --watch=false --project cli",
     "test:ui": "vitest --browser.headless=false --ui",
     "format": "prettier --write .",
     "watch": "pnpm run --r --parallel --filter \"./packages/**\" watch"

diff --git a/packages/create-fedimint-app/README.md b/packages/create-fedimint-app/README.md
@@ -40,7 +40,8 @@ pnpm create fedimint-app my-fedimint-app --template vite-react-ts
 
 Currently supported template presets include:
 
-- `vite-react-ts` - React + TypeScript template with Fedimint integration
+- `vite-react-ts` - Vite + React + TypeScript template with Fedimint integration
+- `vite-react` - Vite + React template with Fedimint integration
 
 You can use `.` for the project name to scaffold in the current directory.
 

diff --git a/packages/create-fedimint-app/package.json b/packages/create-fedimint-app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@fedimint/create-fedimint-app",
+  "name": "create-fedimint-app",
   "type": "module",
   "version": "0.0.1",
   "main": "index.js",

diff --git a/packages/create-fedimint-app/src/index.ts b/packages/create-fedimint-app/src/index.ts
@@ -16,7 +16,7 @@ const {
   red,
   // redBright,
   reset,
-  // yellow,
+  yellow,
 } = colors
 
 // Avoids autoconversion to number of the project name by defining that the args
@@ -123,11 +123,11 @@ const FRAMEWORKS: Framework[] = [
         display: 'TypeScript',
         color: blue,
       },
-      // {
-      //   name: 'vite-react',
-      //   display: 'JavaScript',
-      //   color: yellow,
-      // },
+      {
+        name: 'vite-react',
+        display: 'JavaScript',
+        color: yellow,
+      },
       // {
       //   name: 'custom-react-router',
       //   display: 'React Router v7 ↗',

diff --git a/packages/create-fedimint-app/template-vite-react/README.md b/packages/create-fedimint-app/template-vite-react/README.md
@@ -0,0 +1,9 @@
+# Fedimint + Vite + React + TypeScript Starter
+
+This template provides a minimal setup to get The Fedimint Web SDK working with Vite + React + TypeScript.
+
+## Technologies Used
+
+- core-web: The Fedimint client library for web applications
+- Vite: A fast build tool and development server. Check the [`vite.config.ts`](./vite.config.ts) for configurations required for handling wasm.
+- React
diff --git a/packages/create-fedimint-app/template-vite-react/_gitignore b/packages/create-fedimint-app/template-vite-react/_gitignore
@@ -0,0 +1,24 @@
+# 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
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/create-fedimint-app/template-vite-react/index.html b/packages/create-fedimint-app/template-vite-react/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Core</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/packages/create-fedimint-app/template-vite-react/package.json b/packages/create-fedimint-app/template-vite-react/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "fedimint-vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "clean:deep": "pnpm run clean && rm -rf node_modules"
+  },
+  "dependencies": {
+    "@fedimint/core-web": "latest",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "buffer": "^6.0.3",
+    "vite": "^5.4.8",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}