Поделиться через


Учебник. Создание приложения ASP.NET Core с помощью React в Visual Studio

В этой статье вы узнаете, как создать проект ASP.NET Core, который будет использоваться в качестве серверной части API, и проект React, который будет использоваться в качестве пользовательского интерфейса.

В настоящее время в Visual Studio есть шаблоны одностраничных приложений (SPA) ASP.NET Core, поддерживающие Angular и React. Шаблоны предоставляют встроенную папку клиентского приложения в проектах ASP.NET Core, содержащих базовые файлы и папки каждой платформы.

Метод, описанный в этой статье, можно использовать для создания ASP.NET одностраничных приложений core, которые:

  • размещение клиентского приложения в отдельном проекте вне проекта ASP.NET Core;
  • создание клиентского проекта на основе интерфейса CLI платформы, установленного на компьютере.

Примечание.

В этой статье описывается процесс создания проекта с помощью обновленного шаблона в Visual Studio 2022 версии 17.8, который использует интерфейс командной строки Vite.

Необходимые компоненты

  • Visual Studio 2022 версии 17.8 или более поздней версии с установленной рабочей нагрузкой ASP.NET и веб-разработки . Перейдите на страницу скачиваемых материалов Visual Studio, чтобы установить ее бесплатно. Если вам нужно установить рабочую нагрузку и у вас уже есть Visual Studio, перейдите в раздел Средства>Получить средства и компоненты..., после чего запустится Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.
  • npm (https://www.npmjs.com/), который входит в состав Node.js
  • npx (https://www.npmjs.com/package/npx).

Создание интерфейсного приложения

  1. В окне "Период запуска" выберите Создать новый проект.

    Screenshot showing Create a new project.

  2. Найдите React в строке поиска в верхней части, а затем выберите React и ASP.NET Core (предварительная версия). Этот шаблон является шаблоном JavaScript.

    Screenshot showing choosing a template.

  3. Назовите проект ReactWithASP и нажмите кнопку "Создать".

    Обозреватель решений показаны следующие сведения о проекте:

    Screenshot showing Solution Explorer.

    По сравнению с автономным шаблоном React вы увидите некоторые новые и измененные файлы для интеграции с ASP.NET Core:

    • vite.config.js
    • App.js (измененный)
    • App.test.js (измененный)
  4. Выберите установленный браузер на панели инструментов "Отладка", например Chrome или Microsoft Edge.

    Если нужный браузер еще не установлен, сначала установите браузер, а затем выберите его.

Задание свойств проекта

  1. В Обозреватель решений щелкните правой кнопкой мыши проект ReactWithASP.Server и выберите "Свойства".

    Screenshot showing Open project properties.

  2. На странице "Свойства" откройте вкладку "Отладка " и выберите пункт "Открыть профили запуска отладки". Un проверка параметр "Запустить браузер" для профиля с именем проекта ASP.NET Core (или https, если он присутствует).

    Screenshot showing Debug launch profiles UI.

    Это значение предотвращает открытие веб-страницы с исходными данными о погоде.

    Примечание.

    В Visual Studio launch.json хранятся параметры запуска, связанные с кнопкой "Пуск" на панели инструментов отладки. В настоящее время файл launch.json должен находиться в папке .vscode.

Запуск проекта

Нажмите клавишу F5 или нажмите кнопку "Пуск " в верхней части окна, чтобы запустить приложение. Отображаются две командные строки:

  • Выполняющийся проект API ASP.NET Core

  • Интерфейс командной строки Vite, показывающий сообщение, например VITE v4.4.9 ready in 780 ms

    Примечание.

    Проверьте выходные данные консоли для сообщений. Например, может быть сообщение об обновлении Node.js.

Откроется приложение React и заполняется через API. Если приложение не отображается, см. раздел Устранение неполадок.

Публикация проекта

  1. В Обозреватель решений щелкните правой кнопкой мыши проект ReactWithASP.Server и выберите "Добавить>ссылку на проект".

    Убедитесь, что выбран проект reactwithasp.client .

  2. Выберите OK.

  3. Щелкните правой кнопкой мыши проект ASP.NET Core и выберите "Изменить файл проекта".

    Откроется CSPROJ-файл проекта.

  4. В CSPROJ-файле убедитесь, что ссылка на проект содержит <ReferenceOutputAssembly> элемент с заданным falseзначением.

    Эта ссылка должна выглядеть следующим образом.

     <ProjectReference Include="..\reactwithasp.client\reactwithasp.client.esproj">
       <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
     </ProjectReference>
    
  5. Щелкните правой кнопкой мыши проект ASP.NET Core и выберите "Перезагрузить проект ", если этот параметр доступен.

  6. В Program.cs убедитесь, что следующий код присутствует.

    app.UseDefaultFiles();
    app.UseStaticFiles();
    
    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
       app.UseSwagger();
       app.UseSwaggerUI();
    }
    
  7. Чтобы опубликовать, щелкните правой кнопкой мыши проект ASP.NET Core, выберите "Опубликовать" и выберите параметры для сопоставления требуемого сценария публикации, например Azure, публикации в папке и т. д.

    Процесс публикации занимает больше времени, чем только проекта ASP.NET Core, так команда npm run build вызывается при публикации. СборкаCommand выполняется npm run build по умолчанию.

Устранение неполадок

Ошибка прокси-сервера

Вы можете получать следующую ошибку:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:7183 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

При появлении этой ошибки, скорее всего, интерфейсная часть была запущена до серверной. После того как серверная командная строка запустится, просто обновите приложение React в браузере.

Проверка портов

Если данные о погоде не загружаются правильно, может потребоваться проверить правильность портов.

  1. Убедитесь, что номера портов совпадают. Перейдите к файлу launch Параметры.json в проекте ASP.NET Core ReactWithASP.Server (в папке "Свойства"). Получите номер порта из свойства applicationUrl.

    Если имеется несколько свойств applicationUrl, выберите то, которое использует конечную точку https. Он выглядит примерно так.https://localhost:7183

  2. Откройте файл vite.config.js проекта React. target Обновите свойство, чтобы соответствовать свойству applicationUrl при запуске Параметры.json. Обновленное значение выглядит примерно так:

    target: 'https://localhost:7183/',
    

Ошибка конфиденциальности

Вы можете увидеть следующую ошибку сертификата:

Your connection isn't private

Попробуйте удалить сертификаты React из %appdata%\local\asp.net\https или %appdata%\roaming\asp.net\https, а затем повторите попытку.

Следующие шаги

Дополнительные сведения о приложениях SPA в ASP.NET Core см. в разделе React в разделе "Разработка одностраничных приложений". Связанная статья содержит дополнительный контекст для файлов проекта, таких как aspnetcore-https.js, хотя сведения о реализации отличаются в зависимости от различий шаблонов. Например, вместо папки ClientApp файлы React содержатся в отдельном проекте.

Сведения о MSBuild, относящиеся к клиентскому проекту, см. в свойствах MSBuild для JSPS.