Post
Ask Question

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.
  1. System.config({  
  2.   baseURL: "/",  
  3.   defaultJSExtensions: true,  
  4.   transpiler: "babel",  
  5.   babelOptions: {  
  6.     "optional": [  
  7.       "runtime",  
  8.       "optimisation.modules.system"  
  9.     ]  
  10.   },  
  11.   paths: {  
  12.     "github:*": "jspm_packages/github/*",  
  13.     "npm:*": "jspm_packages/npm/*"  
  14.   },  
  15.    
  16.   map: {  
  17.     "aurelia-bootstrapper": "npm:[email protected]",  
  18.     "aurelia-framework": "npm:[email protected]",  
  19.     "aurelia-pal-browser": "npm:[email protected]",  
  20.     "babel": "npm:[email protected]",  
  21.     "babel-runtime": "npm:[email protected]",  
  22.     "core-js": "npm:[email protected]",  
  23.     "github:jspm/[email protected]": {  
  24.       "assert": "npm:[email protected]"  
  25.     },  
  26.     "github:jspm/[email protected]": {  
  27.       "buffer": "npm:[email protected]"  
  28.     },  
  29.     "github:jspm/[email protected]": {  
  30.       "path-browserify": "npm:[email protected]"  
  31.     },  
  32.     "github:jspm/[email protected]": {  
  33.       "process": "npm:[email protected]"  
  34.     },  
  35.     "github:jspm/[email protected]": {  
  36.       "util": "npm:[email protected]"  
  37.     },  
  38.     "github:jspm/[email protected]": {  
  39.       "vm-browserify": "npm:[email protected]"  
  40.     },  
  41.     "npm:[email protected]": {  
  42.       "assert": "github:jspm/[email protected]",  
  43.       "buffer": "github:jspm/[email protected]",  
  44.       "process": "github:jspm/[email protected]",  
  45.       "util": "npm:[email protected]"  
  46.     },  
  47.     "npm:[email protected]": {  
  48.       "aurelia-logging": "npm:[email protected]",  
  49.       "aurelia-metadata": "npm:[email protected]",  
  50.       "aurelia-pal": "npm:[email protected]",  
  51.       "aurelia-task-queue": "npm:[email protected]"  
  52.     },  
  53.     "npm:[email protected]": {  
  54.       "aurelia-event-aggregator": "npm:[email protected]",  
  55.       "aurelia-framework": "npm:[email protected]",  
  56.       "aurelia-history": "npm:[email protected]",  
  57.       "aurelia-history-browser": "npm:[email protected]",  
  58.       "aurelia-loader-default": "npm:[email protected]",  
  59.       "aurelia-logging-console": "npm:[email protected]",  
  60.       "aurelia-pal": "npm:[email protected]",  
  61.       "aurelia-pal-browser": "npm:[email protected]",  
  62.       "aurelia-polyfills": "npm:[email protected]",  
  63.       "aurelia-router": "npm:[email protected]",  
  64.       "aurelia-templating": "npm:[email protected]",  
  65.       "aurelia-templating-binding": "npm:[email protected]",  
  66.       "aurelia-templating-resources": "npm:[email protected]",  
  67.       "aurelia-templating-router": "npm:[email protected]"  
  68.     },  
  69.     "npm:[email protected]": {  
  70.       "aurelia-metadata": "npm:[email protected]",  
  71.       "aurelia-pal": "npm:[email protected]"  
  72.     },  
  73.     "npm:[email protected]": {  
  74.       "aurelia-logging": "npm:[email protected]"  
  75.     },  
  76.     "npm:[email protected]": {  
  77.       "aurelia-binding": "npm:[email protected]",  
  78.       "aurelia-dependency-injection": "npm:[email protected]",  
  79.       "aurelia-loader": "npm:[email protected]",  
  80.       "aurelia-logging": "npm:[email protected]",  
  81.       "aurelia-metadata": "npm:[email protected]",  
  82.       "aurelia-pal": "npm:[email protected]",  
  83.       "aurelia-path": "npm:[email protected]",  
  84.       "aurelia-task-queue": "npm:[email protected]",  
  85.       "aurelia-templating": "npm:[email protected]"  
  86.     },  
  87.     "npm:[email protected]": {  
  88.       "aurelia-history": "npm:[email protected]",  
  89.       "aurelia-pal": "npm:[email protected]"  
  90.     },  
  91.     "npm:[email protected]": {  
  92.       "aurelia-loader": "npm:[email protected]",  
  93.       "aurelia-metadata": "npm:[email protected]",  
  94.       "aurelia-pal": "npm:[email protected]"  
  95.     },  
  96.     "npm:[email protected]": {  
  97.       "aurelia-metadata": "npm:[email protected]",  
  98.       "aurelia-path": "npm:[email protected]"  
  99.     },  
  100.     "npm:[email protected]": {  
  101.       "aurelia-logging": "npm:[email protected]"  
  102.     },  
  103.     "npm:[email protected]": {  
  104.       "aurelia-pal": "npm:[email protected]"  
  105.     },  
  106.     "npm:[email protected]": {  
  107.       "aurelia-pal": "npm:[email protected]"  
  108.     },  
  109.     "npm:[email protected]": {  
  110.       "aurelia-pal": "npm:[email protected]"  
  111.     },  
  112.     "npm:[email protected]": {  
  113.       "aurelia-path": "npm:[email protected]"  
  114.     },  
  115.     "npm:[email protected]": {  
  116.       "aurelia-dependency-injection": "npm:[email protected]",  
  117.       "aurelia-event-aggregator": "npm:[email protected]",  
  118.       "aurelia-history": "npm:[email protected]",  
  119.       "aurelia-logging": "npm:[email protected]",  
  120.       "aurelia-path": "npm:[email protected]",  
  121.       "aurelia-route-recognizer": "npm:[email protected]"  
  122.     },  
  123.     "npm:[email protected]": {  
  124.       "aurelia-pal": "npm:[email protected]"  
  125.     },  
  126.     "npm:[email protected]": {  
  127.       "aurelia-binding": "npm:[email protected]",  
  128.       "aurelia-logging": "npm:[email protected]",  
  129.       "aurelia-templating": "npm:[email protected]"  
  130.     },  
  131.     "npm:[email protected]": {  
  132.       "aurelia-binding": "npm:[email protected]",  
  133.       "aurelia-dependency-injection": "npm:[email protected]",  
  134.       "aurelia-loader": "npm:[email protected]",  
  135.       "aurelia-logging": "npm:[email protected]",  
  136.       "aurelia-metadata": "npm:[email protected]",  
  137.       "aurelia-pal": "npm:[email protected]",  
  138.       "aurelia-path": "npm:[email protected]",  
  139.       "aurelia-task-queue": "npm:[email protected]",  
  140.       "aurelia-templating": "npm:[email protected]"  
  141.     },  
  142.     "npm:[email protected]": {  
  143.       "aurelia-binding": "npm:[email protected]",  
  144.       "aurelia-dependency-injection": "npm:[email protected]",  
  145.       "aurelia-logging": "npm:[email protected]",  
  146.       "aurelia-metadata": "npm:[email protected]",  
  147.       "aurelia-pal": "npm:[email protected]",  
  148.       "aurelia-path": "npm:[email protected]",  
  149.       "aurelia-router": "npm:[email protected]",  
  150.       "aurelia-templating": "npm:[email protected]"  
  151.     },  
  152.     "npm:[email protected]": {  
  153.       "aurelia-binding": "npm:[email protected]",  
  154.       "aurelia-dependency-injection": "npm:[email protected]",  
  155.       "aurelia-loader": "npm:[email protected]",  
  156.       "aurelia-logging": "npm:[email protected]",  
  157.       "aurelia-metadata": "npm:[email protected]",  
  158.       "aurelia-pal": "npm:[email protected]",  
  159.       "aurelia-path": "npm:[email protected]",  
  160.       "aurelia-task-queue": "npm:[email protected]"  
  161.     },  
  162.     "npm:[email protected]": {  
  163.       "process": "github:jspm/[email protected]"  
  164.     },  
  165.     "npm:[email protected]": {  
  166.       "base64-js": "npm:[email protected]",  
  167.       "child_process": "github:jspm/[email protected]",  
  168.       "fs": "github:jspm/[email protected]",  
  169.       "ieee754": "npm:[email protected]",  
  170.       "isarray": "npm:[email protected]",  
  171.       "process": "github:jspm/[email protected]"  
  172.     },  
  173.     "npm:[email protected]": {  
  174.       "fs": "github:jspm/[email protected]",  
  175.       "path": "github:jspm/[email protected]",  
  176.       "process": "github:jspm/[email protected]",  
  177.       "systemjs-json": "github:systemjs/[email protected]"  
  178.     },  
  179.     "npm:[email protected]": {  
  180.       "util": "github:jspm/[email protected]"  
  181.     },  
  182.     "npm:[email protected]": {  
  183.       "process": "github:jspm/[email protected]"  
  184.     },  
  185.     "npm:[email protected]": {  
  186.       "assert": "github:jspm/[email protected]",  
  187.       "fs": "github:jspm/[email protected]",  
  188.       "vm": "github:jspm/[email protected]"  
  189.     },  
  190.     "npm:[email protected]": {  
  191.       "inherits": "npm:[email protected]",  
  192.       "process": "github:jspm/[email protected]"  
  193.     },  
  194.     "npm:[email protected]": {  
  195.       "indexof": "npm:[email protected]"  
  196.     }  
  197.   }  
  198. });  
