I made a site called: daily-album.club where I recommend an album every day with some links to where you can listen to it.

This site has an intended audience of one (me), so the stakes of creating a recommendation is low stakes. After creating an album recommendation, I can usually find the energy/motivation to continue with something else. Here’s to seeing if some deliberate practice will make me more productive overall!

One of the more unique keyboard layouts that has always kept my attention is a columnar ortholinear layout. The designs of these keyboards feel utilitarian and maximize proximity. Of course, learning a new keyboard layout seems like a huge productivity sink without much gain. Things finally came to a head for me reading that HN article. I was going to buy an ortho-linear keyboard. The whole process required a lot of research as pre-built keyboards are either non-existant or pretty spendy. After looking over what kits were available, I was torn between the Corne Cherry V3 and the lily58. The main difference being that the lily58 has number keys, which would soften the learning curve. I poured over the site several times making sure that I had EVERYTHING I needed and bought a lily58 kit, keycaps and switches from a company called yushakobo (遊舎工房) and it arrived the next day at 9:30am!

Some first thoughts when I opened everything was there’s going to be a daunting amount of soldering components much smaller than I’m used to. I mean, look at how tiny the diodes are!

A quick rundown of tools I used that were vital:

1. soldering iron & solder: $3 from a discount store
2. tweezers: the ones with an angled tip are nice, I kind of wished I had ones that were default closed; I cannot count the number of times I dropped those tiny diodes
3. magnifying glass: I found a soldering holder for pretty cheap a few months ago
4. digital multimeter: VERY useful for confirming diode polarity
5. toothpicks: scrape away excess solder (a solder wick might work better)

I managed to take care of almost all of it in about 4 hours with a $3 soldering iron. Once I got into the flow of things, I kind of lost track and soldered well past midnight.

It took quite a lot of getting used to working with such small components and some of the solder joints were pretty gnarly and had me worried if I had fried some diodes trying to solder them in place.

The rest was such a blur I didn’t get many pictures, but here is the assembled version:

Finally I flashed the keyboard with the default layout and am now building up some muscle memory by writing this up.

Overall thoughts

The switches I ordered (cherry-mx black-silent) are actually silent, which actually took some getting adjusting to. The amount of force is also something I’m not in love with, but I might warm up to it. I was really surprised at how natural typing is until I need to use a key that is not in a standard keyboard’s position. Most notably the backspace key will take some getting used to. I noticed how I have some not so great habits; My ring fingers wander outside of their lane, making my fingers leave the home row. The biggest one though is changing IME modes. I always setup my pcs to switch between Japanese and English with ctrl + space. It never occured to me that while I primarily type space with my left hand, the switching between English and Japanese was exlusively with my right thumb which has led to some premature mentions being thrown around in Slack and GitHub (sorry!). I am kind of excited to get used to the arrow keys being in the home row (like vim) and hopefully will help me get used to nvim in the future.

I have a few ideas about what kinds of layout changes I want to make in the future, but will stick it out for a week with the default.

Some tips

diodes

After all the diodes are soldered, use an electrometer on the ground setting to confirm the direction of the diodes. The nice thing about the lily58 is that the diode direction is printed on both sides, making it really easy to confirm before assembling the board and removes a stressful troubleshooting step. I had put one in backwards and was very happy I found it before installing switches/keycaps.

ProMicro

The directions on the site were a little vague so I didnt solder the spring headers to the ProMicro and that lead to really spotty connections when trying to flash the firmware with QMK. after double-checking with the documents provided in the kit, I realized that as least one side needs to be soldered. The more you know.

keycaps

I bought the standard set of keycaps and the home row key indents are pretty shallow, making htem easy to miss. I also ran into issues with finding appropriate keys for the utility keys. Its not super important, but something I would like to revisit in a few weeks and maybe order some blank caps.

base plate

The base plate has some sharp corners to them and can easily scratch wood desktops. I’m still thinking about how to best go about fixing this, and am currently contemplating coating the base plates in silocone. If I can get the mold just so, it would be a pretty cool non-slide coating that can also keep scratches off my desk.

