I Got Tired of Switching Tools While Coding on My Phone, So I Built This

Hey everyone!

I made a web framework called Authtics Host, also known as HostJS, and one of the things I'm most proud of is its built-in Developer Panel.

The reason I wanted this is pretty simple: I develop stuff on my phone. 💀

When you're developing a website, you need to check logs, investigate requests, see what's happening on the server, and figure out why something isn't working. Switching between tools just to do that gets annoying pretty quickly on a phone.

So I wanted those tools available right inside the framework I'm already using.

That's where the Developer Panel comes in.

What is Authtics Host?

Authtics Host is a web framework inspired by Next.js. It uses TypeScript, TSX, React, and Esbuild, and supports SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering), and SRTWS (Site Rendering Through WebSockets, which is currently in beta).

I'm still working on improving it, but I wanted to share one of its features that has genuinely helped me while developing.

Getting started

First, you'll need Node.js 22.

Install Authtics Host using npm:

npm install @bananacool467/authtics-host@latest

For a basic project, you can use a structure like this:

my-project/
├── index.ts
├── authtics_host.config.ts
└── client/
    ├── public/
    └── pages/
        └── index.tsx

In index.ts, create the app:

import { App } from "@bananacool467/authtics-host";

const app = new App();

Then configure the framework in authtics_host.config.ts:

import { defineConfig } from "@bananacool467/authtics-host";

export default defineConfig({
  port: 8000,
  renderType: "ssr",
  devMode: true,
  autoFile: true,
  autoPage: true,
  autoPageDir: "client/pages",
  autoFileDir: "client/public"
});

Finally, create client/pages/index.tsx:

export default function Index() {
  return (
    <p>Hello, World!</p>
  );
}

Start the project with:

node --experimental-strip-types index.ts

You should get your page, and with development mode enabled, you should also see a clickable Developer Panel at the bottom-right.

So, what's in the Developer Panel?

The panel has nine tabs:

• Console — View current logs.
• Route — Check information about the current route.
• Webpage Info — See information about the current webpage.
• Network — Check the current ping and inspect fetch requests sent from the client and responses received from the server.
• Client Info — View the client's user agent, operating system, and FPS.
• About Host — Check the current Authtics Host version.
• Server Info — Check server heap usage, CPU usage, request count, connected users, and uptime.
• Settings — Customize the Developer Panel.
• Package Security — Your project's security ( Unavailable because it's under development ).

Here's what it looks like:

The panel gives you somewhere to look when you're trying to figure out what's going on with your application, without having to keep switching to a separate tool for every little thing.

For example, if a request isn't behaving the way you expected, you can check the Network tab. If you're trying to figure out what the application is logging, you can check the Console tab.

You also have route and client information available when you need it.

Obviously, this doesn't mean you will never need other debugging tools. It's just convenient to have these features available in the framework itself.

It can do more than inspect things

The Developer Panel also has controls for managing the running app.

Depending on how you've configured access, you can restart or shut down the app and pause or resume incoming users.

That can be useful when you're testing something and need to control what's happening without going off to manage the server separately.

A quick note about developer access

The panel uses something called a DAT (Developer Access Token).

If you configure a DAT in authtics_host.config.ts, you can restrict developer access using a token you specify:

export default defineConfig({
  port: 8000,
  renderType: "ssr",
  devMode: true,
  dat: "YOUR DAT HERE"
});

Replace YOUR DAT HERE with your own token. Don't publish a real token in your source code or share it publicly.

You can also configure an array of DATs if multiple developers need access.

Without a DAT restriction configured, the panel only provides access to the Console and Network tabs. Setting a DAT restriction enables access to the other developer features, including the app management controls.

Since the panel can expose information about your app and provide controls over the server, make sure you configure access appropriately before deploying anything publicly. You can also turn the panel off by setting devMode to false.

Why I built it this way

This is the part that matters most to me.

I didn't build the Developer Panel just to have another feature to list in a README. I built it because I actually use it.

When you're coding on a phone, little inconveniences add up. Having the console, network information, client details, and server information in one place means I don't have to keep interrupting my workflow to go somewhere else just to investigate what's happening.

And that's really the goal of Authtics Host: make web development more convenient, especially for people working from mobile devices.

I'm not saying this will magically make every developer faster, or that everyone needs another framework. I built something that solves a problem I personally ran into, and the Developer Panel has helped me with my own work.

That's a pretty good reason for me to keep improving it.

Try it out

Authtics Host is available on npm:

https://www.npmjs.com/package/@bananacool467/authtics-host

The package includes more than just the Developer Panel, so check out the README for the other framework features and configuration options.

If you try it, I'd genuinely like to hear what works for you and what needs improvement. Feedback is useful, especially while the project is still evolving.

Thanks for reading!

Comments

[Banana Cool]

Yes, the server checks if the DAT is valid or not. If it isn't it'll reject the request for DAT-protected endpoints. And it will tell the browser if the DAT is not correct.