Create An Aurelia Single Page Application In ASP.NET Core 1.0

Introduction

 

In our previous article, we studied How to configure Aurelia Single Page applications in ASP.NET Core 1.0. 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 applications using th Aurelia framework.

 

Configuring Aurelia in ASP.NET Core 1.0 

 

In our previous article, we mentioned a detailed description about How to configure Aurelia Single Page applications in ASP.NET Core 1.0. 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 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
    {
        // 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

 

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 

• Aurelia Docs 
• jspm Docs
  
• Tech Blog Content
  

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.