Add AureliaSpa template

templates/AureliaSpa/Aurelia.xproj

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
+    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
+    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+  </PropertyGroup>
+  <Import Project="$(VSToolsPath)\DotNet\Microsoft.DotNet.Props" Condition="'$(VSToolsPath)' != ''" />
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>33d8dad9-74f9-471d-8bad-55f828faa736</ProjectGuid>
+    <RootNamespace>Aurelia</RootNamespace>
+    <TargetFrameworkVersion>v4.5.2</TargetFrameworkVersion>
+  </PropertyGroup>
+  <PropertyGroup>
+    <SchemaVersion>2.0</SchemaVersion>
+  </PropertyGroup>
+  <Import Project="$(VSToolsPath)\DotNet.Web\Microsoft.DotNet.Web.targets" Condition="'$(VSToolsPath)' != ''" />
+</Project>

templates/AureliaSpa/ClientApp/app/components/app/app.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

templates/AureliaSpa/ClientApp/app/components/app/app.html

@@ -0,0 +1,14 @@
+<template>
+    <require from="../navmenu/navmenu.html"></require>
+    <require from="./app.css"></require>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-3">
+                <navmenu router.bind="router"></navmenu>
+            </div>
+            <div class="col-sm-9 body-content">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>

templates/AureliaSpa/ClientApp/app/components/app/app.ts

@@ -0,0 +1,17 @@
+import { Aurelia } from 'aurelia-framework';
+import { Router, RouterConfiguration } from 'aurelia-router';
+
+export class App {
+    router: Router;
+
+    configureRouter(config: RouterConfiguration, router: Router) {
+        config.title = 'Aurelia';
+        config.map([
+            { route: ['', 'home'], name: 'home',      settings: {icon: 'home'},      moduleId: '../home/home',           nav: true, title: 'Home' },
+            { route: 'counter',    name: 'counter',   settings: {icon: 'education'}, moduleId: '../counter/counter',     nav: true, title: 'Counter' },
+            { route: 'fetch-data', name: 'fetchdata', settings: {icon: 'th-list'},   moduleId: '../fetchdata/fetchdata', nav: true, title: 'Fetch data' }
+        ]);
+        this.router = router;
+    }
+}
+

templates/AureliaSpa/ClientApp/app/components/counter/counter.html

@@ -0,0 +1,9 @@
+<template>
+    <h2>Counter</h2>
+
+    <p>This is a simple example of an Aurelia component.</p>
+
+    <p>Current count: <strong>${currentCount}</strong></p>
+
+    <button click.delegate="incrementCounter()">Increment</button>
+</template>

templates/AureliaSpa/ClientApp/app/components/counter/counter.ts

@@ -0,0 +1,7 @@
+export class Counter {
+    public currentCount = 0;
+
+    public incrementCounter() {
+        this.currentCount++;
+    }    
+}

templates/AureliaSpa/ClientApp/app/components/fetchdata/fetchdata.html

@@ -0,0 +1,26 @@
+<template>
+    <h1>Weather forecast</h1>
+
+    <p>This component demonstrates fetching data from the server.</p>
+
+    <p if.bind="!forecasts"><em>Loading...</em></p>
+
+    <table if.bind="forecasts" class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr repeat.for="forecast of forecasts">
+                <td>${ forecast.dateFormatted }</td>
+                <td>${ forecast.temperatureC }</td>
+                <td>${ forecast.temperatureF }</td>
+                <td>${ forecast.summary }</td>
+            </tr>
+        </tbody>
+    </table>
+</template>

templates/AureliaSpa/ClientApp/app/components/fetchdata/fetchdata.ts

@@ -0,0 +1,25 @@
+/// <reference path="../../../../node_modules/aurelia-fetch-client/doc/whatwg-fetch.d.ts" />
+/// <reference path="../../../../node_modules/aurelia-fetch-client/doc/url.d.ts" />
+import { HttpClient } from 'aurelia-fetch-client';
+import { inject } from 'aurelia-framework';
+
+@inject(HttpClient)
+export class Fetchdata {
+    public forecasts: WeatherForecast[];
+    http: HttpClient;
+
+    constructor(http: HttpClient) {
+        http.fetch('/api/SampleData/WeatherForecasts')
+            .then(result => result.json())
+            .then(data => {
+            this.forecasts = data;
+        });
+    }   
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}

