Flowtr Panel

Theo Paris — Thu, 10 Dec 2020 05:30:32 +0000

Hey everyone,
I wanted to share a project that I am currently working on that I am calling Flowtr Panel. It is going to be a web interface for managing your homelab/servers. As of now, I only have the basic structure of the panel, but not a complete web interface. Below you can find more information about the project.

Project Info

Flowtr Panel is made with typescript and tinyhttp. I plan to have a module/plugin loader so anyone can contribute in making plugins for the panel. Currently, there is a proxy module built-in which acts like Apache or Nginx but with a web UI. It will let you serve your websites (html/php) and proxy your services to external domains. An example of a idea for a module/plugin could be a minecraft server manager.

Demostration

Since there is currently no documentation yet, I have created an example configuration of what it might look like in action.

Below is the php loader demo:

Github Repository

If you are interested in checking out the source code, or are even wanting to contribute, here is the link to the github repository.

Wrapping Up

Thank you for reading this article about my new project! Please let me know if you have any ideas for this panel.

Creating A Typescript Project

Theo Paris — Sun, 04 Oct 2020 22:45:14 +0000

Hello everyone, today I am going to be teaching you how I make new typescript projects. Most of the files here are based on my personal preference but you can change them to yours. I plan on making a series of posts for working with monorepos (workspaces) and installing the necessary Visual Studio Code Extensions.

Installation

You can use any package manager (yarn or npm), but today I'll be using pnpm.

Initializing the Project

This command will create the template package.json file for us to use. This file will store all of our dependency versions and our npm scripts.

pnpm init -y

The next command we will be running is for initializing a git repository. Git is a version control system will help us to manage and store our code and to help us with collaboration.

git init

Typescript + Prettier + ESLint Installation

The next thing you'll want to do is install all of the development dependencies. Prettier is for formatting your code which makes it much more readable.

pnpm i -D typescript @types/node prettier eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

Setting Up The Configuration Files

Next we will need to set up the configuration files for the various packages.

.prettierrc (Prettier)

{
    "tabWidth": 4,
    "printWidth": 80,
    "trailingComma": "all",
    "semi": true
}

.eslintrc.json (ESLint)

{
    "extends": [
        "prettier",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint"
    ],
    "parser": "@typescript-eslint/parser"
}

tsconfig.json (Typescript)

This is our typescript build configuration file. You can set declaration to true if you are making a library for other developers to use in their own packages.

{
    "compilerOptions": {
        "target": "ES2019",
        "module": "CommonJS",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "outDir": "dist"
    },
    "include": ["src"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

.gitignore

# Distribution
dist
out
build
node_modules

# Logs
*.log*
logs

# Environment
*.env*

# Misc
.DS_Store

package.json

Finally, we will add a scripts section to the package.json. This will let us build the project with pnpm run build. Keep in mind that the following code block does not contain the full package.json, only the scripts section.

    "scripts": {
        "build": "tsc --build"
    },

Final Notes

Now you can create your source files in the src folder of your project. I have also created a github template repository for you to initialize your projects with if you do not want to follow all of these steps each time you create a new project.

That's it! Thanks for reading one of my first dev.to posts.

DEV Community: Theo Paris