refactor: build frontend with vite

chainflag · Aug 21, 2022 · 07b04a5 · 07b04a5
1 parent f76d9c7
commit 07b04a5
Show file tree

Hide file tree

Showing 16 changed files with 386 additions and 824 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,2 +1,2 @@
+web/dist
 web/node_modules
-web/public/build
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ git clone https://github.com/chainflag/eth-faucet.git
 cd eth-faucet
 ```
 
-2. Bundle Frontend web with Rollup
+2. Bundle Frontend web with Vite
 ```bash
 npm run build
 ```

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
   "scripts": {
-    "build": "cd web && npm ci --production=false && npx rollup -c"
+    "build": "cd web && npm ci --production=false && npx vite build"
   }
 }
diff --git a/web/.gitignore b/web/.gitignore
@@ -1,5 +1,24 @@
-/node_modules/
-/public/build/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-.vercel
+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/web/.vscode/extensions.json b/web/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/web/README.md b/web/README.md
@@ -1,6 +1,6 @@
 # eth-faucet-web
 
-This is the Frontend of [eth-faucet](https://github.com/chainflag/eth-faucet) built with https://github.com/sveltejs/template.
+This is the Frontend of [eth-faucet](https://github.com/chainflag/eth-faucet) built with Svelte in Vite.
 
 ## Get started
 
@@ -13,18 +13,16 @@ cd web
 npm install
 ```
 
-...then start [Rollup](https://rollupjs.org):
+...then start [vite](https://vitejs.dev/):
 
 ```bash
 npm run dev
 ```
 
-Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+Navigate to [localhost:5173](http://localhost:5173). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
 
 To create an optimised version of the app:
 
 ```bash
 npm run build
 ```
-
-You can run the newly built app with `npm run start`. 
diff --git a/web/embed.go b/web/embed.go
@@ -6,11 +6,11 @@ import (
 	"net/http"
 )
 
-//go:embed public
+//go:embed dist
 var static embed.FS
 
 func Dist() http.FileSystem {
-	fsys, err := fs.Sub(static, "public")
+	fsys, err := fs.Sub(static, "dist")
 	if err != nil {
 		panic(err)
 	}

diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/web/jsconfig.json b/web/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}