React + Backend + Extension Template

[lmborione]

Hi,

I looked on available ressource on github and on the documentation to implement a React App. Unfortunately I found only the desktop-starter implementing Electron complete enough for my needs.

I am looking for a boilerplate project implementing imodeljs with the following:

• A viewer with create-react-app already existing template
• A backend alongside the react application with an example of an RPCInterface implementation on both frontend and backend
• An extension adding a button on the viewer implementing a call to a backend with RPCInterface (if it makes senses)

My pain point is the implementation of RPCInterface on a nodejs express backend and the react frontend.

Thanks

[kckst8]

Hello @Imborione,

Can you give a little more info about what you are attempting to accomplish with your custom RPCInterface? That would help to direct you to the proper steps. Also, is this a web app or an electron app?

As far as the frontend:

For web apps, you can use the iTwin VIewer CRA template.

The best way to extend an app that is based on the iTwin Viewer is to use UI Providers. Better samples of this are in the works, but for now you can see an example in the iTwin Viewer development app

More info on getting started with a web-based viewer can be found here

[lmborione]

Hello

Thanks for your response. I am looking to query the content of the imodel and display/modify some properties in a viewer.
I upload an imodel for testing purpose, get all necessary id for context.
I used the iTwin Viewer CRA template and implement a React app with a viewer and I manage to display the model.

Now I am trying to query the content of the imodel using an sql request 'SELECT * FROM ABT' where ABT is an class of a custom ECSchema (I previously try this command in the online command line interface)

I though this request was supposed to occur on the backend of my application.

I had trouble implementing the backend and RPCInterface since there are no template to add those feature to an CRA templated viewer.

Thanks.
LM Borione

[pmconne]

You can query the content of the iModel using IModelConnection.query.

[lmborione]

Hi,
Thanks for your answer.
When I design application I prefer to have my frontend only querying one backend and dispatch the call to other backends from there. Therefore I prefer to query the content of a model not from a frontend.

Also after querying the content of the imodel, I need to execute a second query on a custom mongo database. That is why I was initially looking for a template just like the desktop starter (https://github.com/imodeljs/desktop-starter) with a backend and a frontend without Electron but with a Create React App. I understand this does not exist.

On this page of the documentation https://www.itwinjs.org/learning/softwarearchitecture/#web it is written that for web application frontend to backend communication should implement an RPCInterface instead of just fetching backend url. I try to implement it but could not succeed. Is there somewhere an example of an implementation of frontend to backend communication in a configuration just like mine?

Thanks for your help.