Add new architecture cpp-app template for init-windows

change/@react-native-windows-cli-f8746fb1-f085-4b47-9dad-c6600eb19941.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add new architecture `cpp-app` template for `init-windows`",
+  "packageName": "@react-native-windows/cli",
+  "email": "jthysell@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-5fa5b1ed-5fe5-4580-b4c1-43da739d008e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add new architecture `cpp-app` template for `init-windows`",
+  "packageName": "react-native-windows",
+  "email": "jthysell@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/cli/src/commands/config/configUtils.ts

@@ -110,9 +110,15 @@ export function isRnwDependencyProject(filePath: string): boolean {
       'Microsoft.ReactNative.Uwp.CSharpLib.targets',
     );
   } else if (projectLang === 'cpp') {
-    return importProjectExists(
-      projectContents,
-      'Microsoft.ReactNative.Uwp.CppLib.targets',
+    return (
+      importProjectExists(
+        projectContents,
+        'Microsoft.ReactNative.Uwp.CppLib.targets',
+      ) ||
+      importProjectExists(
+        projectContents,
+        'Microsoft.ReactNative.Composition.CppLib.targets',
+      )
     );
   }
 
@@ -193,9 +199,15 @@ function isRnwAppProject(filePath: string): boolean {
       'Microsoft.ReactNative.Uwp.CSharpApp.targets',
     );
   } else if (projectLang === 'cpp') {
-    return importProjectExists(
-      projectContents,
-      'Microsoft.ReactNative.Uwp.CppApp.targets',
+    return (
+      importProjectExists(
+        projectContents,
+        'Microsoft.ReactNative.Uwp.CppApp.targets',
+      ) ||
+      importProjectExists(
+        projectContents,
+        'Microsoft.ReactNative.Composition.CppApp.targets',
+      )
     );
   }
 

packages/@react-native-windows/cli/src/generator-common/index.ts

@@ -74,7 +74,7 @@ export function resolveContents(
 }
 
 // Binary files, don't process these (avoid decoding as utf8)
-const binaryExtensions = ['.png', '.jar', '.keystore'];
+const binaryExtensions = ['.png', '.jar', '.keystore', '.ico', '.rc'];
 
 type ContentChangedCallbackOption = 'identical' | 'changed' | 'new' | null;
 

packages/@react-native-windows/cli/src/utils/deploy.ts

@@ -231,6 +231,44 @@ function getAppxManifestPath(
   return appxPath;
 }
 
+function getAppxRecipePath(
+  options: RunWindowsOptions,
+  projectName?: string,
+): string {
+  const appxManifestPath = path.dirname(
+    getAppxManifestPath(options, projectName),
+  );
+
+  const appxRecipeGlob = `*.build.appxrecipe`;
+
+  const globs = glob.sync(path.join(appxManifestPath, appxRecipeGlob));
+
+  let appxRecipePath: string;
+  if (globs.length === 1 || !projectName) {
+    appxRecipePath = globs[0];
+  } else {
+    const filteredGlobs = globs.filter(x => x.includes(projectName));
+    appxRecipePath = filteredGlobs[0];
+    if (filteredGlobs.length > 1) {
+      newWarn(
+        `More than one appxrecipe for ${projectName}: ${filteredGlobs.join(
+          ',',
+        )}`,
+      );
+      newWarn(`Choosing ${appxRecipePath}`);
+    }
+  }
+
+  if (!appxRecipePath) {
+    throw new CodedError(
+      'DeployRecipeFailure',
+      `Unable to find AppxRecipe from "${appxManifestPath}", using search path: "${appxRecipeGlob}" `,
+    );
+  }
+
+  return appxRecipePath;
+}
+
 function parseAppxManifest(appxManifestPath: string): parse.Document {
   return parse(fs.readFileSync(appxManifestPath, 'utf8'));
 }
@@ -384,10 +422,7 @@ export async function deployToDesktop(
   } else {
     // Deploy from layout
     // If we have DeployAppRecipe.exe, use it (start in 16.8.4, earlier 16.8 versions have bugs)
-    const appxRecipe = path.join(
-      path.dirname(appxManifestPath),
-      `${projectName}.build.appxrecipe`,
-    );
+    const appxRecipe = getAppxRecipePath(options, projectName);
     const ideFolder = `${buildTools.installationPath}\\Common7\\IDE`;
     const deployAppxRecipeExePath = `${ideFolder}\\DeployAppRecipe.exe`;
     if (

packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.vcxproj

@@ -64,7 +64,7 @@
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
   </ImportGroup>
   <ImportGroup Label="ReactNativeWindowsPropertySheets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props" />
   </ImportGroup>
   <ItemDefinitionGroup>
     <ClCompile>
@@ -125,18 +125,13 @@
   </ItemGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <ImportGroup Label="ReactNativeWindowsTargets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets')" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets')" />
   </ImportGroup>
-  <ItemGroup>
-    <PackageReference Include="boost" Version="1.76.0.0" />
-    <PackageReference Include="Microsoft.Toolkit.Win32.UI.XamlApplication" Version="6.1.3" />
-    <PackageReference Include="Microsoft.VCRTForwarders.140" Version="1.0.2-rc" />
-  </ItemGroup>
   <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
     <PropertyGroup>
       <ErrorText>This project references targets in your node_modules\react-native-windows folder. The missing file is {0}.</ErrorText>
     </PropertyGroup>
-    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props'))" />
-    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets'))" />
   </Target>
 </Project>

packages/playground/windows/playground-composition/Playground-Composition.vcxproj

@@ -63,7 +63,7 @@
     <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
   </ImportGroup>
   <ImportGroup Label="ReactNativeWindowsPropertySheets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props" />
   </ImportGroup>
   <ItemDefinitionGroup>
     <ClCompile>
@@ -167,19 +167,16 @@
   </Target>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <ImportGroup Label="ReactNativeWindowsTargets">
-    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets')" />
+    <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets')" />
   </ImportGroup>
   <ItemGroup>
-    <PackageReference Include="boost" Version="1.76.0.0" />
-    <PackageReference Include="Microsoft.Toolkit.Win32.UI.XamlApplication" Version="6.1.3" />
-    <PackageReference Include="Microsoft.VCRTForwarders.140" Version="1.0.2-rc" />
     <PackageReference Include="$(V8PackageName)" Version="$(V8Version)" Condition="'$(UseV8)' == 'true'" />
   </ItemGroup>
   <Target Name="EnsureReactNativeWindowsTargets" BeforeTargets="PrepareForBuild">
     <PropertyGroup>
       <ErrorText>This project references targets in your node_modules\react-native-windows folder. The missing file is {0}.</ErrorText>
     </PropertyGroup>
-    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.props'))" />
-    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.props'))" />
+    <Error Condition="!Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets')" Text="$([System.String]::Format('$(ErrorText)', '$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Composition.CppApp.targets'))" />
   </Target>
 </Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.Common.props

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL Win32 app and module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Common.props" />
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.CppApp.props

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL Win32 C++ app projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <!-- Keeping this at the top of the imports ensures we can use the autolinking 
+       process to set properties without having to edit the project file -->
+  <Import Project="$(ProjectDir)\AutolinkedNativeModules.g.props"
+          Condition="Exists('$(ProjectDir)\AutolinkedNativeModules.g.props')" />
+
+  <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Composition.Common.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\Appx.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\Autolink.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\Codegen.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\NuGet.Cpp.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\WinUI.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\CppAppConsumeCSharpModule.props" />
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\PackageVersionDefinitions.props" />
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.CppApp.targets

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL Win32 C++ app projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <!-- Starting with the base of the UWP Cpp targets for now (until we need to start differentiating). -->
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.Uwp.CppApp.targets" />
+
+  <ItemGroup>
+    <PackageReference Include="boost" Version="1.76.0.0" />
+    <PackageReference Include="Microsoft.Toolkit.Win32.UI.XamlApplication" Version="6.1.3" />
+    <PackageReference Include="Microsoft.VCRTForwarders.140" Version="1.0.2-rc" />
+  </ItemGroup>
+
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.Package.props

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL Win32 app and module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Common.props" />
+   <!-- Fixes NuGet restore issues: -->
+  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\NuGet.CSharp.props" />
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.Composition.Package.targets

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL Win32 app and module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+
+  <ItemGroup>
+    <SDKReference Include="Microsoft.VCLibs.Desktop, Version=14.0" />
+    <!-- Needed for ucrtbased.dll when running a debug build. -->
+    <SDKReference Include="Microsoft.VCLibs, Version=14.0" Condition="'$(Configuration)' == 'Debug'" />
+  </ItemGroup>
+
+</Project>

vnext/PropertySheets/External/Microsoft.ReactNative.WindowsSdk.Default.props

@@ -18,7 +18,7 @@
     <WindowsTargetPlatformMinVersion Condition="'$(UseWinUI3)'=='true' And $([MSBuild]::VersionLessThan('$(WindowsTargetPlatformMinVersion)', '10.0.17763.0'))">10.0.17763.0</WindowsTargetPlatformMinVersion>
   </PropertyGroup>
 
-  <PropertyGroup Label="Globals" Condition="'$(MSBuildProjectExtension)' == '.csproj'">
+  <PropertyGroup Label="Globals" Condition="'$(MSBuildProjectExtension)' == '.csproj' Or '$(MSBuildProjectExtension)' == '.wapproj'">
     <TargetPlatformVersion Condition="'$(TargetPlatformVersion)'==''">10.0.19041.0</TargetPlatformVersion>
     <TargetPlatformMinVersion Condition="'$(TargetPlatformMinVersion)'==''">10.0.17763.0</TargetPlatformMinVersion>
 

vnext/templates/cpp-app/metro.config.js

@@ -0,0 +1,51 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+const fs = require('fs');
+const path = require('path');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+
+const rnwPath = fs.realpathSync(
+  path.resolve(require.resolve('react-native-windows/package.json'), '..'),
+);
+
+//{{#devMode}} [devMode
+const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');
+const rnwPackages = path.resolve(rnwPath, '..', 'packages');
+// devMode]{{/devMode}}
+
+module.exports = {
+  //{{#devMode}} [devMode
+  watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
+  // devMode]{{/devMode}}
+  resolver: {
+    blockList: exclusionList([
+      // This stops "react-native run-windows" from causing the metro server to crash if its already running
+      new RegExp(
+        `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
+      ),
+      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+      new RegExp(`${rnwPath}/build/.*`),
+      new RegExp(`${rnwPath}/target/.*`),
+      /.*\.ProjectImports\.zip/,
+    ]),
+    //{{#devMode}} [devMode
+    extraNodeModules: {
+      'react-native-windows': rnwPath,
+    },
+    // devMode]{{/devMode}}
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+    // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
+    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
+  },
+};