Visual Studio template using .NET Core + Fabric React for Office Add-ins

Key Takeaways

[Music] I'm Silvio Quora I'm a program manager on the office add-ins developer experience team and I'm here to talk to you about modernizing the visual studio templates so taking a step back the goal of the developer experience team is to help developers be successful building office add-ins using modern tools and frameworks now that doesn't mean that we will support all frameworks in existence we've tried this we tried it a couple years ago we had samples across the different frameworks available and we noticed that a year later they were out of day and there we just didn't have the bandwidth to keep up with all the different frameworks so we've pivoted a little bit and we decided that we will start by going deep on a few of the frameworks that we'll reach and impact the most amount of people so what does that mean for visual studio and visual studio today we support net framework and fabric j/s we will continue to support that because I think that's one of our core scenarios now what we're looking into you is how do we fit into the dotnet core story so if you're a.net developer you're aware that there's been a lot of buzz around dotnet core and so we took a step back and said okay what's our story here how do you start building off of the momentum so we've kind of put together and what I'll be demoing today is a template that leverages dotnet core and fabric reacts and our goal is that this is kind of the first step in in modernizing our visual studio templates and supporting more developers who are in visual studio it is a journey so we would love your feedback we would love you to get involved in the discussion and help make sure make sure that we're going after the right frameworks and building the right experience for you but today we are starting with this we are starting with dotnet core and fabric react so I will hop right into demo actually so today this sample is in our PMP repo it's live today so you can go and try it after the call or whatever works for you there are a few prerequisites the first is Visual Studio 2019 you can be an update 3 or newer so if you're in the preview version of Visual Studio you're fine if you are in the non preview version make sure that you have update 3 and then you need to have the following components installed so you need the dotnet component the node.js component office and SharePoint as well as the net core 2.2 runtime once you have those and nodejs installed on your machine getting started is pretty much similar to how you get started with add-ins today you're going to open visual studio click create new project search Excel and then make sure that you're creating the web add in not the VST Oh at it you from here you can call it whatever you want and that make sure you select add new functionalities to excel not the insert content into spreadsheet so that will start creating the template and then to add dotnet core and fabric react you actually need to clone the PNP repo and so if you open a command prompt go to where you want to create your project and then type then git clone and the URL and that will download the the project onto your local drive and you want to make sure that you download it onto the same local drive that Visual Studio created your project so for me it's easy I only have one drive they all get downloaded to the same place but if you're using multiple drives like a C Drive and a D Drive make sure that you're installing both projects to the same place so all right my add-in has been created so from here this is the original atom that is in visual studio today to add the dotnet Korn react piece you want to right-click the solution go down to add and then add existing project then you want to navigate to where you downloaded the pnp repo so for me it was in downloads you can see it right here I'd go to samples here's the dotnet core react choose the language that you are more comfortable with I'm comfortable with typescript so I'm going to choose that and then I'm gonna go ahead and include the project you can see the project was included here I'm actually gonna go ahead and build this now so it can be installed and then be integrated with the original add-in and actually I will pause right here just to call out something that you may notice so this is the original web atom project you can see the structure here below the new dotnet core react has a slightly different structure and so where you'll find the code is in this client app folder if you expand public you'll see the task pane styling as well as the tasks pane code and then in source you will see the index that's the SX file and in components you'll see the app dot CSX file and this is where most of your JavaScript code will end up going so you can see the default we always changed the color of the range to yellow and so that code lives in the App tsx all right so I think my project has finished building and double-check yes that looks right so what you're gonna do next is you're going to link both your dotnet corn react template and your added manifest so to do that you want to go to excel web add in five or whatever your project was called and you'll see down here in the properties pane web project so here you want to change this to your dotnet core and react template you want to associate yes we do we want to link the two together and that will update the manifest and do a couple other linkings then the final step in this to link the two projects is to go into your manifest copy this ID and then you want to update the manifest in your SP dotnet core templates so if I go here you can see the same ID make sure you change that and then you're actually going to take this whole manifest and replace your old one let me flip back one more time here we go just control a replace the whole thing save and that is the last step but your atom should now be a dotnet core and react atoms so to watch it I'm just gonna go ahead and hit f5 here we go and you see Excel is gonna load it's loading the add-ins we're still working on some of the performance here now using dotnet core and how do we optimize this to be as fast as the previous templates so that is something that we're aware of and are continuing to work on so I'll just give it a second Erica's awesome okay so adding loaded successfully you'll see the show task pane button again we're aware of the performance there's something I'm still working on but awesome cool it loaded I select a range here I hit run it changes to yellow if I go back to visual studio to my solution Explorer and my Oh app dot TSX file yeah I can actually change this to you let's say wand you clean go ahead and do that open Excel again open Excel again change and you can see it's up to date and this is using that's pretty much it this is using.net core and and react is you still get the same functionality with office j s there are a few extra steps because this is still in preview and something that we wanted to test out and make sure that it's a project type that people would want and use and ah see this is where you guys come in so let me switch back to the presentation here ok it so like I mentioned in the beginning this is a journey this is a conversation we would love your feedback and love for you to get involved if you're a.net developer and have opinions or things that you want to see in the experience please come talk to us and so these are kind of our two action items go try out the dotnet core and react template that's in the PNP repo let us know your thoughts let us know what you think and how it works for you and then if you have additional opinions or additional feedback that you want to give us sign up for an interview and come come talk to us about how you use dotnet with office add-ins and what you expect to see and what we what you would like to see from a platform that's pretty much it for me [Music]