6

For example, I have a compiled binary cudaDeviceQuery which returns a list of devices as JSON. Here's a piece of code:

export default function cudaDeviceQuery(): Promise<CollectorResponse> {
  const throwError = () => {
    throw new Error("Unfortunately your platform isn't yet unsupported");
  };

  const file = __DARWIN__
    ? path.join(__dirname, 'darwin', 'cudaDeviceQuery')
    : __WIN32__
      ? path.join(__dirname, 'win', 'cudaDeviceQuery.exe')
      : throwError();

  const descriptor = spawn(file);

  return new Promise((resolve, reject) => {
    let outerData = '';
    descriptor.stdout.on('data', data => {
      outerData += data;
    });

    descriptor.on('close', () => {
      try {
        resolve(JSON.parse(outerData));
      } catch (e) {
        reject(e);
      }
    });
  });
}

But when I use this function from renderer process __dirname is /, so I get spawn /darwin/cudaDeviceQuery ENOENT error. What's proper way to spawn it in dev envivroment and pack it in production?

A webpack config:

webpack.config.base.js:

/**
 * Base webpack config used across other specific configs
 */
const webpack = require('webpack');
const path = require('path');
const getReplacements = require('./app/app-info').getReplacements;
const { dependencies: externals } = require('./app/renderer/package.json');

module.exports = {
  module: {
    noParse: [path.join(__dirname, 'node_modules/ws')],
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },

  output: {
    path: path.join(__dirname, 'app', 'renderer'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2',
  },
  // https://webpack.github.io/docs/configuration.html#resolve
  resolve: {
    extensions: ['.js', '.ts', '.tsx', 'json'],
    modules: [path.join(__dirname, 'app', 'renderer'), 'node_modules'],
  },
  plugins: [new webpack.DefinePlugin(getReplacements())],

  externals: [...Object.keys(externals || {}), 'ws'],
};

webpack.config.development.js:

/**
 * Build config for development process that uses Hot-Module-Replacement
 * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
 */

const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
const getReplacements = require('./app/app-info').getReplacements;

const port = process.env.PORT || 3000;

module.exports = merge(baseConfig, {
  devtool: 'inline-source-map',

  entry: [
    'react-hot-loader/patch',
    `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr&reload=true`,
    './app/renderer/index',
  ],

  output: {
    publicPath: `http://localhost:${port}/dist/`,
  },

  module: {
    rules: [
      // Css, SCSS, woff loaders are here
    ],
  },

  plugins: [
    // https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
    new webpack.HotModuleReplacementPlugin(),

    new webpack.LoaderOptionsPlugin({
      debug: true,
    }),
  ],

  // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
  target: 'electron-renderer',
});

webpack.config.electron.js:

/**
 * Build config for electron 'Main Process' file
 */

const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base');
const getReplacements = require('./app/app-info').getReplacements;

module.exports = merge(baseConfig, {
  devtool: 'source-map',

  entry: ['./app/main/index.ts'],

  // 'main.js' in root
  output: {
    path: __dirname,
    filename: './app/main/main.js',
  },

  plugins: [
    // Add source map support for stack traces in node
    // https://github.com/evanw/node-source-map-support
    // new webpack.BannerPlugin(
    //   'require("source-map-support").install();',
    //   { raw: true, entryOnly: false }
    // ),
  ],

  /**
   * Set target to Electron specific node.js env.
   * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   */
  target: 'electron-main',

  /**
   * Disables webpack processing of __dirname and __filename.
   * If you run the bundle in node.js it falls back to these values of node.js.
   * https://github.com/webpack/webpack/issues/2010
   */
  node: {
    __dirname: false,
    __filename: false
  },
});

As you see, I'm using dev server for hot module replacement, so maybe that is reason of this... I have server.js which create server with scripts and then I use it from main process. Here's server.js:

/**
 * Setup and run the development server for Hot-Module-Replacement
 * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
 */
const argv = require('minimist')(process.argv.slice(2));
const { spawn } = require('child_process');

async function createMiddleware(port, configPath) {
  const express = require('express');
  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');

  const config = require(configPath);

  const app = express();
  const compiler = webpack(config);
  const PORT = process.env.PORT || port;

  const wdm = webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: {
      colors: true,
    },
  });

  app.use(wdm);

  app.use(webpackHotMiddleware(compiler));

  const server = app.listen(PORT, serverError => {
    if (serverError) {
      return console.error(serverError);
    }

    console.log(`Listening at http://localhost:${PORT}`);
  });

  process.on('SIGTERM', () => {
    console.log('Stopping dev server');
    wdm.close();
    server.close(() => {
      process.exit(0);
    });
  });
}

createMiddleware(3000, './webpack.config.development'); // A main renderer process
createMiddleware(3010, './webpack.config.server'); // A backend for communicating between renderer and remote server

if (argv['start-hot']) {
  spawn('npm', ['run', 'start-hot'], {
    shell: true,
    env: process.env,
    stdio: 'inherit',
  })
    .on('close', code => process.exit(code))
    .on('error', spawnError => console.error(spawnError));
}

Another words, I need to call cudaDeviceQuery library from electron renderer process. I'm using a electron-builder but it doesn't matter, I can switch to another builder.

4
  • Please add your webpack config to the question Commented Mar 1, 2018 at 9:25
  • @TarunLalwani ok, added
    – blits
    Commented Mar 1, 2018 at 10:36
  • There are two ways. You can use process.cwd() or process.resourcePath, instead of being dependent on __dirname. In development you can use __dirname: true to get full path when __dirname is called. But for production you need to use one of the two approaches Commented Mar 1, 2018 at 10:39
  • Unfortunately, I get Not allowed to load local resource: file://app/renderer/app.html error if I set __dirname in webpack.config.electron.js to true. process.cwd() helped! But I'm not sure it good thing for production (in case app called not from their directory). I found out one more way: __dirname works in main process perfectly, so I can get full path to file through ipc. Can you submit your answer, then I will accept it?
    – blits
    Commented Mar 1, 2018 at 10:56

2 Answers 2

4
+50

There are two things. If you set __dirname: true in your web app config you will get the relative path of the file from your context directory

If you set __dirname: false then __dirname will have the full path.

Development Mode

You have two options

  1. Set __dirname: true and concatenate it with os.cwd()
  2. Set __dirname: false and use __dirname directly

Production Mode

  1. Set __dirname: true and use os.cwd().
  2. Set __dirname: true and use process.resourcePath

I will prefer 2 as the preferred approach in production

1

Add this in package.json:

"scripts": {
    "start": "electron .", "install": "electron-rebuild",
    "package-osx": "electron-packager . Node-RED --platform=darwin --arch=x64 --   out=build --overwrite",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-serialport --overwrite --asar=true --platform=win32 --arch=x64 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"CryptoApp\"",
    "package-linux": "electron-packager . electron-serialport --overwrite --asar=true --platform=linux --arch=x64 --prune=true --out=release-builds"
},

"dependencies": {
    "electron-packager": "^12.1.0",
    "electron-prebuilt": "^1.4.13",
}

In case of not working for windows use the following:

"package-win": "electron-packager . electron-serialport --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"CryptoApp\"",

Thanks...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.