Skip to content

Commit 6b06cfb

Browse files
Rick-KirkhamRick-Kirkham
authored
Merge pull request #75 from aafvstam/master
Migrated from .NET Core 2.2 to .NET Core 3.1
2 parents 2efd3ea + 941f2e3 commit 6b06cfb

File tree

21 files changed

+29449
-198
lines changed

21 files changed

+29449
-198
lines changed

‎Samples/Office.ASP.NETCoreReactAddins/README.md

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# ASP .NET Core, React.js and Office UI Fabric React sample task pane web projects for Visual Studio 2019
1+
# ASP.NET Core, React.js and Office UI Fabric React sample task pane web projects for Visual Studio 2019
22

3-
This sample shows how to add Office UI Fabric React to an Excel Web Add-in project in Visual Studio 2019. You can build great cross-platform UI using the style and controls of Office UI Fabric React. This sample uses [React.js](https://reactjs.org/), [Office UI Fabric React](https://github.com/OfficeDev/office-ui-fabric-react), and the [React project template with ASP.NET Core](https://docs.microsoft.com/aspnet/core/client-side/spa/react). The template is equivalent to creating both an ASP.NET Core project and a standard create-react-app (CRA) React project to act as a UI, but with the convenience of hosting both in a single app project that you can build and publish as a single unit. To develop an add-in from the template, you can either add a Web API to the ASP.NET Core project or you can develop the project as a single-page React add-in. Since the project uses React as the UI, you should not attempt to use UI features of ASP.NET Core.
3+
This sample shows how to add Office UI Fabric React to an Excel Web Add-in project in Visual Studio 2019. You can build great cross-platform UI using the style and controls of Office UI Fabric React. This sample uses [React.js](https://reactjs.org/), [Office UI Fabric React](https://github.com/OfficeDev/office-ui-fabric-react), and the [React project template with ASP.NET Core](https://docs.microsoft.com/aspnet/core/client-side/spa/react). The template is equivalent to creating both an ASP.NET Core project and a standard create-react-app (CRA) React project to act as a UI, but with the convenience of hosting both in a single app project that you can build and publish as a single unit. To develop an add-in from the template, you can either add a Web API to the ASP.NET Core project or you can develop the project as a single-page React add-in. Since the project uses React as the UI, you should not attempt to use UI features of ASP.NET Core.
44

5-
We'd like to hear about your experience with this sample and using ASP.NET Core with Office UI Fabric React and Office Add-ins. Just submit a new issue in this repo to let us know if you have any questions or suggestions.
5+
We'd like to hear about your experience with this sample and using ASP.NET Core with Office UI Fabric React and Office Add-ins. Just submit a new issue in this repo to let us know if you have any questions or suggestions.
66

77
## Sample Web Projects
88

@@ -11,39 +11,40 @@ We'd like to hear about your experience with this sample and using ASP.NET Core
1111

1212
## Applies to
1313

14-
- Office 365
14+
- Microsoft 365
1515
- Visual Studio 2019
1616

1717
## Prerequisites
1818

1919
- Visual Studio 2019 (16.3 Preview 3 or newer) and the following Workloads and Optional Components installed:
20+
2021
- ASP.NET and web development
2122
- Node.js development
2223
- Office/SharePoint development
23-
- Net Core 2.2 Runtime (individual component)
24+
- Net Core 3.1 Runtime (individual component)
2425

2526
- Node.js, install from https://nodejs.org
2627

27-
>**Note:** Visual Studio 2019 can be downloaded from https://visualstudio.microsoft.com/downloads/
28+
> **Note:** Visual Studio 2019 can be downloaded from https://visualstudio.microsoft.com/downloads/
2829
2930
## Solution
3031

31-
Solution | Author(s)
32-
---------|----------
33-
Add ASP .NET Core with Office UI Fabric React to your Office Add-in | Microsoft
32+
| Solution | Author(s) |
33+
| ------------------------------------------------------------------ | --------- |
34+
| Add ASP.NET Core with Office UI Fabric React to your Office Add-in | Microsoft |
3435

3536
## Instructions
3637

3738
### Create a new Office Web add-in project
3839

3940
1. Start Visual Studio 2019.
4041
2. Choose **Create a new project**.
41-
3. Type "Excel" into the search box at the top of the dialog.
42+
3. Type "Excel" into the search box at the top of the dialog.
4243
4. Choose the Excel Web Add-in template, then choose **Next**.
4344
5. Give the new project a name on the **Configure your new project** page and use the default values for the remaining fields and then choose **Create**.
4445
6. On the choose the add-in type page, select **Add new functionalities to Excel**. Then choose Finish.
4546

46-
### Add the ASP .NET Core React.js web project to the solution
47+
### Add the ASP.NET Core React.js web project to the solution
4748

4849
1. Download or clone this repo. This will create a **PnP-OfficeAddins** folder.
4950
2. In Visual Studio, right-click the solution in **Solution Explorer** and choose **Add > Existing Project**.
@@ -52,29 +53,30 @@ Add ASP .NET Core with Office UI Fabric React to your Office Add-in | Microsoft
5253
5. Select the add-in project in Solution Explorer. It will have the name you gave the project when you created it and a Manifest entry under it (i.e. ExcelWebAddin1).
5354
6. Press F4 to view the **Properties** window for the project (if it is not already visible).
5455
7. Change the **Web Project** property to the name of ASP .NET Core web project you just added to the solution.
55-
**Note:**: The ASP .NET Core web project must be on the same local drive as the Excel Web Add-in project.
56+
**Note:**: The ASP.NET Core web project must be on the same local drive as the Excel Web Add-in project.
5657
8. In the **Solution Explorer** open the manifest.xml file under the Office Add-in project (the project only contains a manifest file). Copy and save the <Id> that has the GUID for your project.
57-
9. Copy the contents of the manifest.xml file in the ASP .NET Core project and replace all of the contents in the maninfest file in the Web Add-in project (i.e. ExcelWebAddin1Manifest.xml) with it.
58+
9. Copy the contents of the manifest.xml file in the ASP.NET Core project and replace all of the contents in the manifest file in the Web Add-in project (i.e. ExcelWebAddin1Manifest.xml) with it.
5859
10. Press F5 to debug the Office Web Add-in project.
5960

60-
> **Note:** npm install should run and install the packages prior to building the ASP.NET Core web project but you may need to watch the output window for errors. If errors occur, please try running npm install from the ./ClientApp folder.
61+
> **Note:** npm install should run and install the packages prior to building the ASP.NET Core web project but you may need to watch the output window for errors. If errors occur, please try running npm install from the ./ClientApp folder.
6162
6263
## Known Issues
6364

6465
1. If you are using Visual Studio 2019 Update 3 on Windows 10 version 1903 or later and Office version 16.0.11424.10000 or later, there is a known issue that effects your ability to hit breakpoints in JavaScript files. For more information and instructions on how to work around this please see https://developercommunity.visualstudio.com/content/problem/740413/office-development-inconsistent-script-debugging-b.html
6566

66-
2. The ASP .NET Core web project must be on the same local drive as the Office Manifest project. If it is not you will see the error "Property value is not valid" when trying to switch the Web Project property.
67+
2. The ASP.NET Core web project must be on the same local drive as the Office Manifest project. If it is not you will see the error "Property value is not valid" when trying to switch the Web Project property.
6768

6869
## Feedback
69-
Fill out this form to let us know your experience with this sample: [Developing with the ASP.NET Core + Fabric React Office Add-in sample](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR9Kwcf15u95EqS7NUgPuo5xUN0dYSFdQNVhFRDBaMjI1SDNXNFlKSkFNMC4u)
7070

71+
Fill out this form to let us know your experience with this sample: [Developing with the ASP.NET Core + Fabric React Office Add-in sample](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR9Kwcf15u95EqS7NUgPuo5xUN0dYSFdQNVhFRDBaMjI1SDNXNFlKSkFNMC4u)
7172

7273
## Version history
7374

74-
Version | Date | Comments
75-
---------| -----| --------
76-
1.0 | September 23, 2019 | Initial Release
75+
| Version | Date | Comments |
76+
| ------- | ------------------ | ---------------------------------- |
77+
| 1.0 | September 23, 2019 | Initial Release |
78+
| 2.0 | May 14, 2020 | Upgraded from .NET Core 2.2 to 3.1 |
7779

78-
### Disclaimer ###
80+
### Disclaimer
7981

80-
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
82+
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/.vscode/launch.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
// Use IntelliSense to find out which attributes exist for C# debugging
3+
// Use hover for the description of the existing attributes
4+
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": ".NET Core Launch (web)",
9+
"type": "coreclr",
10+
"request": "launch",
11+
"preLaunchTask": "build",
12+
// If you have changed target frameworks, make sure to update the program path.
13+
"program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/ASP.NET_Core_React_JavaScript.dll",
14+
"args": [],
15+
"cwd": "${workspaceFolder}",
16+
"stopAtEntry": false,
17+
// Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
18+
"serverReadyAction": {
19+
"action": "openExternally",
20+
"pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
21+
},
22+
"env": {
23+
"ASPNETCORE_ENVIRONMENT": "Development"
24+
},
25+
"sourceFileMap": {
26+
"/Views": "${workspaceFolder}/Views"
27+
}
28+
},
29+
{
30+
"name": ".NET Core Attach",
31+
"type": "coreclr",
32+
"request": "attach",
33+
"processId": "${command:pickProcess}"
34+
}
35+
]
36+
}

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/.vscode/tasks.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"version": "2.0.0",
3+
"tasks": [
4+
{
5+
"label": "build",
6+
"command": "dotnet",
7+
"type": "process",
8+
"args": [
9+
"build",
10+
"${workspaceFolder}/ASP.NET_Core_React_JavaScript.csproj",
11+
"/property:GenerateFullPaths=true",
12+
"/consoleloggerparameters:NoSummary"
13+
],
14+
"problemMatcher": "$msCompile"
15+
},
16+
{
17+
"label": "publish",
18+
"command": "dotnet",
19+
"type": "process",
20+
"args": [
21+
"publish",
22+
"${workspaceFolder}/ASP.NET_Core_React_JavaScript.csproj",
23+
"/property:GenerateFullPaths=true",
24+
"/consoleloggerparameters:NoSummary"
25+
],
26+
"problemMatcher": "$msCompile"
27+
},
28+
{
29+
"label": "watch",
30+
"command": "dotnet",
31+
"type": "process",
32+
"args": [
33+
"watch",
34+
"run",
35+
"${workspaceFolder}/ASP.NET_Core_React_JavaScript.csproj",
36+
"/property:GenerateFullPaths=true",
37+
"/consoleloggerparameters:NoSummary"
38+
],
39+
"problemMatcher": "$msCompile"
40+
}
41+
]
42+
}

‎Samples/Office.ASP.NETCoreReactAddins/excel-js/ASP.NET_Core_React_JavaScript.csproj

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
22

33
<PropertyGroup>
4-
<TargetFramework>netcoreapp2.2</TargetFramework>
4+
<TargetFramework>netcoreapp3.1</TargetFramework>
55
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
66
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
77
<IsPackable>false</IsPackable>
@@ -10,10 +10,6 @@
1010
<TargetOfficeVersion>15.0</TargetOfficeVersion>
1111
</PropertyGroup>
1212

13-
<ItemGroup>
14-
<PackageReference Include="Microsoft.AspNetCore.App" />
15-
</ItemGroup>
16-
1713
<ItemGroup>
1814
<!-- Don't publish the SPA source files, but do show them in the project files list -->
1915
<Content Remove="$(SpaRoot)**" />
@@ -24,6 +20,11 @@
2420
<Folder Include="ClientApp\src\assets\" />
2521
</ItemGroup>
2622

23+
<ItemGroup>
24+
<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="3.1.4" />
25+
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.4" />
26+
</ItemGroup>
27+
2728
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
2829
<!-- Ensure Node.js is installed -->
2930
<Exec Command="node --version" ContinueOnError="true">

0 commit comments

Comments
 (0)