.NET Core 3.0

AspNetCoreVueStarter.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp2.2</TargetFramework>
+    <TargetFramework>netcoreapp3.0</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
@@ -19,9 +19,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.App" />
-    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.2.0" />
-    <PackageReference Include="VueCliMiddleware" Version="2.2.1" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.0" />
+    <PackageReference Include="VueCliMiddleware" Version="3.0.0" />
   </ItemGroup>
 
   <ItemGroup>

ClientApp/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "date-fns": "^2.2.1",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",

ClientApp/src/filters/date.filter.ts

@@ -0,0 +1,5 @@
+import { format } from 'date-fns';
+
+export default (date: Date) => {
+  return format(new Date(date), 'eeee, dd MMMM');
+};

ClientApp/src/main.ts

@@ -6,9 +6,12 @@ import App from './App.vue';
 import router from './router';
 import store from '@/store/index';
 import './registerServiceWorker';
+import dateFilter from '@/filters/date.filter';
 
 Vue.config.productionTip = false;
 
+Vue.filter('date', dateFilter);
+
 new Vue({
   vuetify,
   router,

ClientApp/src/models/Forecast.ts

@@ -1,6 +1,6 @@
 export class Forecast {
   constructor(
-    public dateFormatted: Date,
+    public date: Date,
     public temperatureC: number,
     public temperatureF: number,
     public summary: string,

ClientApp/src/views/FetchData.vue

@@ -14,11 +14,11 @@
             class="elevation-1"
           >
             <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
-            <template v-slot:items="props">
-              <td>{{ props.item.dateFormatted }}</td>
-              <td>{{ props.item.temperatureC }}</td>
-              <td>{{ props.item.temperatureF }}</td>
-              <td>{{ props.item.summary }}</td>
+            <template v-slot:item.date="{ item }">
+              <td>{{ item.date | date }}</td>
+            </template>
+            <template v-slot:item.temperatureC="{ item }">
+              <v-chip :color="getColor(item.temperatureC)" dark>{{ item.temperatureC }}</v-chip>
             </template>
           </v-data-table>
         </v-col>
@@ -56,27 +56,34 @@ export default class FetchDataView extends Vue {
   private errorMessage: string = 'Error while loading weather forecast.';
   private forecasts: Forecast[] = [];
   private headers = [
-    { text: 'Date', value: 'dateFormatted' },
+    { text: 'Date', value: 'date' },
     { text: 'Temp. (C)', value: 'temperatureC' },
     { text: 'Temp. (F)', value: 'temperatureF' },
     { text: 'Summary', value: 'summary' },
   ];
 
-  private created() {
-    this.fetchWeatherForecasts();
+  private getColor(temperature: number) {
+    if (temperature < 0) {
+      return 'blue';
+    } else if (temperature >= 0 && temperature < 30) {
+      return 'green';
+    } else {
+      return 'red';
+    }
+  }
+  private async created() {
+    await this.fetchWeatherForecasts();
   }
 
-  private fetchWeatherForecasts() {
-    axios
-      .get<Forecast[]>('api/SampleData/WeatherForecasts')
-      .then((response) => {
-        this.forecasts = response.data;
-      })
-      .catch((e) => {
-        this.showError = true;
-        this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
-      })
-      .finally(() => (this.loading = false));
+  private async fetchWeatherForecasts() {
+    try {
+      const response = await axios.get<Forecast[]>('api/WeatherForecast');
+      this.forecasts = response.data;
+    } catch (e) {
+      this.showError = true;
+      this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
+    }
+    this.loading = false;
   }
 }
 </script>

Controllers/WeatherForecastController.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using AspNetCoreVueStarter.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging;
+
+namespace AspNetCoreVueStarter.Controllers
+{
+    [Route("api/[controller]")]
+    [ApiController]
+    public class WeatherForecastController : ControllerBase
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        private readonly ILogger<WeatherForecastController> _logger;
+
+        public WeatherForecastController(ILogger<WeatherForecastController> logger)
+        {
+            _logger = logger;
+        }
+
+        [HttpGet]
+        public IEnumerable<WeatherForecast> Get()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = DateTime.Now.AddDays(index),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            })
+            .ToArray();
+        }
+    }
+}

Models/WeatherForecast.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AspNetCoreVueStarter.Models
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string Summary { get; set; }
+    }
+}

