Electron app to host external site


#1

Hi,

I’m developing a website which provides some services. This website is accessible from a browser. I would like to develop an Electron app to give the user a desktop experience (exactly the same way as Slack, if you know it).

My Electron project is exactly the same as the quick start tutorial from the official github site. I’ve juste replaced this line :

mainWindow.loadUrl('file://' + __dirname + '/');

by this one :

mainWindow.loadUrl('http://my-website.com/');  

I’m using jQuery in my web application. It works fine when I use my web application from any browser (Chrome, Firefox, etc…), but it seems to be a problem with jQuery when I run my Electron app :

“$ is not defined” and “jQuery is not defined”

I know this problem come from the fact that Electron should not be used to host external website, but, is there a way to fix it ? I would keep my application accessible via browsers.

Thanks for your help.


Requirejs issue in electron
#2

Are you sure that you have loaded jQuery in your project? I have been using electron with my libraries that declare and manipulate the global object $ and they have been working without a single issue.

To get a more insight of your issue, you might want to do BrowserWindow.openDevTools()


#3

I have loaded jQuery in my website (in the head section), jQuery works well when I run my site in a browser. Do I have to load jQuery in my Electron app ?


#4

I’m running into the same issue. I checked DevTools and the JQuery file is getting downloaded, but it’s just getting ignored. I wonder if there’s some flag (I tried turning web-security to false, but that didn’t help).

EDIT: Found it: https://github.com/atom/electron/issues/254

“If your app does not need node-integration, add “node-integration”: false to your BrowserWindow options. In this case module.exports is not available, jQuery works like expected.”


#6

Thank you very much @russellbeattie ! That’s exactly what I needed ! :smiley: It’ works very well !


#7

Thanks for the tip, and I tried

"node-integration": false

It works good, but how I communicate with the main process without require(“ipc”)? I’m ok to turn off node-integration from the renderer process, because I have to load a bunch of plugins with bootstrap.

So sounds like I have two options:

  1. turn off node integration and figure out how to communicate with main process
  2. keep node integration but patch every single javascript that I load like above examples

or should I go route to learn build systems such as gulp?


#8

Hi @kiichi,

I have a similar problem re communication between renderer/main process, but I can’t patch the JS files loaded as they could be external… Did you come up with a solution at all which still enabled you to communicate with the main process with node-integration disabled?

Cheers


#9

Did you read the whole thread? https://github.com/atom/electron/issues/254

Setting node-integration to false works if you do not wish to modify the page, but that isn’t the way most people will want to solve this… and you do not need to modify the js files. You just need to add a line to the html page to require the js module that is trying to cooperate with the module loader.


#10

I have been using jQuery in electron like so:
<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

If you want it to work in browser and electron, you could probably do:
onload="if (typeof require !=== 'undefined') window.$ = window.jQuery = module.exports;"

or something similar


#11

i think onload statement should be like

there was typo of extra = in typeof require !=== ’ undefined’


#12

In which file of electron project should I do this?


#13

check out this post if you want to communicate with main process with node-integration=false

https://discuss.atom.io/t/communicate-with-mainprocess-and-nodeintegration-false/27409/4?u=sarabsandhu


#14

I have tried that and it works great. But I don’t understand the meaning of nodeIntegration: false. I know that you are seeting nodeIntegration to false. But I don’t know the effect of that. I have created a website in node.js using express. I am now showing that website in my electron app. So, will nodeIntegration: false make any difference to me??


#15

with node-integration=true, you can access all the native node modules inside your website javascript code. From my personal experience, nodejs using commonjs as module loading framework. My website was using requirejs. Both commonjs and requirejs have require function. nodejs commonjs is initialized before your website takes control. With node-integration=true, electron will still think that your website code is using commonjs so there will be runtime issues in loading your website in Browser WIndow. Issuse will include like It can not find jquery symbol ($), require function is initialized already. Hope this answer your question.


#16

hi. how do you solve the problem load html use iframe where caused an error as follow: require is not defined. someone said use the webview tag, but i want to know there is any way to solve this problem. i have added the node-integration


#17

Before :

and after:


#18

I think that you may want to repost what you were trying to say.


#19

Loading from extrenal http/https resource using jQuery plugin

  1. Install the jQuery package in Eletron app
  2. Include the code in the external html head section
    <script type="text/javascript" src="path/to/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>.

#20

add this to your HTML: