ASP.NET Core 1.0: Create An Aurelia Single Page Application
Introduction
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.
Aurelia
Aurelia is a JavaScript client framework for mobile, desktop, web and we can create a single page application using the Aurelia framework.
Configuring Aurelia in ASP.NET Core 1.0
In our previous article, we mentioned a detailed description of 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.
- Download and install: Node.js
- Download and install: Git - Downloads
- Install jspm [ Command: "npm install -g jspm" ].
- jspm Initialization [ Command: "jspm init" ].
- Install Aurelia framework in ASP.NET Core 1.0 [ Command: "jspm install aurelia-framework" ].
- Install Aurelia bootstrapper in ASP.NET Core 1.0 [ Command: "jspm install aurelia-bootstrapper" ].
Project Structure
Click "show all files icon" in Solution Explorer. You can see the jspm_packages reference and config.js inside the wwwroot.
Aurelia Reference in index.html page
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 by default. Don't worry. We can mention other pages also but we need to do some customization in the code.
Index.html
The code given below contains the reference to "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.
config.js
JSON file contains all the details about Aurelia configuration.
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",
"babel": "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:assert@1.4.1": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"util": "npm:util@0.10.3"
},
"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"
},
"npm:aurelia-bootstrapper@2.0.1": {
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1",
"aurelia-framework": "npm:aurelia-framework@1.0.8",
"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-pal": "npm:aurelia-pal@1.2.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser@1.1.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-metadata": "npm:aurelia-metadata@1.0.3",
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-event-aggregator@1.0.1": {
"aurelia-logging": "npm:aurelia-logging@1.2.0"
},
"npm:aurelia-framework@1.0.8": {
"aurelia-binding": "npm:aurelia-binding@1.1.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0",
"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-path": "npm:aurelia-path@1.1.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.1.0",
"aurelia-templating": "npm:aurelia-templating@1.2.0"
},
"npm:aurelia-history-browser@1.0.0": {
"aurelia-history": "npm:aurelia-history@1.0.0",
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-loader-default@1.0.0": {
"aurelia-loader": "npm:aurelia-loader@1.0.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.3",
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-loader@1.0.0": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.3",
"aurelia-path": "npm:aurelia-path@1.1.1"
},
"npm:aurelia-logging-console@1.0.0": {
"aurelia-logging": "npm:aurelia-logging@1.2.0"
},
"npm:aurelia-metadata@1.0.3": {
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-pal-browser@1.1.0": {
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-polyfills@1.1.1": {
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-route-recognizer@1.1.0": {
"aurelia-path": "npm:aurelia-path@1.1.1"
},
"npm:aurelia-router@1.1.1": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.1",
"aurelia-history": "npm:aurelia-history@1.0.0",
"aurelia-logging": "npm:aurelia-logging@1.2.0",
"aurelia-path": "npm:aurelia-path@1.1.1",
"aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.1.0"
},
"npm:aurelia-task-queue@1.1.0": {
"aurelia-pal": "npm:aurelia-pal@1.2.0"
},
"npm:aurelia-templating-binding@1.2.0": {
"aurelia-binding": "npm:aurelia-binding@1.1.1",
"aurelia-logging": "npm:aurelia-logging@1.2.0",
"aurelia-templating": "npm:aurelia-templating@1.2.0"
},
"npm:aurelia-templating-resources@1.2.0": {
"aurelia-binding": "npm:aurelia-binding@1.1.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0",
"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-path": "npm:aurelia-path@1.1.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.1.0",
"aurelia-templating": "npm:aurelia-templating@1.2.0"
},
"npm:aurelia-templating-router@1.0.1": {
"aurelia-binding": "npm:aurelia-binding@1.1.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
"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-path": "npm:aurelia-path@1.1.1",
"aurelia-router": "npm:aurelia-router@1.1.1",
"aurelia-templating": "npm:aurelia-templating@1.2.0"
},
"npm:aurelia-templating@1.2.0": {
"aurelia-binding": "npm:aurelia-binding@1.1.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.3.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0",
"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-path": "npm:aurelia-path@1.1.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.1.0"
},
"npm:babel-runtime@5.8.38": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:buffer@3.6.0": {
"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",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:core-js@1.2.7": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.2"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:process@0.11.9": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"vm": "github:jspm/nodelibs-vm@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:vm-browserify@0.0.4": {
"indexof": "npm:indexof@0.0.1"
}
}
});
package.json
JSON file contains all the dependencies of Aurelia.
{
"jspm": {
"directories": {
"baseURL": "wwwroot"
},
"dependencies": {
"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"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
}
}
}
app.js
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 !!";
}
}
app.html
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}</div>
</template>
Project.json
When we want to call Staticfiles in ASP.NET Core 1.0, we need to add Staticfiles dependency in project.json.
{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.1",
"type": "platform"
},
"Microsoft.AspNetCore.Diagnostics": "1.0.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"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": true,
"preserveCompilationContext": true
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"publishOptions": {
"include": [
"wwwroot",
"web.config"
]
},
"scripts": {
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}
Configuration in Startup.cs Class
The code given below in UseFileServer() will help to call staticfiles in ASP.NET Core 1.0.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using 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
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void 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!");
});
}
}
}
Possible Error
We 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"
Output
Finally, we got it.
Conclusion
We learned how to create an Aurelia single page application in ASP.NET Core 1.0 and we hope you liked this article. Please share your valuable suggestions and feedback.
References
- Aurelia - Docs
- jspm - Docs
- You can read this article in RajeeshMenoth Blog
- Download Source Code