templates/AureliaSpa/ClientApp/app/components/home/home.html

@@ -0,0 +1,16 @@
+<template>
+    <h1>Hello, world!</h1>
+    <p>Welcome to your new single-page application, built with:</p>
+    <ul>
+        <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
+        <li><a href="https://aurelia.io/">Aurelia</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
+        <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
+        <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
+    </ul>
+    <p>To help you get started, we've also set up:</p>
+    <ul>
+        <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+        <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+        <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+    </ul>
+</template>

templates/AureliaSpa/ClientApp/app/components/home/home.ts

@@ -0,0 +1,2 @@
+export class Home {
+}

templates/AureliaSpa/ClientApp/app/components/navmenu/navmenu.css

@@ -0,0 +1,59 @@
+li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+li.au-target.link-active a,
+li.au-target.link-active a:hover,
+li.au-target.link-active a:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        height: 100%;
+        width: calc(25% - 20px);
+    }
+    .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .navbar-header {
+        float: none;
+    }
+    .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .navbar ul {
+        float: none;
+    }
+    .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

templates/AureliaSpa/ClientApp/app/components/navmenu/navmenu.html

@@ -0,0 +1,26 @@
+<template bindable="router">
+    <require from="./navmenu.css"></require>
+    <div class="main-nav">
+        <div class="navbar navbar-inverse">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#/home">Aurelia</a>
+            </div>
+            <div class="clearfix"></div>
+            <div class="navbar-collapse collapse">
+                <ul class="nav navbar-nav">
+                    <li repeat.for = "row of router.navigation" class="${ row.isActive ? 'link-active' : '' }" >
+                        <a href.bind = "row.href">
+                            <span class="glyphicon glyphicon-${ row.settings.icon }"></span> ${ row.title }
+                        </a>
+                    </li>        
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>

templates/AureliaSpa/ClientApp/boot.ts

@@ -0,0 +1,11 @@
+import { Aurelia } from 'aurelia-framework';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap';
+
+export function configure(aurelia: Aurelia) {
+    aurelia.use.standardConfiguration();  
+    if (window.location.host.includes('localhost')) {
+        aurelia.use.developmentLogging();
+    }
+    aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
+}

templates/AureliaSpa/Controllers/HomeController.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        public IActionResult Error()
+        {
+            return View();
+        }
+    }
+}

templates/AureliaSpa/Controllers/SampleDataController.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    [Route("api/[controller]")]
+    public class SampleDataController : Controller
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        [HttpGet("[action]")]
+        public IEnumerable<WeatherForecast> WeatherForecasts()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            });
+        }
+
+        public class WeatherForecast
+        {
+            public string DateFormatted { get; set; }
+            public int TemperatureC { get; set; }
+            public string Summary { get; set; }
+
+            public int TemperatureF
+            {
+                get
+                {
+                    return 32 + (int)(this.TemperatureC / 0.5556);
+                }
+            }
+        }
+    }
+}

templates/AureliaSpa/Dockerfile

@@ -0,0 +1,17 @@
+FROM microsoft/dotnet:1.0.0-preview2-onbuild
+
+RUN apt-get update
+RUN wget -qO- https://deb.nodesource.com/setup_4.x | bash -
+RUN apt-get install -y build-essential nodejs
+
+WORKDIR /app
+
+COPY project.json .
+RUN ["dotnet", "restore"]
+
+COPY . /app
+RUN ["dotnet", "build"]
+
+EXPOSE 5000/tcp
+
+ENTRYPOINT ["dotnet", "run", "--server.urls", "http://0.0.0.0:5000"]

templates/AureliaSpa/Program.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+
+namespace WebApplicationBasic
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            var config = new ConfigurationBuilder()
+                .AddCommandLine(args)
+                .AddEnvironmentVariables(prefix: "ASPNETCORE_")
+                .Build();
+
+            var host = new WebHostBuilder()
+                .UseConfiguration(config)
+                .UseKestrel()
+                .UseContentRoot(Directory.GetCurrentDirectory())
+                .UseIISIntegration()
+                .UseStartup<Startup>()
+                .Build();
+
+            host.Run();
+        }
+    }
+}