vite template can not generate asar

[nnsay]

Pre-flight checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project uses.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

7.1.0

Electron version

v27.1.0

Operating system

macOS 14.1.1 (23B81)

Last known working Electron Forge version

No response

Expected behavior

After yarn package, I can find the app.asar file in XXX.app/Contents/Resources

Actual behavior

app.asar is gone and the app folder exists but the folder include everything, for example the whole node_modules

Steps to reproduce

npm init electron-app@latest demo -- --template=vite-typescript
cd demo
yarn package
ls out/demo-darwin-arm64/demo.app/Contents/Resources/

Additional information

If I create code base by the webpack-typescript template, it is ok.

[akash07k]

I noticed that asar: true is not there in the generated forge config via this template. could this be the issue?

[Viiprogrammer]

Have same problem and solved with asar: true in package config (about asar packing), but asar contains all project files (include all from .gitignore etc.), it is simple to check using npx @electron/asar extract app.asar ./dist, also its means can contain confidential dev information (.env and other)

[akash07k]

Yeah

Have same problem and solved with asar: true in package config (about asar packing), but asar contains all project files (include all from .gitignore etc.), it is simple to check using npx @electron/asar extract app.asar ./dist, also its means can contain confidential dev information (.env and other)

[Viiprogrammer]

After a few hours, I think I fully understand how to deal with it.

1. Enable prune: true in packager config - docs
2. Move all frontend packages to devDependecies (prune removes only dev deps, not all unused)
3. Remove empty dirs in node_modules after prune (optional, you can skip):

Code spoiler

const fsp = require('node:fs/promises')
const path = require('node:path')

/**
 * @param {string} folder
 * @param {string} [exclude]
 */
async function cleanupEmptyFolders (folder, exclude) {
  // eslint-disable-next-line security/detect-non-literal-fs-filename
  if (!(await fsp.stat(folder)).isDirectory()) return

  const folderName = path.basename(folder)
  if (exclude && exclude.includes(folderName)) {
    return
  }

  // eslint-disable-next-line security/detect-non-literal-fs-filename
  let files = await fsp.readdir(folder)

  if (files.length > 0) {
    await Promise.all(files.map(file => cleanupEmptyFolders(path.join(folder, file), exclude)))
    // Re-evaluate files; after deleting subfolders we may have an empty parent
    // folder now.
    // eslint-disable-next-line security/detect-non-literal-fs-filename
    files = await fsp.readdir(folder)
  }

  if (files.length === 0) {
    // eslint-disable-next-line security/detect-non-literal-fs-filename
    await fsp.rmdir(folder)
  }
}

and add to packager config:

afterPrune: [(buildPath, electronVersion, platform, arch, callback) => {
 cleanupEmptyFolders(path.join(buildPath, 'node_modules'))
   .then(() => callback())
  .catch(error => callback(error))
}],

5. Remove other project files (also I use vite, and it's having cache in node_modules/.vite, that not removed by prune). Use ignore in packager config (docs) for that all:

Code spoiler

    ignore: [
      '.commitlintrc.js',
      '.editorconfig',
      '.env.development',
      '.env.example',
      '.env.production',
      '.eslintrc.js',
      '.git',
      '.gitignore',
      '.husky',
      '.idea',
      '.yarn',
      '.yarnrc.yml',
      'assets',
      'forge.config.js',
      'jsconfig.json',
      'package-lock.json',
      'pnpm-lock.yaml',
      'src',
      'vite.preload-notify.config.mjs',
      'vite.preload.config.mjs',
      'vite.renderer-notify.config.mjs',
      'vite.renderer.config.mjs',
      'node_modules/fastify/test'
    ].map(x => new RegExp('^/' + x))

After all of that, my asar deceased from ~700mb - 1GB to 13 MB, and can be less

Result config:

Code spoiler

const fsp = require('node:fs/promises')
const path = require('node:path')
const meta = require('./package.json')
/**
 * @param {string} folder
 * @param {string} [exclude]
 */
async function cleanupEmptyFolders (folder, exclude) {
  // eslint-disable-next-line security/detect-non-literal-fs-filename
  if (!(await fsp.stat(folder)).isDirectory()) return

  const folderName = path.basename(folder)
  if (exclude && exclude.includes(folderName)) {
    return
  }

  // eslint-disable-next-line security/detect-non-literal-fs-filename
  let files = await fsp.readdir(folder)

  if (files.length > 0) {
    await Promise.all(files.map(file => cleanupEmptyFolders(path.join(folder, file), exclude)))
    // Re-evaluate files; after deleting subfolders we may have an empty parent
    // folder now.
    // eslint-disable-next-line security/detect-non-literal-fs-filename
    files = await fsp.readdir(folder)
  }

  if (files.length === 0) {
    // eslint-disable-next-line security/detect-non-literal-fs-filename
    await fsp.rmdir(folder)
  }
}

module.exports = {
  packagerConfig: {
    asar: true,
    executableName: meta.productName,
    icon: path.resolve(__dirname, 'assets', 'logo', 'logo'),
    prune: true,
    afterPrune: [(buildPath, electronVersion, platform, arch, callback) => {
      cleanupEmptyFolders(path.join(buildPath, 'node_modules'))
        .then(() => callback())
        .catch(error => callback(error))
    }],
    ignore: [
      '.commitlintrc.js',
      '.editorconfig',
      '.env.development',
      '.env.example',
      '.env.production',
      '.eslintrc.js',
      '.git',
      '.gitignore',
      '.husky',
      '.idea',
      '.yarn',
      '.yarnrc.yml',
      'assets',
      'forge.config.js',
      'jsconfig.json',
      'package-lock.json',
      'pnpm-lock.yaml',
      'src',
      'vite.preload-notify.config.mjs',
      'vite.preload.config.mjs',
      'vite.renderer-notify.config.mjs',
      'vite.renderer.config.mjs',
      'node_modules/fastify/test'
    ].map(x => new RegExp('^/' + x))
  },

 // ...
}

also you can add package.json cleanup in afterPrune, just copy and paste after empty dirs cleanup

// Cleanup package.json
const packageDotJson = path.join(buildPath, 'package.json')
const json = await fsp.readFile(packageDotJson, 'utf8')
const content = JSON.parse(json)
const allowedKeys = [
  'name', 'productName', 'version', 'description', 'main',
  'keywords', 'homepage', 'bugs', 'author', 'license'
]

const result = Object.fromEntries(
  Object.entries(content)
    .filter(([key]) => allowedKeys.includes(key))
)

await fsp.writeFile(packageDotJson, JSON.stringify(result, null, 2))

[nnsay]

If extract the app.asar with webpack template, there are only three content:

• .webpack: the webpack output
• node_module: it is an empty folder because of all bundle into webpack output
• package.json

I think the vite should be same with webpack, the asar should only include the .vite output folder but not most source code. The vite also have another problem: it not support the node native module.
To sum up, I will use the webpack in electron application development.

[caoxiemeihao]

Next version of Vite plugin will enabled asar by default.

[akash07k]

Will it be 0.29?

Next version of Vite plugin will enabled asar by default.

[caoxiemeihao]

Will it be 0.29?

Is @electron-forge/plugin-vite instead of vite-plugin-electron 😅

[caoxiemeihao]

Implemented by #3480