I’m going to create a software inventory management system, that will be able to organize the different vhosts and services / ports on my hosts. It would be nice if it could also monitor the host stats like cpu and ram usage.

It’s going to be made in NuxtJS 3 with Vuetify 3 for the frontend part. I’m going to use a NodeJS backend api with postgres for persistence. The project is going to be managed with a self-hosted instance of Taiga, which is a project management tool i’m using for some of my larger projects. I have chosen to use a native ExpressJS / PrismaJS solution for the api (for now) in the future there’s a possibility i will rewrite it to use NestJS as it looks more complete as a api solution than what i could make myself, including a testing suite and other nice to have features.

The Frontend

In the frontend im using axios for http communication with the api server, using a repository pattern and Vue 3 composables to make it lesser tightly coupled.

An Example Service

import { CreateService } from "~/types/api/serviceAggregate/CreateService";
import { HttpFactory } from "../factory";
import { Service } from "~/types/Service";

export class ServiceModule extends HttpFactory {
    async getServices() {
        return (await this.axios.get<Service[]>("/services")).data;
    }

    async newService(service: CreateService) {
        const created = (await this.axios.post<Service>("/services", service)).data;

        return created;
    }
}

As seen in the example the module extends HttpFactory which is simply a base class containing the axios instance.

Then im using the different modules in my composable file called api.ts which contains the following code.

import { HostModule } from "~/api/repositories/modules/hosts";
import { ServiceTypeModule } from "~/api/repositories/modules/serviceTypes";

import axios from "axios";
import { ServiceModule } from "~/api/repositories/modules/services";

axios.defaults.baseURL = "http://localhost:2999/"

const hostModule = new HostModule(axios);
const serviceTypeModule = new ServiceTypeModule(axios);
const serviceModule = new ServiceModule(axios);

export const useApi = () => {

    return {
        hosts: hostModule,
        serviceTypes: serviceTypeModule,
        services: serviceModule
    };
};

In the frontend im using the new script setup syntax as it seems more efficient for me to do it that way. I’m also using Pinia to keep track of the different data handlers, Pinia is my source of truth for all api calls which then calls the api composable used for decoupling. The project currently uses a static address to point to the backend, which im going to change so it uses a .env file based approach.

I also want to include a simple example of the current page structure.

• /hosts
• /hosts/new
• /hosts/[hostId]
• /service-types
• /service-types/new
• /service-types/[ServiceTypeId]/edit
• /services
• /services/new

In the future there will also be support for login with email / password.

In a follow up im going to describe more about the webapp and the api.

see the new post about v2