Your first app

This page walks through a small app with a front end and no back end. It greets the person who opens it, names its window after them, and sends them a notification when they press a button.

What you need

• A server where you can install apps. See Try it on your own server for who can.
• Node.js and npm.
• Somewhere to host static files on an https address, like https://hello.example.com/.

Make it

1. isn't published to npm. Solel's own apps use it straight from the repository, and yours can too. Clone the repository, then make a Vite project beside it:

   git clone https://github.com/Solel-io/solel-os.git
   npm create vite@latest hello -- --template vanilla-ts
   cd hello
   npm install

2. Point @solel-io/sdk at the SDK's source. Make vite.config.ts:

   import { defineConfig } from 'vite';
   import { fileURLToPath } from 'node:url';
   
   export default defineConfig({
     base: './',
     resolve: {
       alias: {
         '@solel-io/sdk': fileURLToPath(new URL('../solel-os/packages/sdk/src/index.ts', import.meta.url)),
       },
     },
   });

   Then add the same path to compilerOptions in tsconfig.json, so TypeScript finds it too:

   "paths": { "@solel-io/sdk": ["../solel-os/packages/sdk/src/index.ts"] }

3. In index.html, replace <div id="app"></div> with a heading and a button:

   <h1 id="greeting">Hello</h1>
   <button id="notify">Send me a notification</button>

4. Replace everything in src/main.ts with:

   import { solel } from '@solel-io/sdk';
   
   const greeting = document.querySelector<HTMLHeadingElement>('#greeting')!;
   const button = document.querySelector<HTMLButtonElement>('#notify')!;
   
   solel.ready().then(
     (app) => {
       greeting.textContent = `Hello, ${app.user.name}`;
       solel.setTitle(`Hello, ${app.user.name}`);
       button.addEventListener('click', () => {
         solel.notify({ title: 'Hello from Hello', body: 'Your app can reach you.' })
           .catch((e: Error) => { greeting.textContent = e.message; });
       });
     },
     () => { greeting.textContent = 'Open Hello from your Solel desktop.'; },
   );

   ready() fails when the page isn't opened inside , so the app says where to open it instead.

5. Describe the app in a solel-app.json:

   {
     "schema": 1,
     "id": "com.example.hello",
     "name": "Hello",
     "version": "0.1.0",
     "description": "Says hello to whoever opens it.",
     "publisher": "Example",
     "grants": ["notify"],
     "layouts": ["desktop", "phone"],
     "frontend": { "url": "https://hello.example.com/" }
   }

6. Build it with npm run build, and put what's in dist/ at https://hello.example.com/.

Install it

Install solel-app.json on your server as Try it on your own server describes. You'll be asked to allow it to send you notifications. Then open Hello from the dock.

Where to go next

• The manifest has every field solel-app.json can hold.
• To reach people's files, calendars or contacts, give your app a back end: see Back ends and workers.
• Components shows how to build the interface with Daybreak, so your app matches Solel's own.