Tạo SPA với JavascriptServices trong Asp.Net Core

Một Single Page Application (SPA) là một kiểu phổ biến của ứng dụng web với trải nghiệm người dùng phong phú vốn có của nó . Việc tích hợp client-side SPA frameworks hoặc libraries, giống như Angular hoặc React, với server-side giống như ASP.NET Core có thể là khó khăn. JavaScriptServices được phát triển để giảm bớt sự va chạm trong quá trình tích hợp này. Nó cho phép sự vận hành liền lạc giữa sự khác nhau của client và server về mặt công nghệ.

JavaScriptServices là một bộ sưu tập của những công nghệ client-side cho ASP.NET Core. Mục tiêu của nó là để đặt ASP.NET Core làm nền tảng ưu thích phía máy chủ cho các lập trình viên xây dựng SPAs.

JavaScriptServices bao gồm 3 Nuget packages riêng biệt:

• Microsoft.AspNetCore.NodeServices (NodeServices)
• Microsoft.AspNetCore.SpaServices (SpaServices)
• Microsoft.AspNetCore.SpaTemplates (SpaTemplates)

Những packages này hữu ích nếu bạn:

• Chạy JavaScript trên server
• Sử dụng một SPA frameworks hoặc library
• Build các tài nguyên client-side với webpack

Phần lớn bài viết này sẽ tập trung là việc sử dụng SpaService package

SpaServiecs được tạo ra để đặt ASP.NET Core làm nền tảng ưu thích phía máy chủ cho các lập trình viên xây dụng SPAs. SpaServices không yêu cầu phát triển SPAs với ASP.NET Core, và nó khoog ràng buộc bạn tới một client framework riêng biệt nào.

SpaServices cung cấp cơ sở hạ tầng hữu ích như:

• Server-side prerendering
• Webpack Dev Middleware
• Hot Module Replacment
• Routing helpers

1. Node.js (version 6 or later) với npm

Để xác minh những components đã được cài đặt và có thể tìm thấy, chạy command bên dưới:

node -v && npm -v

Chú ý: Nếu bạn đang triển khai tới một website trên Azure , bạn không cần bất kì cái gì ở đây - Node.js đã được cài đặt và có sẵn trên môi trường server.

2. NET Core SDK 1.0 (or later)

Nêu bạn là trên Windows, nó có thể đã được cài đặt bởi việc lựu chọn .NET Core cross-platform developmet của Visual Studio 2017

3. Microsoft.AspNetCore.SpaServices NuGet package

Một ứng dụng universal là một ứng dụng JavaScript có khả năng chạy trên cả server và client. Angular, React, và những frameworks phổ biến khác cung cấp một nền tảng universal cho kiểu phát triển ứng dụng này. Ý tưởng là để render đầu tiên trên server thông qua Node.js và tiếp theo ủy quyền phần còn lại cho client.

ASP.NET Core Tag Helper được cung cấp bởi SpaService để đơn giản việc triển khai của server-side prerendering bởi việc triệu gọi các JavaScript functions trên server.

Prerequisites

Cài đặt:

• aspnet-prerendering npm package:

npm i -S aspnet-prerendering

Configuration

Tag Helper là được làm để có khả năng khám phá thông qua việc đăng kí namespace trong file ViewImports.cshtml của dự án.

@using SpaServicesSampleApp
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@addTagHelper "*, Microsoft.AspNetCore.SpaServices"

Những Tag Helpers này ẩn đi những sự phức tạp của việc giao tiếp trực tiếp với low-level APIs bởi việc tận dụng một HTML-like syntax bên cạnh Razor view:

<app asp-prerender-module="ClientApp/dist/main-server"></app>

Webpack Dev Middleware giới thiệu một quy trình phát triển được sắp xếp hợp lý theo đó Webpack builds tài nguyên dựa trên nhu cầu. Middleware tự động biên dịch và phục vụ tài nguyên client-side khi một trang được tải lại trên trình duyệt. Cách tiếp cận thay thế là bằng cách thủ công triệu gọi Webpack thông qua npm build script của dự án khi một third-party phụ thuộc hoặc những thay đổi code tùy chỉnh. Một npm build script trong file package.json được chỉ ra trong ví dụ bên dưới:

"build": "npm run build:vendor && npm run build:custom",

Prerequisites

Cài đặt:

• aspnet-webpack npm package:

npm i -D aspnet-webpack

Configuration

Webpack Dev Middleware được đăng kí đến đường ống của HTTP request thông qua code trong method Configure của file Startup.cs:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseWebpackDevMiddleware();
}
else
{
    app.UseExceptionHandler("/Home/Error");
}

// Call UseWebpackDevMiddleware before UseStaticFiles
app.UseStaticFiles();

UseWebpackDevMiddleware extension method phải được gọi trước việc đăng kí static file hosting thông qua UseStaticFiles extension method. Vì lý do bảo mật, đăng kí middleware chỉ khi app chạy ở chế độ development

Suy nghĩ về Hot Module Replament(HMR) của Webpack như một sự mở rộng của Webpack Dev Middleware. HMR giới thiệu giống nhau tất cả về lợi ích, nhưng đi xa hơn sự sắp xếp hợp lý về quy trình phát triển bởi tự động việc cập nhật nội dung trang sau khi việc biên dịch các thay đổi kết thúc. Đừng nhầm lẫn điều này với việc refresh của trình duyệt.

Prerequisites

Cài đặt:

• webpack-hot-middleware npm package:

npm i -D webpack-hot-middleware

Configuration

HRM component phải được đăng kí đến đường ốngHTTP request trong Configure method:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
    HotModuleReplacement = true
});

Tương tự với Webpack Dev Middleware, UseWebpackDevMiddleware extension method phải được gọi trước UseStaticFiles extension method. Vì lý do bảo mật, đăng kí middleware chỉ khi ứng dụng chạy trong chế độ phát triển.

Prerequisites

Cài đặt:

• client-side routing npm package. Sử dụng Angular như một ví dụ:

npm i -S @angular/router

Configuration

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

JavaScriptServices cung cấp pre-configured application templates. SpaServices được sử dụng trong những template này, trong việc kết hợp với những frameworks và libraries khác nhau giống như Angular, Aurelia, Knockout, React và Vue.

Những templates này có thể được cài đặt thông qua .NET Core CLI bởi việc chạy lệnh bên dưới:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::

Một danh sách SPA templates sẵn có được liệt kê bên dưới:

Để tạo một dự án mới sử dụng một của những SPA templates, bao gồm Short Name của template trong lệnh dotnet new. Lệnh bên dưới tạo một ứng dụng Angular với ASP.NET Core MVC được cấu hình cho server-side:

dotnet new angular

Chạy với .NET Core CLI

Restore của những Nuget được yêu cầu và npm package bởi việc chạy lệnh bên dưới tại project root:

dotnet restore && npm i

Build and run ứng dụng:

dotnet run

Ứng dụng bắt đầu với localhost theo runtime configuration mode . Điều hướng tới http://localhost:5000 trong trình duyệt để hiển thị trang