Basics

This guide shows how to make an app, run it, change it, and pack it into one executable file. It takes approximately five minutes.

Before you start, install Bun. The project contains all other necessary software. SolidRT runs on these systems:

1. Make a project

bun create solidrt my-app
cd my-app

A picker asks which extensions the app uses. For this guide, push enter. You then get Core, which is in all SolidRT apps. Later, you can add extensions as usual dependencies.

The command also installs the dependencies. Thus, you do not do a separate install step.

2. Run the app

bun run dev

This command starts the dev server. It also opens a native window that connects to the server. Keep the server and the window open. The server monitors your source files. When a source file changes, the window loads the app again.

3. Change the app

Open src/index.tsx. This file contains all of the app:

import { render, createLinearGradient, safeArea, Logo } from "@solidrt/core"

function App() {
  let backgroundColor = createLinearGradient(0, 0, 1, 1, [
    { offset: 0, color: "#080b16" },
    { offset: 1, color: "#1d2a52" },
  ])

  return (
    <window title="The Solid Runtime">
      <d-rect color={backgroundColor} />
      <view
        flex={1}
        gap={20}
        alignItems="center"
        justifyContent="center"
        paddingTop={safeArea().top}
        paddingBottom={safeArea().bottom}
      >
        <Logo size={300} animation="loop" />
        <text fontSize={40} color="#ccc">The Solid Runtime</text>
      </view>
    </window>
  )
}

render(() => <App />)

The app has these parts:

Change the text and save the file. The same window loads the app again and shows the change.

4. Pack the app

First, give the app an id that does not change. The last part of the id is the name of the output file. On Android, the id is the package name. The app's storage also uses the id as its key. In package.json, replace the null value of appId:

"solidrt": {
  "appId": "com.example.myapp",
  ...
}

Then run this command:

bun run pack

This command writes dist/myapp (dist/myapp.exe on Windows). This is one executable file that contains the runtime and your app. Run it as you run other programs. To make an Android APK, use bun run pack --apk. Packing is experimental. The sol pack reference gives more data about the icon, the capabilities that the app requests, and the other outputs.

Next steps