-
Notifications
You must be signed in to change notification settings - Fork 51
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
Changes from all commits
26a234e
7755b78
2ddaa00
a8846e6
e58e188
dd951a8
24c2069
0ef29ce
98770e1
e622df0
69ad9ec
3ec6954
1b778c2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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"] | ||
} |
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 |
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> | ||
); | ||
} |
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; | ||
} | ||
} |
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> | ||
); | ||
} |
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 GitHub Actions / Build and Test
|
||
width={48} | ||
height={48} | ||
src="https://avatars.githubusercontent.com/u/112580013?s=48&v=4" | ||
alt="logo" | ||
/> | ||
<Link href="/dashboard">Home</Link> | ||
</main> | ||
</div> | ||
); | ||
} |
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(); | ||
}); |
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; |
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 .\"", | ||
"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" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** @type {import('postcss-load-config').Config} */ | ||
const config = { | ||
plugins: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; |
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; |
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"] | ||
} |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
andpackaged
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.There was a problem hiding this comment.
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
There was a problem hiding this comment.
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 😆