Post
Ask Question

Configuring Aurelia Single Page Applications In ASP.NET Core 1.0

Introduction
 
We all are familiar with SPA or Single Page Applications like Angular 2 in development. Aurelia is another famous Single Page Application development technique in the market similar to Angular 2 but syntactically different. Now, we are going to configure Aurelia Single Page Applications in ASP.NET Core 1.0.
 
Before reading this article, you must read the articles given below for ASP.NET Core knowledge.
Configuring Aurelia SPA in ASP.NET Core 1.0
 
The following steps need to be followed to configure Aurelia Single Page Applications in ASP.NET Core 1.0.
 
Install Node.js
 
Node.js is very powerful JavaScript-based framework built on Chrome’s V8 JavaScript Engine. Node.js’ package ecosystem and npm are the largest ecosystems of open source libraries in the world.
 
Download and install Node.js on your machine - Node.js
 
 
After completing the installation, we can check the current running version of Node.js in our machine through command prompt.
 
Command for Version Checking  - "node -v"
 
 
Install Git
 
Download and install appropriate Git on your machine from Git - Downloads
 
Install jspm
 
jspm or JavaScript Package Manager is a package manager for the SystemJS universal module loader and it is built on top of the dynamic ES6 module loader.
 
jspm installation command - "npm install -g jspm"
 
 
After installing, we can check the current running version of jspm on our machine through command prompt, using the following command.
 
"jspm -v"
 
 
Setting Project Location
 
The following command will help to change our current "C Drive" to "F Drive" because currently our Aurelia project is saved into "F Drive".
 
 
jspm Initialization
 
Now, we are going to install jspm in our ASP.NET Core 1.0 application.
 
"jspm init"
 
During the jspm initialization, it will ask a few questions. We have to enter three values in the following questions.
 
      1.Enter server baseURL (public folder path) [./]  

wwwroot ( I have saved all jspm references into Webroot or wwwroot but you can choose any folder ).
 
      2. Do you wish to use a transpiler?[yes]:

yes ( Transpiler is similar to Compiler. It converts ES2015 to ES5 ).
 
      3. Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur ? [traceur] :

Babel ( You can choose either Babel or TypeScript ).
 
 
Install Aurelia Framework in ASP.NET Core 1.0
 
The following command will help to install Aurelia framework in ASP.NET Core 1.0.
 
 "jspm install aurelia-framework"
 
 
Install Aurelia bootstrapper in ASP.NET Core 1.0
 
The following command will help to install Aurelia bootstrapper in ASP.NET Core 1.0.
 
"jspm install aurelia-bootstrapper"
 
 
Project Structure
 
Click "show all files icon" in Solution Explorer. Then, you can see the jspm_packages reference and config.js inside the wwwroot.
 
 
config.js
 
The following 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
 
The following 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. }  
Reference
Conclusion
 
We learned how to configure Aurelia Single Page Applications in ASP.NET Core 1.0. I hope, you liked this article. Please share your valuable suggestions and feedback.


Similar Articles