1. Turn on diagnostics

This adds a large variety of information to the output, but can help with checking environment variables, expose tasks output and current directory among others. Before this was only enable-able through environment variables but now clicking ‘Run pipeline’ and selecting enable system diagnostics.

2. Add debug bash scripts to ‘feel out’ the issue

This is extremely wasteful, but can sometimes be useful.

3. Locally debug the agent via Docker!

Dockeried build agents are were a game-changer (they have been discontinued and everything has been moved to azure-pipelines-agent). I knew which command (yarn build) was failing, so being able to start an exact environment as what is running on Azure Devops made the troubleshooting trivial.

looking at the dockerhub repository it seemed pretty straight forward to get an bash shell running with the command below:

docker run -e VSTS_ACCOUNT=TotallyFakeName \
  -e VSTS_TOKEN=TotallyInvalidToken \
  -v /var/run/docker.sock:/var/run/docker.sock \
  --mount type=bind,source="$(pwd)",target=/app \
-it mcr.microsoft.com/azure-pipelines/vsts-agent:ubuntu-16.04-docker-17.12.0-ce sh

The important parts are adding your mount to the current directory (--mount type=bind,source="$(pwd)",target=/app) to make debugging easier and adding bash(sh). Also the VSTS_TOKEN and VSTS_ACCOUNT are intentionally invalid because there is no need to have official build running on a dev pc.

The new agents seem great, and even have a half-baked localRun feature that is supposed to let you verify your build will work before failing the build serveral times greatly increasing the development cycle. Some more information is here and hopefully it gets fully supported in the future as I can only run it connected to a Azure Devops instance

The issue?

One of the files was name MyPascalCAseComponent.vue, but the import in a parent component was MyPascalCaseComponent.vue. As Ubuntu treats these as seperate files, it threw an error that was swallowed by either node or yarn.

Overview:

1. Scaffold new MVC project
2. Follow official docs + extend
3. Add an Antiforgery enabled endpoint to test
4. Add axios
5. make axios call the endpoint with AntiforgeryValidation

Scaffold new Mvc project

first scaffold a new MVC project in dotnet core:

dotnet new mvc --name Csrf.Sample 

Follow official docs + extend

First configure Starup.cs while referencing the Starup.ConfigureServices docs and the extra annotations in comments below:

// Startup.cs

// ...
    public void ConfigureServices(IServiceCollection services)
    {
        // ...
        services.AddAntiforgery(options => {    
            options.HeaderName = "X-XSRF-TOKEN";
        });
        
        services.Configure<CookiePolicyOptions>(options =>
        {
            // All unessential cookies (including anti-csrf) will not be allowed until consent is granted by default.
            options.CheckConsentNeeded = context => true;
        });
        // ...
    }

    public void Configure(IApplicationBuilder app, IAntiforgery antiforgery)
    {
        // ...
        app.Use(next => context =>
        {
            string path = context.Request.Path.Value;

            if (
                // You can modify what gets a csrf token here
                string.Equals(path, "/", StringComparison.OrdinalIgnoreCase) ||
                string.Equals(path, "/index.html", StringComparison.OrdinalIgnoreCase))
            {
                var tokens = antiforgery.GetAndStoreTokens(context);

                // IF using CookiePolicyOptions IsEssential needs to be true
                context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken, 
                    new CookieOptions() { HttpOnly = false, IsEssential = true }); 
            }

            return next(context);
        });

        // ...
    }

Some important points:

• if options.HeaderName is null, it will only work for form data (ref).
• options.Cookie.Name must not match the context.Response.Cookies.Append token name.
• if using CookiePolicyOptions, the context.Response.Cookies.Append CookieOptions needs IsEssential to add to the client before consent.

