fullsty

ROADMAP: Platform-Independency (generate Fullsty-App as Web-App, Mobile-App, Win32-App) but with native UI-Elements - eg. CreateWindowEx(hwnd, ...) instead of just using a WebView in Desktop-Apps

Fullsty is a modular fullstack framework starter built from three core parts:

• @tobi2409/mvvm-monster for reactive UI rendering
• @tobi2409/layout for lightweight CSS layout composition
• @tobi2409/proc2rest for generating REST server/client code from TypeScript server functions

This repository provides a project template and scaffolding script so you can create a new project, generate API/client artifacts, and run the generated server quickly.

Installation

Install Fullsty globally:

npm install --global @tobi2409/fullsty

A sample application can be found at https://github.com/tobi2409/fullsty/tree/main/projects/db-test

For the db-test demo, add the required server wrappers in your project root before generating/running:

fullsty-server-pkg add pg
fullsty-server-pkg add db-connection
fullsty-server-pkg add drizzle

1) Create a project

Create a project in the desired parent directory:

create-fullsty-project projects/demo1

This creates a new folder (for example projects/demo1).

2) Install project dependencies

Go to the created project and install dependencies:

cd projects/demo1
npm install

3) Generate server/client output

Still inside the project folder:

npm run generate

This runs:

• generate-server (creates server output in projects/demo1/generated/server)
• generate-client (creates client output in projects/demo1/generated/client)

It also copies project-frame/server-package.json to generated/server/package.json and project-frame/client-package.json to generated/client/package.json.

4) Use fullsty-server-pkg for wrapper packages

fullsty-server-pkg is a project helper for wrapper-aware server package changes.

Run it from the project root, for example:

fullsty-server-pkg add pg
fullsty-server-pkg add drizzle
fullsty-server-pkg remove pg

Alternatively, run it through the Fullsty package with npx --package @tobi2409/fullsty fullsty-server-pkg.

What it does:

• add <package>
  • adds the package to the project's server package file, which is initially created from project-frame/server-package.json
  • copies a matching wrapper from scripts/extension-wrappers into projects/demo1/src/server
• remove <package>
  • removes the package from the project's server package file
  • removes the matching wrapper from projects/demo1/src/server

The script does not manage the project-level package.json.

The wrapper in scripts/extension-wrappers is the single source of truth. The copied files under src/server and the generated files under generated/server are derived artifacts and should not be edited manually. Re-run the wrapper command and npm run generate after changing an extension or its dependencies.

After fullsty-server-pkg add <package> you should run npm run generate again so the updated project server package file is copied into generated/server/package.json. After that, run npm install again inside projects/demo1/generated/server so the generated server gets the updated dependencies.

fullsty-server-pkg add drizzle copies scripts/extension-wrappers/drizzle/drizzle-wrapper.ts into projects/demo1/src/server. This keeps Drizzle visible as the recommended SQL style without coupling it to a specific DBMS wrapper. For PostgreSQL pooling and env handling you can add pg separately.

5) Start the generated server

Move to the generated server folder and install/start it:

cd generated/server
npm install
npm run start

package.json responsibilities

• Project-level package file: project-frame/package.json
  • Used for generation tasks (generate-server, generate-client, generate).
• Generated server package file: project-frame/server-package.json
  • Becomes generated/server/package.json.
  • Used to run the generated server (npm run start).

6) Install client dependencies

Move to the generated client folder and install the dependencies:

cd generated/client
npm install

VS Code Setup

To prevent Live Server from reloading when server logs are written, add this to .vscode/settings.json:

{
    "liveServer.settings.ignoreFiles": [
        "**/generated/server/logs/**",
        "**/*.log"
    ]
}

Quick summary

1. create-fullsty-project projects/<project-name>
2. cd projects/<project-name>
3. npm install
4. npm run generate
5. cd generated/server && npm install && npm run start