Как правильно работать со связкой ASP.NET Core, React и npm?

Question

[mletov]

Пожалуйста, подскажите:

Решил вот освоить React и плагины к нему, и прикрутить все это добро к моему проекту на ASP.NET Core.
Погуглил, установил node.js. jsx файлы нормально выполняются, но дальше попал в затык, даже не знаю, в какую сторону гуглить:

1) При выполнении npm все подтянутые клиентские скрипты попадают в папку в корне проекта /node_modules. Реально же статические файлы из корня проекта лежат в папке wwwroot. Т е получается, что для того, чтобы файлы можно было подключать в html через script src, надо копировать файлы из корня проекта в корень веб-приложения в wwwroot, чтобы было wwwroot/node_modules, что неправильно. Это где-то настраивается?

2) При попытке установить грид adazzle через npm получаю ошибку

"npm : npm WARN deprecated react-tools@0.12.2: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
At line:1 char:1
+ npm install adazzle-react-grid --save
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (npm WARN deprec...ools-deprecated:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError"

Гуглил, советуют обновить то один пакет, то другой, но конкретную причину ошибки так и не удалось найти.

3) Простейшие jsx при подключении выполняются, но при этом пытался подключить какие-то файлы, получаю типа "require not defined". Нужны еще какие-то библиотеки?

Comments

[Pantene742]

Подключи сначала интерпритатор node.js в студии, а то она свой использует. How to set up Node.js VisualStudio гугли.

Answer 1

[Роман]

Webpack вам в помощь. Например https://medium.com/@MaartenSikkema/using-react-red...

Comments

[mletov]

Спасибо. Когда я гуглил, то как решение моей проблемы упоминался некий CommonJs.
CommonJs это альтернатива WebPack, модуль/плагин к нему или вообще отдельная штука?

И еще вопрос. В .NET есть бандлы, которые делают тоже, что и WebPack - минифицируют код. Если использовать WebPack, то от бандлов имеет смысл отказаться?

[Станислав Макаров]

mletov https://habrahabr.ru/company/mailru/blog/340922/

[mletov]

Станислав Макаров, Спасибо

[Роман]

CommonJs немного другое, это тоже средство загрузки модулей, но весь интерес в веб паке, что он делает бандлы из модулей. Например, я использую angular для spa. И у меня отдельно webpack`ом собирается фронтенд в папку wwwroot, отдельно само asp.net приложение (фактически WebAPI). А в production еще webpack делает tree sharking, те чистит готовый js от неиспользуемых модулей, процедур, функций, еще больше уменьшая приложение. Подведу итог, asp.net core используется лишь для WebAPI, и естественно представляет собой проект VS. SPA приложение отдельно делается (можно и в той же VS) и собирается отдельно Webpack. Для отладки у Webpack`а есть встроенный сервер с горячей перезагрузкой модулей, те любое изменение SPA приводит к пересборке и перегрузке только измененных файлов.

[mletov]

Роман, Спасибо за развернутый ответ!

[Роман]

mletov, просто почитайте еще про это, действительно удобно. С реакт можно еще TypeScript использовать, этот язык транспилируется в JS, тпи этом есть много интересных плюшек, для меня это строгая типизация. А для спасибо на тостере есть кнопка, отметить ответом на вопрос. Задавайте вопросы еще, поможем чем можем.

[Станислав Макаров]

mletov
Раз уж речь зашла про TypeScript, пришло время пиара нашего уютного ютуб-канала) https://youtu.be/0U32jvheNds?t=39m47s .

[mletov]

Роман, Станислав Макаров,

Удалось сдвинуться с мертвой точки, получил нужные пакеты через npm, скомпилил через WebPack подключил к странице, работает.

Но дальше споткнулся :

Примеры к гриду примерно такие:
adazzle.github.io/react-data-grid/scripts/example1...
adazzle.github.io/react-data-grid/scripts/example0...

Как я понимаю, это тоже не чистый js, а какой-то его суррогат. TypeScript, CommonJS, JSX...
Не подскажете, что это и как с этим работать? Пытался компилить через WebPack, пытался запихнуть в JSX - везде ошибки.

Answer 2

[eRKa]

Если решили делать spa, то я бы не советовал смешивать фронт с asp частью. Лучше вынести всю фронтовую часть в отдельный проект, а собранный index уже отдавать asp проектом и его же использовать просто как web api. Тогда ничего мешаться не будет.

Comments

[mletov]

В первую очередь, я стараюсь понять, как это все в принципе должно взаимодействовать.
Я хочу сделать обычную CRUD админку для сайта, в качестве грида прикрутить к ней Adazzle grid.
Может данная комбинация и не лучшая, но на данный момент я лучшего и не ищу, а хочу потыкать во все, а потом уже самостоятельно решить, что лучше Angular, Vue или React.

Т к опыта работы с npm и node.js нет, хочу так же разобраться с подтягиванием пакетов, зависимостями, правильными путями и т д.

[Pantene742]

пиши отдельно Frontend и Rest. В этом то и вся прелесть Rest. Visual Studio используй чисто для разработки бэкенда.

[Pantene742]

mletov, там все просто с node.js

[Pantene742]

Pantene742,

[Pantene742]

Pantene742, тогда меньше ошибок с Node.js будет. Но я не советую создавать проект сразу с фронтом.

Microsoft хотят сделать так чтоб веб проект бэкенд и фронт часть создавались словно новый проект в фотошопе. Насамом деле Студия хороша для разработки бэкенда и работы с C#. Фронт лучше разрабатывать в Вебшторме или VS code/ Можно делать все в одной IDE. нооо там нету много лишнего для фронта, и нет всего необходимого подсказки ангуляра как в вебшторме например. и вообще вся прелеть Rest в том что теперь процесс разработки бекенд полностью отделен от Фронтенд.

Answer 3

[as_molchanov]

Вы можете посмотреть как работает связка React + SignalR + ASP.NET Core в проекте https://github.com/directlinkcore/directlink

Comments

[mletov]

Спасибо, посмотрю