Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DiceDB Console] Setup NextJS with Electron #69

Merged
merged 13 commits into from
Oct 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions apps/console-electron/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"root": true,
"extends": ["@dicedb/eslint-config/next.js", "next/typescript"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": true
},
"ignorePatterns": ["out"]
}
36 changes: 36 additions & 0 deletions apps/console-electron/.gitignore
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions apps/console-electron/app/dashboard/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Binary file added apps/console-electron/app/favicon.ico
Binary file not shown.
Binary file added apps/console-electron/app/fonts/GeistMonoVF.woff
Binary file not shown.
Binary file added apps/console-electron/app/fonts/GeistVF.woff
Binary file not shown.
27 changes: 27 additions & 0 deletions apps/console-electron/app/globals.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
35 changes: 35 additions & 0 deletions apps/console-electron/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
20 changes: 20 additions & 0 deletions apps/console-electron/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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

Check warning on line 10 in apps/console-electron/app/page.tsx

View workflow job for this annotation

GitHub Actions / Build and Test

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
width={48}
height={48}
src="https://avatars.githubusercontent.com/u/112580013?s=48&v=4"
alt="logo"
/>
<Link href="/dashboard">Home</Link>
</main>
</div>
);
}
25 changes: 25 additions & 0 deletions apps/console-electron/main.js
Original file line number Diff line number Diff line change
@@ -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();
});
6 changes: 6 additions & 0 deletions apps/console-electron/next.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};

export default nextConfig;
33 changes: 33 additions & 0 deletions apps/console-electron/package.json
Original file line number Diff line number Diff line change
@@ -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 .\"",
Copy link
Contributor

@KaviiSuri KaviiSuri Oct 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldnt we be running next from inside electron? How will this be packaged when we run the built version?

I think what we might is to use the standalone output of next and spawn it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes sense to have standalone nextjs server running and electron app is pointing to it, for both local and packaged versions. There is no significant advantage from just shipping bundled files, not the server in packaged version.

Just one issue - users can run this directly also outside electron if they know the URL which shouldn't be an issue.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer the server runs on the users system, and not us hosting it. Especially because we’ll actual servers if we wanna support load tests

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you mean that the server for nextjs is gonna run in packaged version on the users system, what invokes it in the package version?

there is nothing calling next start

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to forking a nodejs server, we can call childProcess.spawn('pnpm', ['start']) or something like that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure that bundling pnpm in the final export is that good of an idea.

id rather just call node server.js on the bundled server output

Copy link
Contributor Author

@AjayPoshak AjayPoshak Oct 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KaviiSuri That was top of my head. There are so many ways to start node server, definitely we won't bundle pnpm in final build 😆

"dev:next": "next dev",
"build": "next build",
KaviiSuri marked this conversation as resolved.
Show resolved Hide resolved
"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"
}
}
8 changes: 8 additions & 0 deletions apps/console-electron/postcss.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, can we import tailwind config same way we did for playground? Would be better to have common tailwind base config

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really understand tailwind yet, so not sure if this config will be enough to support theming. I have a separate task for this in our milestones

Copy link
Contributor

@KaviiSuri KaviiSuri Oct 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, I’ll do that since i set it up in playground too, will be faster

tailwindcss: {},
},
};

export default config;
19 changes: 19 additions & 0 deletions apps/console-electron/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -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;
18 changes: 18 additions & 0 deletions apps/console-electron/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
}
Loading