How to deploy a react app with c8y cli commands

,
1

Hi, I am using Cumulocity Trial version. I was studying c8y/cli and I just want to know if it’s possible to deploy a react application using c8y cli. I already tried to create an app with cumulocity cli and deployed on cumulocity with the cli commands, now i am curious to know if the same is possible with a react application. For this, I installed cumulocity cli and I changed the build and deploy commands in package.json file of react app as similar to the app that I created by using cumulocity cli, but i am not able to build or deploy using the cli so is there any other way to do it or any solution for this or is this even possible.

Conclusion: I just want to know if its possible to deploy a react app using cumulocity cli.

2

Hi Samanyu,

yes this is in general possible.
If you built your react app as described here: How to host a react application on Cumulocity IoT - #7 by Tristan_Bastian
You afterwards just have to place a valid cumulocity.json file in the build folder.
Once that is done, you can do a c8ycli deploy ./build, and enter your credentials to deploy the app.

Regards,
Tristan

1 Like
4

Hi Tristan,

The command helped me to deploy the app, thank you. I always learn something new from you guys, Cheers and Happy Learning!!

Regards,
Samanyu

5

Hi Tristan,
I was trying to deploy a react app with the cli but I was facing one issue which I am not able to figure out, hoping you could me with this. When I am deploying my app with the cumulocity.json file the app is not able to load its resources but when I am deploying it without cumulocity.json it is working fine.

I tried keeping the same name of the homepage path and the cumulocity.json context path but the issue still persists. Tried keeping the version and name of package.json and cumulocity.json the same but still no change.
Hope you could help me figure out the issue.

Regards,
Samanyu

6

Hi Samanyu,

can you share the content of the cumulocity.json file and what you configured for homepage in the package.json?

Regards,
Tristan

7

Hi Tristan,

Cumulocity.json

{
    "author": "Samanyu Mehra",
    "name": "ABCD",
    "version": "0.1.0",
    "description": "This is a front end of the cumulocity application",
    "contextPath": "emoji",
    "key": "cumulocity-app2-application-key"
  }

package.json

  "homepage": "/apps/emoji",

Regards,
Samanyu

8

Hi Samanyu,

This looks in general fine. Can you check the network tab for the failing requests? From where is your application trying to load it’s resources?

Regards,
Tristan

9

Hi Tristan,

There is nothing on the network tab.

image
image1147×520 16.7 KB

But there is some stuff on the console tab.

image
image1843×615 64.2 KB

So I have figured out that whenever we get this error on the console, it is always a path issue. So it is not able to find the resources from the path provided. What do you think could be the potential issue here? Is it getting confused between the paths provided on the homepage variable and cumulocity.json file?

Regards,
Samanyu

10

These requests should actually all have been prefixed with /apps/emoji in their path.
I tried this again with the emoji sample react app and it works just fine for me.

Can you try reloading the page with a cleared cache? Maybe you have the index.html still cached with some different setup.

You can also double check that the script tags used in the index.html of your build folder are prefixed with /apps/emoji.

Regards,
Tristan

11

Hi Tristan,

It was a cache issue, it slipped my mind. Thank you for your help.

Best Regards,
Samanyu

12

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