Create New Addin using React js(typescript) in visual studio 2022

Question

I am developing an add ins in visual studio 2022 using java-script. I want to upgrade my add ins with React (type script) I read documentation in that I can create add ins in visual studio code using Yeoman Generator. I want that my existing functionality will not affected after I migrate my project to react. (My new functionality will create in react and Existing functionality will working parallelly until it migrate to react(typescript) parallelly)

Can you please provide guidance and step to do that..How can I create application for office add ins(Excel,Word,Powerpoint) with react in visual studio 2022.

Answer 1

I can think of two strategies. But I can only sketch them. I think strategy 1 or 3 is going to be the easiest.

Strategy 1:

1. Create an add-in solution in VS 2022.
2. Delete the Home.html, Home.css, and Home.js files and the \Content folder from the web project in the solution.
3. Create a different project in Yo Office and select the React option.
4. Copy the files from the \src folder in the Yo Office project to the root of the web project in the VS 2022 solution.
5. Change URLs in the manifest to point to taskpane.html instead of Home.html.

Strategy 2:

1. Create an add-in solution in VS 2022.
2. Add a React project to the solution. TAKE THE STANDALONE PROJECT OPTION
3. Delete the Home.html, Home.css, and Home.js files and the \Content folder from the web project in the solution.
4. Copy the index.html file and the \src folder from the React project to the add-in web project.
5. Change URLs in the manifest to point to index.html instead of Home.html.
6. When the add-in is working, delete the React project from the solution.

Strategy 3:

1. Create an add-in solution in VS 2022.
2. Delete the entire original web app project from the solution.
3. Add a React project to the solution. TAKE THE ASP.NET PROJECT OPTION
4. Change URLs in the manifest to point to index.html instead of Home.html.
5. Open the properties of the original manifest project and change the WebProject property to point to the React server project.