Мне удалось получить эту настройку так, как мне нужно, включая замену горячего модуля Webpack.
Чтобы получить контроль над необходимой конфигурацией, мне нужно было извлечь react-client-app, выполнив:
`npm run eject`
Это создаст несколько каталогов и файлов в корневом каталоге вашего приложения,они содержат конфигурации веб-пакетов как для производства, так и для отладки.
Для моего проекта я не хотел папок static/, чтобы изменить вывод файлов, в webpack.config есть несколько областейкоторый управляет ими, например:
webpack.config.js
output: {
...
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js',
...
},
....
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'media/[name].[ext]',
},
},
...
По какой-то причине стандартный шаблон React TS (create-react-app <name> --typescript) не ссылается на tsconfig.json.Одним из ключей для этого было установить tsconfig-paths-webpack-plugin.При этом используются пути, определенные в tsconfig.json для разрешения псевдонимов и путей, это позволяет включать модули из пользовательских путей вместо использования относительных путей, таких как:
import <name> from 'core/common/<name>';
Следующим элементом бизнеса было добавлениеЗапись homepage в package.json:
{
"name": "<AppName>",
"homepage": "/<AreaName>",
"version": "0.1.0",
...
}
Это добавит значение homepage к путям и направит его в правую область.Первоначально я думал, что мне нужно было собрать клиент вручную, а не использовать Javascript Services (Spa), но это не так.Использование Spa для разных областей действительно делает вещи красивыми и опрятными, поэтому нет смысла выводить в папку wwwroot, поскольку для SpaStaticFiles можно указать любой корень и путь.Следующим шагом было обновление файла Startup.cs для добавления служб Javascript.
Startup.cs
public IServiceProvider ConfigureServices(IServiceCollection services)
{
// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
// Adds the path to the React files
configuration.RootPath = "Areas/<AreaName>/ClientApp/build";
});
return services.ConfigureApplicationServices(Configuration);
}
application.UseSpaStaticFiles(new StaticFileOptions
{
// This is the key to getting things working, this is the path of the Area
RequestPath = "/<AreaName>",
});
application.UseSpa(spa =>
{
spa.Options.SourcePath = "Areas/<AreaName>/ClientApp";
if ( env.IsDevelopment() )
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
Приложение React теперь обслуживается из Района.Нет необходимости копировать файлы в wwwroot, поскольку Javascript Servies позаботится об этом, просто укажите все файлы, которые были в корневом каталоге, к пути будет добавлено значение homepage.
Наконец, чтобы загрузить приложение, я инициировал приложение через стандартный Controller / View и использовал скомпилированный index.html, чтобы получить требуемый импорт для возврата.
View
@{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/<AreaName>/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/<AreaName>/manifest.json" />
<title>React App</title>
<!-- Webpack Styles -->
<link href="/<AreaName>/css/vendors~main.chunk.css" rel="stylesheet">
<link href="/<AreaName>/css/main.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Webpack Scripts -->
<script src="/<AreaName>/js/vendors~main.chunk.js"></script>
<script src="/<AreaName>/js/main.js"></script>
</body>
</html>
Чтобы react-router-dom работал правильно с MVC и его маршрутами, вам нужно использовать HashRouter вместо BrowserRouter.
Примечание: Если вы используете npm run build перед запуском сеанса разработкиБудут использоваться файлы, собранные для производства, а не файлы для отладки.Это вызовет некоторую путаницу, поскольку ничего не будет обновляться.Чтобы все обновлялось при внесении изменений, просто удалите каталог ./build и снова запустите.
Я надеюсь, что я включил все, если не просто опубликовать комментарий, и я добавлю то, что я пропустил.