Web designer in react app example not working

[Shoshanah]

I am having trouble integrating the web report designer into my react app using instructions in https://docs.telerik.com/reporting/knowledge-base/how-to-use-web-report-designer-in-react-js. 

Looking for help, I downloaded the recommended example for integrating web designer into react apps (https://github.com/telerik/reporting-samples/tree/master/WebReportDesigner%20in%20React%20Application/src).

When loading this example in Visual Studio code, I get a 404 error. I have done a NPM install and NPM start. I am new to react, so may be missing a step?

[Dimitar]

Hello Shoshanah,

Thank you for the provided information regarding the issue!

I was able to reproduce the problem locally. It is caused by the fact that the script reference that retrieves the Web Report Designer JS from https://demos.telerik.com/reporting had hardcoded an older version than the latest version that we have currently released(we update the live demo after each release).

In order to avoid this problem, you can modify the script references in public/index.html as follows:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>

  <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>

  <script src="https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner/"></script>

I will update the repo shortly with this change, please test it also on your end and let me know if that helps.

Lastly, I would like to mention that if you are using the latest LTS release of Node JS, you may need to update the versions of the react packages in the project because of an SSL issue - node.js - Error message "error:0308010C:digital envelope routines::unsupported" - Stack Overflow

Thank you for helping us improve Telerik Reporting!

Regards,
Dimitar
Progress Telerik

[Shoshanah]

Thank you.

One follow-up – – I noticed that all examples/instructions use a demo UrL to access web designer JavaScript , versus an installed copy of the web designer. I am planning to integrate this in our application so users can modify reports.

However, I am not able to find instructions for how to install web designer, and didn’t see and NPM package for the web designer -- is it only available in demos right now?

[Shoshanah]

I implemented your suggested changes, including addressing the SSL issue. I’m still receiving a 404 error.

I have attached a copy of the Public/index.html and Package.json files.

 

[Dimitar]

We discussed the first topic in the ticket but to also mention it here, we do not have an NPM package for the Web Report Designer yet, however, the Web Report Designer can be implemented locally by following the How to set up the Web Report Designer in .NET Core 3.1 and .NET 5+ applications - Telerik Reporting article.

On the topic of the errors, please test pulling the latest changes from the telerik/reporting-samples (github.com) repo. I just merged the change with the versions and now the React Web Report Designer example should work out of the box, let me know if that is not the case.