Создайте SPA на основе React (одностраничное приложение), используя приложение create-response-app на передней панели и dotnet / webapi на внутренней стороне.
Использует cli create-react-app, а также dotnet cli для быстрой загрузки полностекового приложения.
Настройка среды
Требуется .NET Core SDK 2.0 или новее, Node.js версии 6 или новее.
При установленном .NET Core 2.0 запустите следующее, чтобы установить шаблоны
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
Создайте свой новый проект
Чтобы собрать и запустить проект из командной строки:
# creates the project scaffolding
dotnet new react -o myproj
cd myproj
# build the server side
dotnet build
# теперь создаем клиентскую часть, используя npm или yarn
cd ClientApp
npm запустить сборку
CD ..
# наконец, запустить прямо из командной строки
# Как вариант, вы можете открыть файл csproj в Visual Studio 2017 (или выше) и построить / запустить / отладить оттуда
Сделайте несколько настроек BackEnd
Раздельное управление javascript
Шаблон dotnet по умолчанию использует службы Spa Services для создания и запуска сервера наблюдения из Visual Studio. Я предпочитаю запускать и управлять всем javascript вне Visual Studio. Чтобы соединить две части вместе, откройте Startup.cs и внесите следующие изменения
Добавить аутентификацию Windows
Откройте файл launchSettings.json в свойствах и внесите следующие изменения.
Теперь о настройках FrontEnd
Чтобы было красивее:
Привяжите более симпатичную поддержку к последней версии в проекте и подключите несколько вспомогательных библиотек, чтобы все продолжало работать:
npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev
bootstrap
Шаблоны dotnet, по состоянию на начало 2018 года, включают bootstrap 3.3 и react-bootstrap. Я предпочитаю использовать сырые библиотеки начальной загрузки 4, а не зависеть от реакции-начальной загрузки.
Это требует немного большей настройки, но мне нравятся параметры управления, которые он дает. У Дэна А есть суть для этого здесь
Сначала откройте package.json и удалите строки для начальной загрузки и response-bootstrap. npm i jquery bootstrap popper.js
Теперь внутри файла index.js добавьте несколько операций импорта следующим образом:
Удалить файлы шаблонов
На этом этапе вы получите несколько ошибок компиляции для чего-либо в папке компонентов, которые полагались на response-bootstrap. Верните его только к index.js и App.jsx и создайте оттуда.
