How to host a react application on Cumulocity IoT

,
1

What product/components do you use and which version/fix level are you on?

I am using Cumulocity IoT (Release 10.13.0)

Is your question related to the free trial, or to a production (customer) instance?

Free Trial

What are you trying to achieve? Please describe it in detail.

I am trying to host a react application on Cumulocity. Just guide me if there is any documentation for the same or if anyone has tried this before. It would be a great help.

2

Hi Samanyu,

you can just upload your react application as described here: Administration - Cumulocity IoT Guides . In addition to your application you would also have to place a cumulocity.json file in your zip archive.

I’ve attached a sample zip file with just a basic HTML file for demonstration. app.zip

Regards,
Tristan

1 Like
3

Hi Tristan,

Thank you for your reply. Can you please guide me on how will I route the application internally in react from the index.html file. Let me know if you have any guides, it will help me a lot.

Regards,
Samanyu

4

Hi Samanyu,

you probably have some issues as the application is served from an subfolder and not in the root of server.
Maybe you can try what is suggested here:

The baseUrl should be something like /apps/<contextPath-of-your-app>/.

Regards,
Tristan

6

Hi Tristan,

Thank you for your response. That could help me in the later stage but right now I got another issue. I was able to solve that so now I am building my application and deploying the build of the application on cumulocity. Now I have many react pages that I am routing internally. But whenever I am trying to go to a different page through a link, the cumulocity is appending a .html in the URL. So do you have any idea about how I can block the cumulocity to look for foo.html and just go to the foo I have mentioned?

P.S: I am taking into account that you are not aware of React.js so I am letting you know that in react we have numerous .js pages which are known as components and we route the application without any suffix. Like, Link to /foo instead of /foo.js.
So is it possible to route to other pages or do I need to create HTML pages for all the pages that i have created in js? Do let me know what you think about this.

Regards,
Samanyu

7

Hi Samanyu,

I’ve just tested it with this react sample application: GitHub - ahfarmer/emoji-search: Simple React app for searching emoji
I’ve had to adapt the homepage attriubute of the package.json to /apps/emoji-search.
After running npm run build, I’ve zipped the files contained in the newly created build folder and renamed the zip file to emoji-search.zip.

This zip file I just had to upload then to the tenant.

Regards,
Tristan

8

Hi Tristan,

Thank you so much for your response. The relative path (/apps/emoji-search) helped me. Now my application is working on cumulocity. You were a great help, I hope you come to answer me in the future too, haha. Thanks a ton!

Regards,
Samanyu

1 Like
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.