Adds a Vue sample

[mck231]

This is a simple Vue app sample that tries to follow the same paradigm as other front-end frameworks in this repo.

[khalidabuhakmeh]

This directory includes dev-certs on my machine. You could also just load the .pfx found in the directory and this would work.

[khalidabuhakmeh]

The sample looks really good, the only part that could use improvement is the start-up experience with the certificates. We could load the first pfx certificate in the default cert installation location instead. That cert should also be trusted if installed correctly.

[StuFrankish]

Hi @mck231 👋
Thanks for the sample submission, it looks good!

If I might offer a suggestion to help with what Khalid mentioned, you could enhance the vite.config.js with some additional code to create an app-specific certificate (if it doesn't already exist), on startup.

In one of my own personal projects, I use the following which you are also welcome to use 😊
Note, in my file, the certificate is given a name specific to the app, const certificateName = "vueapp1.client";.
It then checks to see if the certificate files exist, and spawns a child process to create them if they don't.

// vite.config.ts

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import plugin from '@vitejs/plugin-vue';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import { env } from 'process';
import VueDevTools from 'vite-plugin-vue-devtools'

const baseFolder =
    env.APPDATA !== undefined && env.APPDATA !== ''
        ? `${env.APPDATA}/ASP.NET/https`
        : `${env.HOME}/.aspnet/https`;

const certificateName = "vueapp1.client";
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
    if (0 !== child_process.spawnSync('dotnet', [
        'dev-certs',
        'https',
        '--export-path',
        certFilePath,
        '--format',
        'Pem',
        '--no-password',
    ], { stdio: 'inherit', }).status) {
        throw new Error("Could not create certificate.");
    }
}

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7221';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [plugin(), VueDevTools()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@import "bootstrap/scss/bootstrap";`,
          },
        },
      },
    server: {
        //anything in here gets proxied up to the parent
        proxy: {
            '^/api': {
                target,
                secure: false
            },
            '^/auth': {
                target,
                secure: false
            },
            '/signin-oidc':{
                target,
                secure: false
            }
        },
        port: parseInt(process.env.PORT ?? "7206"),
        https: {
            key: fs.readFileSync(keyFilePath),
            cert: fs.readFileSync(certFilePath),
        }
    },
    build: {
        outDir: './dist'
    }
})

[khalidabuhakmeh]

@mck231 I was looking at the APIs again, and while you can keep the code there now, I was curious if there was a better way to generate paths for created resources. I've included the updated code below.

group.MapGet("/{id}", (int id) =>
{
    var item = data.FirstOrDefault(x => x.Id == id);
}).WithName("todo#show");

// POST
group.MapPost("/", (ToDo model, ClaimsPrincipal user, LinkGenerator links) =>
{
    model.Id = ToDo.NewId();
    model.User = $"{user.FindFirst("sub")?.Value} ({user.FindFirst("name")?.Value})";

    data.Add(model);

    var url = links.GetPathByName("todo#show", new { id = model.Id });
    return Results.Created(url, model);
});

[mck231]

Hey guys, I took y'alls recommendation, and applied fixes accordingly. Thank you for the great feedback. Don't hesitate to let me know if anything else needs to be fixed.

[khalidabuhakmeh]

Thanks @mck231 this is a great sample. We really appreciate it.