divyanshu bagwan
divyanshu bagwan

Reputation: 11

How to export stand-alone HTML-CSS-JS from next-js to use with electron-js to run like a standalon desktop App

I have a simple Next.js application (Login Page - Home Page) in Next.js version 15.1.4. I tried to export my application into plain HTML format. However, there is a problem: static contents like CSS, JS, font files, etc., have absolute addresses in the exported HTML.

For example:

/_next/static/chunks/app/layout-92d6c334a1dc3901.js

But I need them to be exported like this:

./_next/static/chunks/app/layout-92d6c334a1dc3901.js

In next.config.mjs, I added assetPrefix: "./" like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    assetPrefix: "./",
};
// module.exports = nextConfig
export default nextConfig;

However, this led to the following error:

assetPrefix must start with a leading slash or be an absolute URL (http:// or https://)

I tried another configuration:

\`/\*\* @type {import('next').NextConfig} \*/
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
assetPrefix: process.env.ELECTRON === 'true' ? './' : '/',
};

export default nextConfig;\`

In this case, the build was successful, but the paths in the exported HTML files were still absolute.

Electron Configuration: In main.js, I changed mainWindow.loadURL from using localhost to the following:

// Load the static files from the `out` directory
mainWindow.loadURL(
    url.format({
        pathname: path.join(__dirname, 'out', 'index.html'),
        protocol: 'file:',
        slashes: true,
    })
);

package.json Configuration:

"scripts": {
    "dev": "concurrently \"next dev\" \"electron .\"",
    "build": "next build && electron-builder",
    "start": "electron .",
    "lint": "next lint"
},
"main": "main.js",
"files": [
    "build/**/*",
    "node_modules/**/*",
    "main.js",
    "preload.js",
    "preloader.html",
    "package.json",
    "out/**/*"
],
"extraResources": [
    "assets/**/*",
    "database.sqlite"
]

Upvotes: 1

Views: 20

Answers (0)

Related Questions