Building Applications with Puter: A Developer's Guide

HeyPuter/puter

Puter provides a consistent development environment that's accessible from any device with a web browser. This means you don't need to worry about setting up your local machine every time you switch computers. You can simply log in and start coding, with all your files and settings exactly where you left them. This is especially useful for remote teams or contractors who need a standardized workspace.

You can use Puter as a platform to build and showcase web applications. Instead of just a static demo page, you can create a full, interactive experience that users can explore within the browser. This allows for more engaging and realistic prototypes that mimic a desktop application's feel.

Puter's architecture is ideal for building tools that are meant to be used on the web. Its built-in file system, window management, and application framework simplify the development of web-based tools for data analysis, image editing, or project management. You don't have to build these core components from scratch, saving you time and effort.

The easiest way to get started is by self-hosting Puter. This gives you full control over the environment and its data.

You'll need a server or a computer to host Puter. A basic Linux machine with Node.js and npm installed is all you need. Docker is also an option for a simpler setup.

First, you'll want to clone the repository from GitHub.

git clone https://github.com/HeyPuter/puter.git
cd puter

Next, install the required dependencies and start the application.

npm install
npm start

This will start a local server. You can then access Puter by navigating to http://localhost:3000 in your web browser. From there, you can register a new user and start exploring.

Let's walk through how to create a basic application within the Puter environment. Puter apps are essentially web applications that run within a window.

Every Puter app needs a package.json file to define its metadata.

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "My first Puter app.",
  "main": "index.js",
  "app": {
    "title": "Hello World",
    "icon": "https://example.com/icon.png"
  }
}

This file contains the core logic for your app. The Puter SDK (available in the Puter environment) provides the necessary functions to create windows, handle events, and interact with the file system.

import { Window, VBox, Label, Button } from '@puter/sdk';

// This function is the entry point of your app
function main() {
  const window = new Window({
    title: 'Hello World App',
    width: 400,
    height: 300
  });

  const layout = new VBox();
  const label = new Label('Click the button!');
  const button = new Button('Say Hello');

  button.onClick(() => {
    label.text = 'Hello, Puter!';
  });

  layout.appendChild(label);
  layout.appendChild(button);
  window.appendChild(layout);
  window.open();
}

// Call the main function to start the app
main();

This code creates a simple window with a label and a button. When the button is clicked, the label's text changes. You'd save these files (package.json and index.js) in a folder within your Puter file system, and then you could run the app. The SDK handles all the window rendering and event handling for you!