go-astilectron + react

[danielhongwoo]

I'm trying to use react on go-astilectron.
First, yarn build for the react project and then bundle the results. It looked fine so far.

When I try to get some data from go implementation, I got this error.

yarn build

...

'astilectron' is not defined

And I found out there is no import or declaration about the astilectron instance on the javascript side. At least, there's no such thing in go-astilectron-demo/resources/app/*.

It seems to react doesn't know what it is while the astilectron-bundler could.

Any tips or comments will be helpful.

[asticode]

astilectron is defined here, when the Electron webview is loaded.

Make sure you're using the astilectron JS namespace wrapped in this:

document.addEventListener('astilectron-ready', function() {
    // TODO
})

[danielhongwoo]

@asticode Right.
But still, in the process of building a React app, it couldn't find the astilectron instance.

document.addEventListener("astilectron-ready", function () {
  astilectron.sendMessage(req, (res) => {
    console.log("res: ", res);
  });
});

[danielhongwoo]

Is it possible to bundle already built with react + electron + astilectron?
I think that's what I need. I tried but it used all my memory including the swap area.

cd go-astilectron-project
cd react_frontend
yarn add astilectron electron readlilne
yarn build
rsync -avh build/* ../resources/app/
cd ..
astilectron-bundler <-- all the memory is consumed. and the system freezes.

[asticode]

Is it possible to bundle already built with react + electron + astilectron?

That's the way you should do it : resources/app should contain the built files

I tried but it used all my memory including the swap area.

This is weird. Could you ls -l the content of resources/app to see if there are too many files that need to be embedded in the go binary?

[wickedst]

I'm using Typescript + React and getting on really well (cheers Asticode)

I'm not sure about non-Typescript, but I just declared astiliectron like so

export declare const astilectron: any;

[SMKim94]

I am using Javascript + React

First, the astilectron object is inside the global object.
You can check it using console.log (global).

And to receive or give a message from go,
You do not need to use the document.addEventListener ('astilectron-ready', function() {}).
Just global.astilectron.onMessage() or global.astilectron.Use the sendMessage() function.

[RianAfriyadi]

document.addEventListener('astilectron-ready', (e) => {
console.log("astilectron-ready")
console.log(e)
const astilectron = e.path[1].astilectron
astilectron.onMessage(message => {
const { name, payload } = message
console.log(message)
})
astilectron.sendMessage("hello from JS", function(message) {
console.log("received " + message)
});
})