Native dependencies in electron wrapper

steffanhalv

Hi, I have a fresh install of quasar default starter kit with default electron wrapper.

Im trying to:

Import http from ‘http’ in App.vue

Which of course dont work in browser,
but it does also not work in electron when running quasar dev in electron folder.

I tried to change target to ‘node’ in webpack conf in root folder which make it work, but then require doesnt work anymore and vue wont load. (But it does load http thought and electron app does run / work)

How to use target ‘node’ in webpack config without break quasar / vue? Or how to use http in electron app? I cant figure out the right config.

benoitranque

You can probably npm install --save http

Are you sure you want the node http module, not something like axios?

steffanhalv

I need several native dependecies including exec, net etc… Is there no way to config it to get it work with target node?

benoitranque

The thing is, an electron app is nothing if not a barebone chrome browser. I’m still not sure what you want to do.
Probably not a good idea to try to serve files from a client app. Would having a node backend with an express server be an option?

steffanhalv

Ah, thx.

Now I get more of the electron lib idea.
I found several helpful information ex.

https://electronjs.org/docs/api/net
https://github.com/electron/electron-rebuild
https://github.com/electron/electron/blob/master/docs/tutorial/using-native-node-modules.md
https://github.com/shelljs/shelljs#execcommand--options--callback

For exec on mac:

https://github.com/sindresorhus/fix-path

Btw. serve files from a client app should not be an issue. Its done in almost every game which acts both like a client and a server.
I need my applications both to serve and be served

Edit:

Im sorry, I think my problem still persist.
The problem is that electron actually does run and executes my code:

import net from ‘net’;
net.createServer (…); // etc… (this executes when webpack target is node)

But vue does not load because native node doesnt recognize require() which is used in main.js etc…
Any1 made this work with quasar? I got it work using electron-vue, but it would help alot more if it worked with quasar also.

benoitranque

Have you looked at sockets.io?

steffanhalv

@benoitranque Thats not related to my question or my attention. But yes, I know about socket.io

If you do not know how to setup config to use quasar electron with target node in webpack, or can not show me how to use native node libs in electron quasar, please do not respond. Thank you.

steffanhalv

@benoitranque and yes I want http module ( tcp/ip ) controll not axios. Im targetting the computer hardware, not other clients only.

benoitranque

Maybe this project can help. The electron forum may be a better place for this question, as it is not quasar specific.

steffanhalv

Im, sorry but this is not electron related, electron runs as it should. I think the problem is the configuration of quasar by how webpack and babel is configured.

Please see https://github.com/quasarframework/quasar/issues/1224

JaredThirsk

I am trying to get quasar working with edge-js (for .NET interop) (https://github.com/agracio/electron-edge-js)

I managed to make some progress in loading the native .node file by doing this in the top of my quasar.conf.js file:

// Configuration for your app

module.exports = function (ctx) {
  return {
    module: {
      rules: [
        {
          test: /\.node$/,
          use: 'node-loader'
        }
      ]
    },

I think I did a yarn add node-loader

Then in my index.vue, I do this:

import edge from 'node-loader!../../node_modules/electron-edge-js/lib/native/win32/x64/8.9.3/edge_nativeclr.node'

It loads in quasar dev -m electron, but not build – still need to sort out paths. Not sure if this even makes sense yet.

rstoenescu

@jaredthirsk

Just a note that you won’t need the addition with Quasar CLI v0.16.2. It will also be a good idea to remove “node-loader” from your package.json, because it’s gonna get embedded into the CLI by default. The node-loader was specified only for the main process, not the renderer – I assume you are importing in the renderer process, right?
Since you’ve added the webpack rule, you don’t need to also specify node-loader! as prefix in your import statements.

rstoenescu

@steffanhalv

Do NOT change the webpack target prop. It is already configured in the right way. If you need to change it you’re doing something wrong. Please also note there’s one webpack config for the renderer process and ANOTHER separate one for the main process. Which one are you trying to change? In 99% of the cases, you don’t need to change it anyway.
I see that you are importing the http package, which is a node specific library, which is NOT isomorphic (doesn’t also works being run in a browser). You could use it in the main process though, but not in the renderer.

Like I mentioned in a previous post, node-loader and it’s webpack rule for renderer process (it’s currently specified only for the main process) will be available by default in Quasar CLI v0.16.2.

No More Posting New Topics!

Native dependencies in electron wrapper