package.json 
 
JSON file contains all the dependencies of Aurelia.
  1. {  
  2.   "jspm": {  
  3.     "directories": {  
  4.       "baseURL": "wwwroot"  
  5.     },  
  6.     "dependencies": {  
  7.       "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^2.0.1",  
  8.       "aurelia-framework": "npm:aurelia-framework@^1.0.8",  
  9.       "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.1.0"  
  10.     },  
  11.     "devDependencies": {  
  12.       "babel": "npm:babel-core@^5.8.24",  
  13.       "babel-runtime": "npm:babel-runtime@^5.8.24",  
  14.       "core-js": "npm:core-js@^1.1.4"  
  15.     }  
  16.   }  
  17. }  
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. 
  1. export class App  
  2. {  
  3.     constructor()  
  4.     {  
  5.         this.Message = "Aurelia in Asp.Net Core 1.0 !!";  
  6.     }  
  7. }  
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 "${}". 
  1. <template>  
  2. <div>${Message}</div>  
  3. </template>  
Project.json
 
When we want to call Staticfiles in ASP.NET Core 1.0, we need to add Staticfiles dependency in project.json.
  1. {  
  2.   "dependencies": {  
  3.     "Microsoft.NETCore.App": {  
  4.       "version": "1.0.1",  
  5.       "type": "platform"  
  6.     },  
  7.     "Microsoft.AspNetCore.Diagnostics": "1.0.0",  
  8.     "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",  
  9.     "Microsoft.AspNetCore.Server.Kestrel": "1.0.1",  
  10.     "Microsoft.Extensions.Logging.Console": "1.0.0",  
  11.     "Microsoft.AspNetCore.StaticFiles": "1.1.0"  
  12.   },  
  13.    
  14.   "tools": {  
  15.     "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"  
  16.   },  
  17.    
  18.   "frameworks": {  
  19.     "netcoreapp1.0": {  
  20.       "imports": [  
  21.         "dotnet5.6",  
  22.         "portable-net45+win8"  
  23.       ]  
  24.     }  
  25.   },  
  26.    
  27.   "buildOptions": {  
  28.     "emitEntryPoint": true,  
  29.     "preserveCompilationContext": true  
  30.   },  
  31.    
  32.   "runtimeOptions": {  
  33.     "configProperties": {  
  34.       "System.GC.Server": true  
  35.     }  
  36.   },  
  37.    
  38.   "publishOptions": {  
  39.     "include": [  
  40.       "wwwroot",  
  41.       "web.config"  
  42.     ]  
  43.   },  
  44.    
  45.   "scripts": {  
  46.     "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]  
  47.   }  
  48. }  
Configuration in Startup.cs Class
 
The code given below in UseFileServer() will help to call staticfiles in ASP.NET Core 1.0. 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. using Microsoft.AspNetCore.Builder;  
  6. using Microsoft.AspNetCore.Hosting;  
  7. using Microsoft.AspNetCore.Http;  
  8. using Microsoft.Extensions.DependencyInjection;  
  9. using Microsoft.Extensions.Logging;  
  10.    
  11. namespace AureliaHelloWorld  
  12. {  
  13.     public class Startup  
  14.     {  
  15.         // This method gets called by the runtime. Use this method to add services to the container.  
  16.         // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940  
  17.         public void ConfigureServices(IServiceCollection services)  
  18.         {  
  19.         }  
  20.    
  21.         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  
  22.         public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)  
  23.         {  
  24.             loggerFactory.AddConsole();  
  25.    
  26.             if (env.IsDevelopment())  
  27.             {  
  28.                 app.UseDeveloperExceptionPage();  
  29.             }  
  30.    
  31.             app.UseFileServer();  
  32.    
  33.             app.Run(async (context) =>  
  34.             {  
  35.                 await context.Response.WriteAsync("Hello World!");  
  36.             });  
  37.         }  
  38.     }  
  39. }  
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.


Similar Articles