In our previous article, we studied ASP.NET Core 1.0 Configuration: Aurelia Single Page Applications. Now, we are going to create Aurelia single page Applications in ASP.NET Core 1.0.
In our previous article, we mentioned a detailed description about ASP.NET Core 1.0 Configuration: Aurelia Single Page Applications. Thus, we only noticed the important steps of Aurelia configuration in ASP.NET Core 1.0. Install jspm and Aurelia framework through the command.
We are going to add Aurelia references in "index.html" page because in ASP.NET Core 1.0, we run index.html file as a start page in default. Don't worry. We can mention other pages also but we need to do some customization in the code.
The code given below contains the reference of "jspm_packages/system.js" & "config.js". The body tag contains the "aurelia-app" or an entry point of Aurelia app and it automatically detects the app.js file in our root folder (what we mention baseURL on jspm installation) or wwwroot. The "System.import("Aurelia-Bootstrapper")" will help to import Aurelia-Bootstrapper references in the body.
System.config({
baseURL:
"/"
,
defaultJSExtensions:
true
transpiler:
"babel"
babelOptions: {
"optional"
: [
"runtime"
"optimisation.modules.system"
]
},
paths: {
"github:*"
:
"jspm_packages/github/*"
"npm:*"
"jspm_packages/npm/*"
map: {
"aurelia-bootstrapper"
"npm:aurelia-bootstrapper@2.0.1"
"aurelia-framework"
"npm:aurelia-framework@1.0.8"
"aurelia-pal-browser"
"npm:aurelia-pal-browser@1.1.0"
"npm:babel-core@5.8.38"
"babel-runtime"
"npm:babel-runtime@5.8.38"
"core-js"
"npm:core-js@1.2.7"
"github:jspm/nodelibs-assert@0.1.0"
: {
"assert"
"npm:assert@1.4.1"
"github:jspm/nodelibs-buffer@0.1.0"
"buffer"
"npm:buffer@3.6.0"
"github:jspm/nodelibs-path@0.1.0"
"path-browserify"
"npm:path-browserify@0.0.0"
"github:jspm/nodelibs-process@0.1.2"
"process"
"npm:process@0.11.9"
"github:jspm/nodelibs-util@0.1.0"
"util"
"npm:util@0.10.3"
"github:jspm/nodelibs-vm@0.1.0"
"vm-browserify"
"npm:vm-browserify@0.0.4"
"npm:aurelia-binding@1.1.1"
"aurelia-logging"
"npm:aurelia-logging@1.2.0"
"aurelia-metadata"
"npm:aurelia-metadata@1.0.3"
"aurelia-pal"
"npm:aurelia-pal@1.2.0"
"aurelia-task-queue"
"npm:aurelia-task-queue@1.1.0"
"aurelia-event-aggregator"
"npm:aurelia-event-aggregator@1.0.1"
"aurelia-history"
"npm:aurelia-history@1.0.0"
"aurelia-history-browser"
"npm:aurelia-history-browser@1.0.0"
"aurelia-loader-default"
"npm:aurelia-loader-default@1.0.0"
"aurelia-logging-console"
"npm:aurelia-logging-console@1.0.0"
"aurelia-polyfills"
"npm:aurelia-polyfills@1.1.1"
"aurelia-router"
"npm:aurelia-router@1.1.1"
"aurelia-templating"
"npm:aurelia-templating@1.2.0"
"aurelia-templating-binding"
"npm:aurelia-templating-binding@1.2.0"
"aurelia-templating-resources"
"npm:aurelia-templating-resources@1.2.0"
"aurelia-templating-router"
"npm:aurelia-templating-router@1.0.1"
"npm:aurelia-dependency-injection@1.3.0"
"aurelia-binding"
"aurelia-dependency-injection"
"aurelia-loader"
"npm:aurelia-loader@1.0.0"
"aurelia-path"
"npm:aurelia-path@1.1.1"
"npm:aurelia-route-recognizer@1.1.0"
"aurelia-route-recognizer"
"base64-js"
"npm:base64-js@0.0.8"
"child_process"
"github:jspm/nodelibs-child_process@0.1.0"
"fs"
"github:jspm/nodelibs-fs@0.1.2"
"ieee754"
"npm:ieee754@1.1.8"
"isarray"
"npm:isarray@1.0.0"
"path"
"systemjs-json"
"github:systemjs/plugin-json@0.1.2"
"npm:inherits@2.0.1"
"vm"
"inherits"
"indexof"
"npm:indexof@0.0.1"
}
});
JSON file contains all the dependencies of Aurelia.
{
"jspm"
"directories"
"baseURL"
"wwwroot"
"dependencies"
"npm:aurelia-bootstrapper@^2.0.1"
"npm:aurelia-framework@^1.0.8"
"npm:aurelia-pal-browser@^1.1.0"
"devDependencies"
"npm:babel-core@^5.8.24"
"npm:babel-runtime@^5.8.24"
"npm:core-js@^1.1.4"
We have created one more staticfile or app.js inside the wwwroot or Webroot. The file given below contains the syntax as "export". It will help to export the entire class details to correspondence app.html as Controller and View name relation in ASP.NET MVC.
export class App
constructor()
this
.Message =
"Aurelia in Asp.Net Core 1.0 !!"
;
Now, we are going to create one more HTML file inside the wwwroot or Webroot. Here, we will bind the app.js methods,functions etc. inside the curly bracket "${}".
<
template
>
div
>${Message}</
</
"Microsoft.NETCore.App"
"version"
"1.0.1"
"type"
"platform"
"Microsoft.AspNetCore.Diagnostics"
"1.0.0"
"Microsoft.AspNetCore.Server.IISIntegration"
"Microsoft.AspNetCore.Server.Kestrel"
"Microsoft.Extensions.Logging.Console"
"Microsoft.AspNetCore.StaticFiles"
"1.1.0"
"tools"
"Microsoft.AspNetCore.Server.IISIntegration.Tools"
"1.0.0-preview2-final"
"frameworks"
"netcoreapp1.0"
"imports"
"dotnet5.6"
"portable-net45+win8"
"buildOptions"
"emitEntryPoint"
"preserveCompilationContext"
"runtimeOptions"
"configProperties"
"System.GC.Server"
"publishOptions"
"include"
"web.config"
"scripts"
"postpublish"
"dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"
The code given below in UseFileServer() will help to call staticfiles in ASP.NET Core 1.0.
using
System;
System.Collections.Generic;
System.Linq;
System.Threading.Tasks;
Microsoft.AspNetCore.Builder;
Microsoft.AspNetCore.Hosting;
Microsoft.AspNetCore.Http;
Microsoft.Extensions.DependencyInjection;
Microsoft.Extensions.Logging;
namespace
AureliaHelloWorld
public
class
Startup
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
void
ConfigureServices(IServiceCollection services)
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
loggerFactory.AddConsole();
if
(env.IsDevelopment())
app.UseDeveloperExceptionPage();
app.UseFileServer();
app.Run(async (context) =>
await context.Response.WriteAsync(
"Hello World!"
);
I think possibly we will get the given error below.
Therefore, we need to install aurelia-pal Browser in our project.
Command
"jspm install npm:aurelia-pal-browser"
We learned how to create an Aurelia single page application in ASP.NET Core 1.0 and I hope you liked this article. Please share your valuable suggestions and feedback.