Running backend typescript.ts at theia start

#1

Hi Team,

I have a widget extension, generated using yo generator, under this extension file I added backend.ts, I want to just check if I can run the background tasks in this file at the start (either when the widget is created or when theia is started, it would be great if I could configure that as well). Backend.ts file has the following code.
import { injectable } from ‘inversify’;

@injectable()
export class BackendService {
constructor() {
console.log("###########################################################");
console.log(“Back end logic”);
console.log("############################################################");
}
}

export default BackendService;

in frontend module.ts under container module, I do add the following line

bind(BackendService).toSelf().inSingletonScope();

How ever when I start the theia or my widget I do not end up in the constructor of my BackendService, in fact, I do not hit the constructor of BackendService at any point of time, could you please let me know what am I missing here?

Kind Regards
Nandish

#2

@Nandish thank you for the discussion, I believe your class should implement BackendApplicationContribution, which has a onStart lifecycle hook which you are likely interested in.

#3

@vince-fugnitto thanks a lot, I will try that.

#4

@vince-fugnitto thanks for your tip, I did follow this,
export class BackendService implements BackendApplicationContribution {
constructor() {
}
onStart() : void
{
}
onStop() : void
{
}
}

However I end up with error, failed to start frontend aplication, cannot find module http,
I did include “http”: 0.0.0 as dependency in my extension package.json.

Could you please let me know, where I could be going wrong, this is pretty basic, I should be able to run some background tasks at theia start.
Many thanks in advance.
Kind Regards
Nandish

#5

http is a node module that cannot be imported in a frontend application. Are you trying to run a BackendApplicationContribution in the application frontend?

#6

Basically I just created a widget extension with yo generator, and added a file named BackendService.ts to the extension folder, I wanted to initialize few stuffs before theia is started or even before my widget is opened. Adding BackendService.ts to the extension folder was a suggestion which I found on google.
I forgot to mention below code previously. The below lines of code are added in frontend-module.ts

bind(BackendService).toSelf().inSingletonScope(); // Register your custom backend service
bind(BackendApplicationContribution).toService(BackendService);

Kind Regards
Nandish

#7

Idea was to have a model initialized in this BackendService class, and then the widget front end just reacts to change in the model. I was successful to communicate the changes on model to widget using theia events. I just wanted the view not to have any knowledge of the model at all, hence wanted to create the model in backend service file.
Please let me know if this idea is wrong.

Kind Regards
Nandish

#8

Ok, that makes sense, but why bind it in the frontend module? The frontend module runs in the browser and has no access to the backend system (on a pure js level - it can communicate via JSON-RPC). You’re probably looking for something like this documentation.

#9

@msujew , thanks for the tip, I shall look at the documentation and try again.

Kind Regards
Nandish

#10

@vince-fugnitto @msujew , is it possible to share some example snippets here, it may seem very simple but I am getting little bit confused. I have my widget extension, which has various react components to display the data, backend class hosting the model. I need to communicate the changes on my model to the widget xtension.
I am having backend.ts (backend-module.ts) in the same folder (widget extension folder /src/browser), is it wrong to have the backend file here? Should I have to place it somewhere else? does it not make any difference?

#11

@Nandish The backend module is supposed to go in the /src/node folder. The important part though is that it needs to be designated as a backend module in your package.json. Take a look at the Backend Communication example app that can be generated through the Theia yeoman generator. It should create a project scaffolding that shows you how to communicate with the Theia backend.

#12

@msujew thanks, I shall look at it.

#13

@msujew thanks a lot for the help, I could move forward, I believe I have almost achieved what I needed, but stuck with small error.
I have a view model class which I need on widget.tsx and as well on frontend-module.ts
In fronend-module.ts I have the below class

@injectable()
class BackendClientImpl implements BackendClient {
constructor(@inject(ViewModel) private readonly view_model: ViewModel)
{
}
getName(): Promise {
return new Promise(resolve => resolve(‘Client’));
}
updateView(data : someData): void {
view_model.updateData(data);
}
}

Basically backend calls this function updateView and this function informs view model to update data which will finally be reflected on my view.

The moment I try to access the view_model through constructor parameter I get a error, too much recursion.
Note: I have a similar constructor on widget.tsx file as well. And in frontend-module.ts I have the below line

bind(ViewModel).toSelf().inSingletonScope();

I assumed this would allow my viewmodel to have only one instance which I can access in both widget.tsx and in frontend-module.ts
However I get the error too much recursion, could you please give me some insights where I am going wrong or understanding it wrong.
Kind Regards
Nandish