Aurelia is a JavaScript client framework for mobile, desktop, Web and we can create a single page applications using th Aurelia framework.
- 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 in 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 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.
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:[email protected]",
- "aurelia-framework": "npm:[email protected]",
- "aurelia-pal-browser": "npm:[email protected]",
- "babel": "npm:[email protected]",
- "babel-runtime": "npm:[email protected]",
- "core-js": "npm:[email protected]",
- "github:jspm/[email protected]": {
- "assert": "npm:[email protected]"
- },
- "github:jspm/[email protected]": {
- "buffer": "npm:[email protected]"
- },
- "github:jspm/[email protected]": {
- "path-browserify": "npm:[email protected]"
- },
- "github:jspm/[email protected]": {
- "process": "npm:[email protected]"
- },
- "github:jspm/[email protected]": {
- "util": "npm:[email protected]"
- },
- "github:jspm/[email protected]": {
- "vm-browserify": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "assert": "github:jspm/[email protected]",
- "buffer": "github:jspm/[email protected]",
- "process": "github:jspm/[email protected]",
- "util": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-logging": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-task-queue": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-event-aggregator": "npm:[email protected]",
- "aurelia-framework": "npm:[email protected]",
- "aurelia-history": "npm:[email protected]",
- "aurelia-history-browser": "npm:[email protected]",
- "aurelia-loader-default": "npm:[email protected]",
- "aurelia-logging-console": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-pal-browser": "npm:[email protected]",
- "aurelia-polyfills": "npm:[email protected]",
- "aurelia-router": "npm:[email protected]",
- "aurelia-templating": "npm:[email protected]",
- "aurelia-templating-binding": "npm:[email protected]",
- "aurelia-templating-resources": "npm:[email protected]",
- "aurelia-templating-router": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-logging": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-binding": "npm:[email protected]",
- "aurelia-dependency-injection": "npm:[email protected]",
- "aurelia-loader": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]",
- "aurelia-task-queue": "npm:[email protected]",
- "aurelia-templating": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-history": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-loader": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-logging": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-path": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-dependency-injection": "npm:[email protected]",
- "aurelia-event-aggregator": "npm:[email protected]",
- "aurelia-history": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]",
- "aurelia-route-recognizer": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-pal": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-binding": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-templating": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-binding": "npm:[email protected]",
- "aurelia-dependency-injection": "npm:[email protected]",
- "aurelia-loader": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]",
- "aurelia-task-queue": "npm:[email protected]",
- "aurelia-templating": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-binding": "npm:[email protected]",
- "aurelia-dependency-injection": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]",
- "aurelia-router": "npm:[email protected]",
- "aurelia-templating": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "aurelia-binding": "npm:[email protected]",
- "aurelia-dependency-injection": "npm:[email protected]",
- "aurelia-loader": "npm:[email protected]",
- "aurelia-logging": "npm:[email protected]",
- "aurelia-metadata": "npm:[email protected]",
- "aurelia-pal": "npm:[email protected]",
- "aurelia-path": "npm:[email protected]",
- "aurelia-task-queue": "npm:[email protected]"
- },
- "npm:[email protected]": {
- "process": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "base64-js": "npm:[email protected]",
- "child_process": "github:jspm/[email protected]",
- "fs": "github:jspm/[email protected]",
- "ieee754": "npm:[email protected]",
- "isarray": "npm:[email protected]",
- "process": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "fs": "github:jspm/[email protected]",
- "path": "github:jspm/[email protected]",
- "process": "github:jspm/[email protected]",
- "systemjs-json": "github:systemjs/[email protected]"
- },
- "npm:[email protected]": {
- "util": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "process": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "assert": "github:jspm/[email protected]",
- "fs": "github:jspm/[email protected]",
- "vm": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "inherits": "npm:[email protected]",
- "process": "github:jspm/[email protected]"
- },
- "npm:[email protected]": {
- "indexof": "npm:[email protected]"
- }
- }
- });
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
- {
-
-
- public void ConfigureServices(IServiceCollection services)
- {
- }
-
-
- 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
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"
Output
Finally, we got it.
References
Conclusion
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.