ساختار پروژه با طراحی اپلیکیشن فایل های controller ، View و wwwroot آشنا بنظر رایا پارس میرسد. فولدر ی ClientApp دربردارنده Angular هست . شما همینطور میتوانید webpack.config.js را درروت پروژه مشاهده کنید که‌این فولدر بیان‌کننده این میباشد که webpack دراین پروژه تحت عنوان module bundler به کارگیری می‌شود . این فولدر webpack را در ارتباط کیفیت bundle کردن کد کلاینت ارشادوراهنمایی می نماید.
پیش از پرداختن به کد ، اساسی میباشد که به نکاتی اعتنا کنیم . این مثال کد از JavaScriptServices برای ساخت‌و‌ساز اپلیکیشن ی تک شیت ای (single page application) با ASP.NET Core به کارگیری میکند . JavaScriptServices یک دسته ای از تکنولوژی های سمت کلاینت برای ASP.NET Core است و هدفش این میباشد که ASP.NET Core را تیتر پلت هیبت سمت سرور برای ساختن SPA ها قرار دهد و هم اینگونه دربرگیرنده هواخواهی برای قاب ورک های سمت کلاینت میباشد –Angular، Aurelia ، knockout.js ، React ، React + Redux و Vue.js
شناخت با JavaScriptServices
این خدمت مشتمل بر سه ناگت پکیج منفاوت میباشد
Microsoft.AspNetCore.NodeServices (NodeServices) :
به شما قابلیت و امکان اجرای JavaScript (در دور و اطراف Node.js ) روی سرور را می دهد . حتی شما می توانید از پکیج های NPM در طی جاری ساختن در اپ .Net Core خویش به کار گیری فرمایید
Microsoft.AspNetCore.SpaServices (SpaServices) :یک پلت هیبت سمت سرور برای ساختن SPA ها ارائه می‌دهد . این پکیج دربردارنده ابزار های ضروری برای رئیس prerendering سمت سرور ، حفاظت webpack middleware ، Hot Module Replacement و راهنمای مسیریابی (routing) برای همگام سازی مسیر های سمت کلاینت با مسیر سرور
Microsoft.AspNetCore.SpaTemplates (SpaTemplates) : این پکیج پوسته های SPA (single page application) برای ASP.NET Core ارائه می‌دهد
تمامی ی این پکیج ها تحت عنوان بخشی از پکیج Microsoft.AspNetCore.All به نرم‌افزار شما اضافه گردیده اند. این متا پکیج در ASP.NET Core 2.0 معرفی شد
اکنون به سراغ بعضا از خطوط اساسی کد می رویم تا ببینیم به چه شکل شغل میکند . آغاز ، Startup.cs گشوده نمائید و به سیاق configure() نگاه نمایید . دراین سیاق چندین نکته وجود داراست
اولیه :
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
کد بالا WebpackDevMiddleware را در پایپ لاین درخواست HTTP رجیستر میکند . همانطور که میدانید webpack یک module bundler میباشد و برای ساختن و bundle منابع سمت کلاینت به کار گیری می‌گردد . به صورت معمولی ، یکی از می بایست webpack را در خط دستور برای bundle کردن چیز ها ایفا نماید البته با این middleware کلیه ی این مراحل بصورت اتومات ایفا می گردد و نیاز وجود ندارد که شما نگران چیزی باشید در این مکان HotModuleReplacmentروی true گذارده شد‌ه‌است