Start the application (dotnet run), go to the homepage (https://localhost:5001) and open up the developer tools. Confirm that the client code can read the XSRf-COOKIE in the network tab as well as document.cookie in the console section like the picture below:

Add an Antiforgery enabled endpoint to test

In Controllers/HomeController.cs add the following route:

[ValidateAntiforgeryToken]
public IActionResult WelcomeMessage(){
    return Ok("Great!");
}

Next, to test this with axios.

Add Axios

First the Axios libary is needed. For brevity and ease-of-use, use the CDN version In Views/Shared/_Layout.cshtml add the following parts below the annotation <!-- Added here:

// _Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... omitted for brevity -->
</head>
<body>
    <!-- ... omitted for brevity -->
<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2019 - Csrf.Sample - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </div>
</footer>

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>

    <!-- Added here for development -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">

    </script>
    <!-- added here for production -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)
</body>
</html>

After the axios library is added, axios can now call the endpoint from Home.cshtml. In Views/Home/Index.cshtml add the following snippet to the end:

@section scripts {
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            window.axios.get('/home/WelcomeMessage').then((response) => {
                alert(response.data);
            }).catch((err) => {
                console.log(err);
            })
        });
    </script>
}

Where’s the magic?

Axios has a default setting for CSRF cookies halfway down the Request Config section that will explains it.

// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default

The defaults in axios are what we set in the Startup.cs. Whenever axios makes a request, it will check the document.cookie for a value called XSRF-TOKEN and add it as a header X-XSRF-TOKEN.

Some considerations:

This will not provide a new token for every request. If there is interest, I may look into it. Additionally, this integration works just as well for Vue/Nuxt/React apps that use axios as it is the default behavior.

Prerequirements:

• yarn
• @vue/cli
• ASP.Net Core 2.2
• VS Code

Start by creating an MVC Project:

mkdir DotnetVues
dotnet new mvc --name DotnetVues.Web -o src/DotnetVues.Web

Create a solution and add the project:

dotnet new sln DotnetVues
dotnet sln DotnetVues.sln add src/DotnetVues.Web/

Next create a new Vue app:

vue create client-app

Manually select the below features:

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

Add Buefy:

vue add buefy

select the below choices

? Add Buefy style? scss
? Include Material Design Icons? Yes
? Include Font Awesome Icons? No

NOTE: this will change the dart-sass dependency to node-sass

Configure Vue for multi-page output

Create a vue.config.js file and add the following to add support for pages and change the built files directory to the MVC project’s wwwroot:

module.exports = {
  pages: {
    spa: "src/pages/spa/main.ts",
    singleDashboard: "src/pages/singleDashboard/main.ts"
  },
  outputDir: "../src/DotnetVues.Web/wwwroot/",
  filenameHashing: false,
};

The pages will identify the two entrypoints (next step). filenameHashing should be turned off to allow for easy reference in the Razor Views.

Add the following directories to client-app/src of the Vue app:

.
└── pages
    ├── singleDashboard
    └── spa

Copy the App.vue and main.ts into each of the folders:

.
├── App.vue
├── main.ts
├── router.ts
├── pages
│   ├── singleDashboard
│   │   ├── App.vue
│   │   └── main.ts
│   └── spa
│       ├── App.vue
│       └── main.ts

