Host dashboard in a .net core app

UI.Web.Dashboard/Program.cs

+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Hosting;
+
+namespace UI.Web.Dashboard
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            var host = new WebHostBuilder()
+                .UseKestrel()
+                .UseContentRoot(Directory.GetCurrentDirectory())
+                .UseIISIntegration()
+                .UseStartup<Startup>()
+                .Build();
+
+            host.Run();
+        }
+    }
+}

UI.Web.Dashboard/Startup.cs

+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 UI.Web.Dashboard
+{
+    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 https://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.UseDefaultFiles();
+            app.UseStaticFiles();
+        }
+    }
+}

UI.Web.Dashboard/UI.Web.Dashboard.csproj

+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>netcoreapp1.1</TargetFramework>
+  </PropertyGroup>
+  <ItemGroup>
+    <Folder Include="wwwroot\" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore" Version="1.1.2" />
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />
+  </ItemGroup>
+</Project>
\ No newline at end of file

UI.Web.Dashboard/gulpfile.js

@@ -40,7 +40,7 @@ var requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('src/app/require
 gulp.task('js', function () {
     return rjs(requireJsOptimizerConfig)
         .pipe(uglify({ preserveComments: 'some' }))
-        .pipe(gulp.dest('./dist/'));
+        .pipe(gulp.dest('./wwwroot/'));
 });
 
     // Concatenates CSS files, rewrites relative paths to Bootstrap fonts
@@ -53,14 +53,14 @@ gulp.task('css', function () {
     .pipe(replace(/url\((')?\.\.\/fonts\//g, 'url($1fonts/'));
     var combinedCss = es.concat(appCss).pipe(concat('css.css'));
     return es.concat(combinedCss)
-        .pipe(gulp.dest('./dist/'));
+        .pipe(gulp.dest('./wwwroot/'));
 });
 
 
 // Moves the bootstrap fonts to the dist-folder
 gulp.task('fonts', function(){
    return gulp.src('./node_modules/bootstrap/fonts/*', { base: './node_modules/bootstrap/components-bootstrap/' })
-       .pipe(gulp.dest('./dist/fonts'));
+       .pipe(gulp.dest('./wwwroot/fonts'));
 });
 
 // Copies index.html, replacing <script> and <link> tags to reference production URLs
@@ -70,18 +70,18 @@ gulp.task('html', function() {
             'css': 'css.css?' + Date.now(),
             'js': 'scripts.js?' + Date.now()
         }))
-        .pipe(gulp.dest('./dist/'));
+        .pipe(gulp.dest('./wwwroot/'));
 });
 
 // Removes all files from ./dist/
 gulp.task('clean', function() {
-    return gulp.src('./dist/**/*', { read: false })
+    return gulp.src('./wwwroot/**/*', { read: false })
         .pipe(clean());
 });
 
 gulp.task('default', ['html', 'js', 'css',  'fonts'], function(callback) {
     callback();
-    console.log('\nPlaced optimized files in ' + chalk.magenta('dist/\n'));
+    console.log('\nPlaced optimized files in ' + chalk.magenta('wwwroot/\n'));
 });
 
 // Sets up a webserver with live reload for development

UI.Web.Dashboard/readme.md

-# Installation
+# JS development
 
  1. Install npm https://www.npmjs.com/
  1. Run `npm install`
  1. Run `gulp webserver`
+
+ # Build
+
+ 1. Install .net core https://www.microsoft.com/net/core#windowscmd
+ 1. Install npm https://www.npmjs.com/
+ 1. Run `npm install`
+ 1. Run `gulp`
+ 1. Run `dotnet restore`
+ 1. Run `dotnet run`

UI.Web.Dashboard/src/pages/test/test.html

@@ -7,12 +7,12 @@
 
 <h3>Example data</h3>
 <pre>
-    { "id": "Sensor 1", "isOccupied": true}
-    { "id": "Sensor 2", "isOccupied": true}
-    { "id": "Sensor 1", "isOccupied": true}
-    { "id": "Sensor 2", "isOccupied": true}
-    { "id": "Sensor 1", "isOccupied": true}
-    { "id": "Sensor 1", "isOccupied": false}
-    { "id": "Sensor 3", "isOccupied": false}
-    { "id": "Sensor 3", "isOccupied": true}
+    { "object": { "sensorId": "Sensor 1", "isBusy": true}}
+    { "object": { "sensorId": "Sensor 2", "isBusy": true}}
+    { "object": { "sensorId": "Sensor 1", "isBusy": true}}
+    { "object": { "sensorId": "Sensor 2", "isBusy": true}}
+    { "object": { "sensorId": "Sensor 1", "isBusy": true}}
+    { "object": { "sensorId": "Sensor 1", "isBusy": false}}
+    { "object": { "sensorId": "Sensor 3", "isBusy": false}}}
+    { "object": { "sensorId": "Sensor 3", "isBusy": true}}
 </pre>
\ No newline at end of file

UI.Web.Dashboard/src/services/mqttListener.js

@@ -25,7 +25,7 @@ define(["app/config", "app/events", "mqtt", "lodash", "knockout", "knockout-post
 
             var model = {
                 id: messageBody.object.sensorId,
-                isOccupied: messaegeBody.object.isBusy,
+                isOccupied: messageBody.object.isBusy,
                 timestamp: new Date()
             };
 

UI.Web.Dashboard/wwwroot/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <title>OccupancySensorDashboard</title>
+      <link rel="stylesheet" href="css.css?1499263535088">
+
+    <script src="scripts.js?1499263535088"></script>
+
+  </head>
+  <body>
+    <app params="route: route"></app>
+  </body>
+</html>