[DiceDB Console] Setup NextJS with Electron (#69)

Setup NextJS with Electron
DiceDB · Oct 15, 2024 · 250a1d3 · 250a1d3
1 parent 17d5aef
commit 250a1d3
Show file tree

Hide file tree

Showing 16 changed files with 2,396 additions and 1,617 deletions.
diff --git a/apps/console-electron/.eslintrc.json b/apps/console-electron/.eslintrc.json
@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": ["@dicedb/eslint-config/next.js", "next/typescript"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true
+  },
+  "ignorePatterns": ["out"]
+}
diff --git a/apps/console-electron/.gitignore b/apps/console-electron/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/console-electron/app/dashboard/page.tsx b/apps/console-electron/app/dashboard/page.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export default function Another() {
+  return (
+    <div
+      className={`grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]`}
+    >
+      <Link href="/">Go back</Link>
+      <p>Dashboard Page</p>
+    </div>
+  );
+}
diff --git a/apps/console-electron/app/favicon.ico b/apps/console-electron/app/favicon.ico
diff --git a/apps/console-electron/app/fonts/GeistMonoVF.woff b/apps/console-electron/app/fonts/GeistMonoVF.woff
diff --git a/apps/console-electron/app/fonts/GeistVF.woff b/apps/console-electron/app/fonts/GeistVF.woff
diff --git a/apps/console-electron/app/globals.css b/apps/console-electron/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/apps/console-electron/app/layout.tsx b/apps/console-electron/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from 'next';
+import localFont from 'next/font/local';
+import './globals.css';
+
+const geistSans = localFont({
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
+});
+const geistMono = localFont({
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
+});
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/apps/console-electron/app/page.tsx b/apps/console-electron/app/page.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <div
+      className={`grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]`}
+    >
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <h1 className="lg">DiceDB</h1>
+        <img
+          width={48}
+          height={48}
+          src="https://avatars.githubusercontent.com/u/112580013?s=48&v=4"
+          alt="logo"
+        />
+        <Link href="/dashboard">Home</Link>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/console-electron/main.js b/apps/console-electron/main.js
@@ -0,0 +1,25 @@
+import { app, BrowserWindow } from 'electron';
+
+function createWindow() {
+  const win = new BrowserWindow({
+    show: false,
+    useContentSize: true,
+    backgroundColor: '#0a0a0a',
+  });
+
+  win.once('ready-to-show', () => {
+    win.show();
+  });
+
+  if (app.isPackaged === false) {
+    win.loadURL('http://localhost:4000');
+    win.webContents.on('did-fail-load', (e, code, desc) => {
+      console.error(e, code, desc);
+      win.webContents.reloadIgnoringCache();
+    });
+  }
+}
+
+app.whenReady().then(() => {
+  createWindow();
+});
diff --git a/apps/console-electron/next.config.mjs b/apps/console-electron/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
diff --git a/apps/console-electron/package.json b/apps/console-electron/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@dicedb/console-electron",
+  "version": "0.1.0",
+  "private": true,
+  "main": "main.js",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently --kill-others \"next dev -p ${PORT-4000}\" \"electron .\"",
+    "dev:next": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "next": "14.2.15",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@dicedb/eslint-config": "workspace:*",
+    "@dicedb/typescript-config": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "concurrently": "^9.0.1",
+    "electron": "^32.2.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
diff --git a/apps/console-electron/postcss.config.mjs b/apps/console-electron/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/apps/console-electron/tailwind.config.ts b/apps/console-electron/tailwind.config.ts
@@ -0,0 +1,19 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
diff --git a/apps/console-electron/tsconfig.json b/apps/console-electron/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "@dicedb/typescript-config/nextjs.json",
+  "include": [
+    "next.config.mjs",
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mjs",
+    "**/*.js"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}