Move the views/* to pages/spa/ Move router.ts to pages/spa/

Update the pages/spa/router.ts:

import Vue from "vue";
import Router from "vue-router";
import Home from "@/pages/spa/views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: "/Spa", // This is going to be accessed from the 'spa' controller
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // this will split the route to a seperate chunk to keep the browser more responsive
      component: () => import("@/pages/spa/views/About.vue"), 
    },
    { path: "*", redirect: "/" } // fallback to home component if route is not found
  ]
});

Then delete client-app/src/App.vue as well as client-app/src/main.ts.

the Vue app should look like this:

.
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   ├── logo.png
│   │   └── scss
│   │       ├── _variables.scss
│   │       └── app.scss
│   ├── components
│   │   └── HelloWorld.vue
│   ├── pages
│   │   ├── singleDashboard
│   │   │   ├── App.vue
│   │   │   └── main.ts
│   │   └── spa
│   │       ├── App.vue
│   │       ├── main.ts
│   │       ├── router.ts
│   │       └── views
│   │           ├── About.vue
│   │           └── Home.vue
│   ├── shims-tsx.d.ts
│   └── shims-vue.d.ts
├── tests
│   └── unit
│       └── example.spec.ts
├── tsconfig.json
└── yarn.lock

Next remove routing from the singleDasboard project pages/singleDashboard/main.ts:

import Vue from 'vue';
import App from './App.vue';
import Buefy from 'buefy';
// import router from './router.ts; // delete
import './assets/scss/app.scss';

Vue.use(Buefy);

Vue.config.productionTip = false;

new Vue({
  // router, // delete
  render: h => h(App)
}).$mount("#singleDashboard");

And in pages/singleDashboard/App.vue:

<template>
  <div id="app">
    <div id="section">
        SPA-less multi-page sample
    </div>
  </div>
</template>

<style lang="scss">

</style>

Building the project will delete the wwwroot folder of the MVC project! (we will replace it all with Buefy/Bulma):

yarn build

Prepare the MVC Project for the two Vue apps

Now that we have built two seperate vue apps, let’s look at the MVC side. As the build process deleted all the bootstrap styles and JQuery, start by deleting all of those resources.

In: Views/Shared/_Layout.cshml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DotnetVues.Web</title>

    <!-- TODO Add common-css -->
    <!-- <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment> -->
    <!-- <link rel="stylesheet" href="~/css/site.css" /> -->
</head>
<body>
    <header>
        <!-- Delete this and replace later wit ha bulma-based navbar -->
        <!-- <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">DotnetVues.Web</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav> -->
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - DotnetVues.Web - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <!-- TODO Add webpack vendor chunks here -->
    <!-- <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script> -->

    @RenderSection("Scripts", required: false)
</body>
</html>

Add the common dependencies to the MVC Projec:

When Vue is built, the dependencies are added to the wwwroot directory like:

.
├── css
│   ├── chunk-common.css
│   └── spa.css
├── favicon.ico
├── img
│   └── logo.png
├── index.html
├── js
│   ├── chunk-common.js
│   ├── chunk-common.js.map
│   ├── chunk-vendors.js
│   ├── chunk-vendors.js.map
│   ├── singleDashboard.js
│   ├── singleDashboard.js.map
│   ├── spa.js
│   └── spa.js.map
├── singleDashboard.html
└── spa.html

NOTE: the build process also outputs unneeded html that can probably be omitted from the build process

Add the common js/css to MVC _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DotnetVues.Web</title>

    <!-- Because the version handled by ASP.Net Core, this should be for all environments -->
    <environment exclude="Development,Staging,Production">
        <link rel="stylesheet" href="~/css/chunk-common.css" />
    </environment>
    @RenderSection("Styles", required: false)
</head>
<body>
    <header>
        <!-- Change the navbar to ba buefy-styled one -->
        <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item brand-text" href="/">DotnetVues</a>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </div>
        <div class="navbar-menu">
            <div class="navbar-end">
                <a asp-controller="SingleDashboard"
                    asp-action="Index" class="navbar-item">SingleDashboard</a>
                <a asp-controller="Spa"
                    asp-action="Index" class="navbar-item">Spa</a>
            </div>
        </div>
        </nav>
    </header>
    <div>
        <partial name="_CookieConsentPartial" />
        <main role="main" class="section">
            @RenderBody()
        </main>
    </div>

    <footer class="footer">
        <div class="container">
            &copy; 2019 - DotnetVues.Web - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <!-- Add the common js portions here -->
    <environment include="Development,Staging,Production">
        <script src="~/js/chunk-common.js"></script>
        <script src="~/js/chunk-vendors.js"></script>
    </environment>
    @RenderSection("Scripts", required: false)
</body>
</html>

Add routes/views to MVC:

In the navbar there are two controllers that don’t acutally exist (SingleDashboard and Spa) so we will need to add them. MVC has a directory structure to adhere to, which defaults to:

.
├── Controllers
│   └── MyViewA.cs // has an action of Index
└── Views
    └── MyViewA
        └── Index.cshtml

Add the Controllers/SingleDashboard.cs route:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DotnetVues.Web.Models;

namespace DotnetVues.Web.Controllers
{
    public class SingleDashboardController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Add the Views/SingleDashboard/Index.cshtml view:

@{
    ViewData["Title"] = "Vue-based SPA-less single dasboard";
}

@section scripts {
    <environment include="Development,Production,Staging">
        <script src="~/js/singleDashboard.js" asp-append-version="true"></script>
    </environment>
}

<div id="singleDashboard"></div>

Add the Controllers/Spa.cs Route:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using DotnetVues.Web.Models;

namespace DotnetVues.Web.Controllers
{
    public class SpaController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Add the Views/Spa/Index.cshtml View:

@{
    ViewData["Title"] = "Vue SPA";
}

@section scripts {
    <environment include="Development,Production,Staging">
        <script src="~/js/spa.js" asp-append-version="true"></script>
    </environment>
}

@section styles {
    <environment include="Development,Production,Staging">
        <script src="~/css/spa.css" asp-append-version="true"></script>
    </environment>
}

<div id="spa"></div>

NOTE: code-chunking is applied to css as well, creating a need to manage all assets per app

Navigating around we can see the singleDashboard URI loads the app and the SPA URI loads the app with routing to Home and About.

What happens when we enter the spa route directly though? It 404’s with a blank page, yikes. For requests to the /spa url only, we need to provide a fallback routing in MVC be compatible with vue-router’s history mode.

MVC’s routing rules are located in Startup.cs under public void Configure(IApplicationBuilder app, IHostingEnvironment env) method inside of the app.UseMvc:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseCookiePolicy();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
      
        // Whenever a request to the Spa Controller doesnt match a defined Action, return the Index.cshtml and let the front-end handle it
        routes.MapRoute(
            name: "spa-route",
            template: "{controller=Spa}/{*anything=Index}",
            defaults: new { action = "Index" });
    });
}

Debug again and the MVC Router returns index for unknown routes for only the SpaController.

Conclusion

While this is certainly not exhaustive, here are some more things I would like to explore more deeply:

• Support development builds - VueDevTools can then be enabled
• Setup Reverse proxy for Vue - route calls to MVC instance (local or hosted) during yarn serve
• Disable CSS Code-chunking - the amount of custom css should be minimal enough to not justify chunking the code, also avoiding a maintenance nightmare
• Create a MVC View Component (or tag-helper?) to help cut down on boiler code for the Razor Views

The finished product will look like:

.
├── DotnetVues.sln
├── client-app // Vue App
│   ├── README.md
│   ├── babel.config.js
│   ├── jest.config.js
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── src
│   │   ├── assets
│   │   │   ├── logo.png
│   │   │   └── scss
│   │   │       ├── _variables.scss
│   │   │       └── app.scss
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── pages
│   │   │   ├── singleDashboard
│   │   │   │   ├── App.vue
│   │   │   │   └── main.ts
│   │   │   └── spa
│   │   │       ├── App.vue
│   │   │       ├── main.ts
│   │   │       ├── router.ts
│   │   │       └── views
│   │   │           ├── About.vue
│   │   │           └── Home.vue
│   │   ├── shims-tsx.d.ts
│   │   └── shims-vue.d.ts
│   ├── tests
│   │   └── unit
│   │       └── example.spec.ts
│   ├── tsconfig.json
│   ├── vue.config.js
│   └── yarn.lock
└── src // ASP.Net Core MVC Project
    └── DotnetVue.Web
        ├── Controllers
        │   ├── HomeController.cs
        │   ├── SingleDashboard.cs
        │   └── Spa.cs
        ├── DotnetVues.Web.csproj
        ├── Models
        │   └── ErrorViewModel.cs
        ├── Program.cs
        ├── Properties
        │   └── launchSettings.json
        ├── Startup.cs
        ├── Views
        │   ├── Home
        │   │   ├── Index.cshtml
        │   │   └── Privacy.cshtml
        │   ├── Shared
        │   │   ├── Error.cshtml
        │   │   ├── _CookieConsentPartial.cshtml
        │   │   ├── _Layout.cshtml
        │   │   └── _ValidationScriptsPartial.cshtml
        │   ├── SingleDashboard
        │   │   └── Index.cshtml
        │   ├── Spa
        │   │   └── Index.cshtml
        │   ├── _ViewImports.cshtml
        │   └── _ViewStart.cshtml
        ├── appsettings.Development.json
        ├── appsettings.json
        └── wwwroot
            ├── css
            │   ├── chunk-common.css
            │   └── spa.css
            ├── favicon.ico
            ├── img
            │   └── logo.png
            ├── index.html
            ├── js
            │   ├── chunk-2d0b23f4.js
            │   ├── chunk-2d0b23f4.js.map
            │   ├── chunk-common.js
            │   ├── chunk-common.js.map
            │   ├── chunk-vendors.js
            │   ├── chunk-vendors.js.map
            │   ├── singleDashboard.js
            │   ├── singleDashboard.js.map
            │   ├── spa.js
            │   └── spa.js.map
            ├── singleDashboard.html
            └── spa.html

This will be an ongoing project chronicling my adventure into Nuxt with Typescript. First we will create a nuxt app and then convert it to a typescript app. This will reference the hackernews-nuxt-typescript repository as well as the Vue-cli typescript scaffolding to find a happy medium that works best with VSCode.

Before getting started, install the below dependencies:

• Yarn

In this part:

1. Scaffold a new Nuxt app
2. Change dependencies to typescript versions
3. Update package.json scripts to the new dependencies
4. Port configuration to typescript
5. Port Single File Components to Typescript

Scaffold a new Nuxt app

run npx create-nuxt-app my-typescript app

lets install the dependencies and run this to make sure: yarn && yarn dev

Change dependencies to typescript versions

first add vue-property-decorator to the app via yarn: yarn add vue-property-decorator

open package.json and change the entry from "nuxt": "^2.X.X" to "nuxt-ts": "latest"

next, add the prettier linter to the devDependencies below:

   "tslint-config-prettier": "1.18.0"

NOTE: This will work, but some items will not lint before compile errors.

Update package.json scripts to the new dependencies

replace:

    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",

with:

    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",

lets run this and see the progress yarn dev

There should be a prompt to create a tsconfig.json as it is missing; press yes.

The serverside framework was set to None when the Nuxt app was created… but there is a server being built.

looking at the page we will find missing css and errors saying:

[Vue warn]: Unknown custom element: <b-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The server being built is a hint; nuxt.config.js is not being loaded and a default is executed in place. Because the default doesn’t use Buefy, the b-icon is also not resolved and a warning is thrown. This is fixed in the next step.

Port configuration to typescript

Change the name of nuxt.config.js to nuxt.config.ts

Then change the module.exports = to export default

The default page should be showing with Buefy again.

Port Single File Components to Typescript

NOTE: This section has a variety of pitfalls, so lets go through the common ones as the show up.

First convert layouts/default.vue to the vue-property-decorator:

1. change the script language to ts and add the component decorators

...
<script>
export default {
...

...
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'

@Component
export default App extends Vue {
...

There should be an error similar to the one below:

This is caused by property decorators being an experimental typescript feature. Enable them by adding the below to tsconfig.json compilerOptions:

  "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ],
    "experimentalDecorators": true, // add this
  }

NOTE: this may require a restart for VSCode to understand the tsconfig changes

Next, do the same for pages/index.vue

in the script section change:

<script>
import Card from '~/components/Card'

export default {
  name: 'HomePage',

  components: {
    Card
  }
}

to:

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Card from '~/components/Card'

@Component({
  components: {
    Card
  }
})
export default class HomePage extends Vue {}

There should be another error here:

This one is trickier and has some history(spoilers it’s really long). Typescript, by default, will only look for files with extension .ts and there seems to be two methods of fixing this. One is to modify the webpack config and the other is to extend the typing definitions with a shim as it is easier than extending webpack (personal opinion only, don’t @me).

Add a shims.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

NOTE: A VSCode restart may be required to pickup the changes

Next change components/Card.vue from:

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    }
  }
}

to:

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';

@Component
export default class Card extends Vue {
    @Prop({
      required: true
    })
    title!: string;

    @Prop({
      required: true
    })
    icon!: string;
}

Some brief tips:

• The @Prop decorator takes on all the definitions property definitions that typescript is not built for (namely if the property is required and the default value).
• The ! after the property name is to declare that the property can be unintialized (the @Prop makes it reactive) because it is set during the vue lifecycle.

Extras: tweaking the linter/formatter

For the most part, the prettier formatter works well. Coming from a C# background however, I would like a couple of changes. namely semicolons at the end of statements. Official docs says that adding "semi": true" to .prettierrc should work.

Next, increase the max line length by setting "printWidth": 120 in the .prettierrc file.

Lastly, add commas to everything! "trailingComma": "all"

This will conclude part 1. Any corrections can be sent via Twitter DM

• self-hosted - I want to own my data as much as possible
• multi-language - I would like to improve my Japanese writing ability
• static
• tags
• continuous - essentialy, make a new file git-push and its done, no need for anything more complicated

want, but not needed:

• analytics (access count, unique users)
• feedback (NOT comments)

First up was Metalsmith and after a decent amount of fiddling with things, most of everything on the wishlist was covered. Except multi-lang. There’s a plugin, but was an extremely frustrating experience.

Next attempt was Vuepress, which is a wonderful framework that supports i18n out of the box and can publish easily to a variety of hosts. But the framework is still in a lot of flux. I may look at it again in the future as Vue’s component-based model is excellent.

Finally, I settled on Hugo as I can integrate with CICD, deploy anywhere and create truly multi-lang static sites with tags as well as an rss feed! Additionaly, themes are added as git submodules.

NOTE: The below architecture taught me alot about AWS, but I moved to Netlify!

CICD now looks like:

Git Push/Create PR => Netlify builds via hugo => Netlify deploys the site => DONE!

This is great because they also support SSL via Let’s Encrypt for free. It also only took 10min to migrate.

A tour of this blog (from post to deployment):

This makes use of three services:

• GitHub.com (source host/workflow management)
• Azure DevOps (CICD)
• AWS (Hosting Platform)

The general flow looks like the below diagram (thanks to draw.io):

The source is saved on GitHub.com in a private repository. This makes for collaboration (TODO) and proof-reading much easier. For every post a new branch is made (e.g. posts/my-blog-tour) locally. Using Hugo, a new article is made with the command hugo new posts/my-blog-tour.md. This has the advantage of automatically creating the front-matter template. After writing and making a Japanese copy, the changes are pushed to GitHub. From here I create a PR, and assign reviewers. After revisions are completed, The PR is merged to the master branch. Any changes to the master branch will trigger a build and deployment by Azure DevOps. The CICD process is roughly:

BUILD

• clone repository from GitHub
• clone submodules—for out theme
• download and extract Hugo
• use Hugo to build the site with the destination being the artifacts directory

Release

• copy files from artifacts
• upload to AWS S3.

That is the tour for now, I would like to be able to support feedback (NOT comments) via github issues to make corrections and updates easier for everyone (I presonally dislike sites that have outdated information that become misleading lies given enough time). So if there is something in this blog that is incorrect/outdated or just weird, create an issue (there will be a link at the bottom of each page soon-ish) and let’s improve it.