cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
monadobariya
Level: Powered On

custom component

I am struggling with integrating the react component into canvas app. I have developed a web application using react.js and i want to host that application to the power app. Could you please guide me on this topic?

 

Thank you

Mona

 

1 ACCEPTED SOLUTION

Accepted Solutions
Microsoft v-siky-msft
Microsoft

Re: custom component

Hi @monadobariya ,

 

Please follow the following commands to pack your code components. Ensure the solution folder is inside the project folder that has the proj file.

  • npm install
  • mkdir <your Solutions folder>
  • cd <your Solutions folder>
  • pac solution init --publisher-name <enter your publisher name> --publisher-prefix <enter your publisher prefix>
  • pac solution add-reference --path <Path to the root of the sample component>
  • msbuild /t:build /restore

After that, you can find the solution.zip in bin/Debug folder, please check the Size.

Snipaste_2019-12-31_11-14-57.png

Then, import the code component in PowerApps Snipaste_2019-12-31_11-03-29.png

Sik

View solution in original post

4 REPLIES 4
Microsoft v-siky-msft
Microsoft

Re: custom component

monadobariya
Level: Powered On

Re: custom component

Hi Friend,

 

Thank you so much for your quick response on this topic.

I have followed all steps from the link you have posted to create a react application and I am able to run on-premises this application as per the attached screenshot.

I want to host a react application in the power-app cloud using my Microsoft account.

I already followed the steps to create a solution from that react project and imported it to the power-app cloud. When I add a canvas app to this solution I cannot see any react component on that canvas.

 

In short, if you could guide me on how to host react js application on the power-app cloud environment that would be a great help 

 

Microsoft v-siky-msft
Microsoft

Re: custom component

Hi @monadobariya ,

 

Please follow the following commands to pack your code components. Ensure the solution folder is inside the project folder that has the proj file.

  • npm install
  • mkdir <your Solutions folder>
  • cd <your Solutions folder>
  • pac solution init --publisher-name <enter your publisher name> --publisher-prefix <enter your publisher prefix>
  • pac solution add-reference --path <Path to the root of the sample component>
  • msbuild /t:build /restore

After that, you can find the solution.zip in bin/Debug folder, please check the Size.

Snipaste_2019-12-31_11-14-57.png

Then, import the code component in PowerApps Snipaste_2019-12-31_11-03-29.png

Sik

View solution in original post

monadobariya
Level: Powered On

Re: custom component

Hi Friend,

 

Thank you once again for helping me to solve this issue.

I have followed all the steps as per your suggestions and I am able to create a solution successfully. 

As well as I am able to import the react component to the canvas app.

 

Thank you for help.

Helpful resources

Announcements
thirdimage

Coming Soon: T-Shirt Design Contest

Keep your eyes open for our upcoming T-shirt design contest!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

Top Solution Authors
Top Kudoed Authors
Users online (5,528)