Program.cs

@@ -1,12 +1,5 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore;
 using Microsoft.AspNetCore.Hosting;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Hosting;
 
 namespace AspNetCoreVueStarter
 {
@@ -17,8 +10,15 @@ public static void Main(string[] args)
             CreateWebHostBuilder(args).Build().Run();
         }
 
-        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
-            WebHost.CreateDefaultBuilder(args)
-                .UseStartup<Startup>();
+        public static IHostBuilder CreateWebHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+             .ConfigureWebHostDefaults(webBuilder =>
+             {
+                 webBuilder.ConfigureKestrel(serverOptions =>
+                 {
+                     // Set properties and call methods on options
+                 })
+                 .UseStartup<Startup>();
+             });
     }
 }

README.md

@@ -4,6 +4,10 @@ The repository contains an ASP.​NET Core + Vue.js starter template. The te
 
 Original article how to create the starter template is available [here](https://medium.com/software-ateliers/asp-net-core-vue-template-with-custom-configuration-using-cli-3-0-8288e18ae80b).
 
+[![Nuget](https://img.shields.io/nuget/v/SoftwareAteliers.AspNetCoreVueStarter.svg?style=flat&color=2196f3)](https://www.nuget.org/packages/aspnetcore-vuejs/)
+
+> For ASP.NET Core 2.2 template use [release v1.1.0](https://github.com/SoftwareAteliers/asp-net-core-vue-starter/releases/tag/1.1.0)
+
 ---
 
 ## Table of Contents
@@ -23,10 +27,10 @@ Original article how to create the starter template is available [here](https://
 
 ## Used Technology Stack
 
-**ASP.NET Core 2.2:**
+**ASP.NET Core 3.0:**
 
 * Web.API
-* JavaScript Services middleware to integrate with client app
+* Vue CLI and JavaScript Services middlewares to integrate with client app
 
 **Vue.js with CLI 3.0 supporting optional integrations:**
 
@@ -41,7 +45,7 @@ Original article how to create the starter template is available [here](https://
 
 ## Prerequisites
 
-* [.NET Core](https://www.microsoft.com/net/download/windows)
+* [.NET Core](https://www.microsoft.com/net/download/windows) >= 3.0
 * [NodeJS](https://nodejs.org/) >= 8.9
 * [Vue CLI](https://cli.vuejs.org/) >= 3.0
 * Your favourite editor (I prefer [VS Code](https://code.visualstudio.com/)), or VS 2017/19
@@ -62,7 +66,7 @@ or you can use .NET Core CLI templates:
 
 * Initialize the project: `dotnet new vue -o MyProject`
 
-## Scaffold Vue.js app with custom configuration
+## (Optional) Scaffold Vue.js app with custom configuration
 
 If you prefer to overwrite default Vue client app with custom settings, take the following steps:
 
@@ -93,6 +97,8 @@ You have two choices when it comes to how you prefer to run the app. You can eit
 
 Browse to [http://localhost:5000](http://localhost:5000) for ASP.​NET Core + Vue app or browse to [http://localhost:8080](http://localhost:8080) for Vue app only.
 
+![Application screenshot](./screenshot.png)
+
 ## Recommended plugin for debugging Vue
 
 * Get Chrome DevTools for Vue.js [here](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
@@ -116,7 +122,7 @@ Special thanks to everyone who helped and contributed to this project!
 
 ## License
 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/content/LICENSE)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://mit-license.org/)
 
 Copyright © 2018 - 2019 [Software Ateliers](https://github.com/SoftwareAteliers)