Quick start

In this short guide, you'll learn Jitar's key concepts and experience the setup process. We'll start with creating a new project followed by a step-by-step explanation of the concepts.

1. Create a new project

The fastest way to get started is creating a new project with our CLI tool. We'll use the React template in this section, but you can also use one of our other templates: vue, svelte, solidjs, lit or jitar-only. Also, we use jitar-react as the project name, but feel free to use any other name.

npm create jitar@latest jitar-react -- --template=react

After the installation, run the commands that are prompted.

Done. Now run:

  cd jitar-react
  npm install
  npm run build
  npm run standalone

Now you should be able to access the application on http://localhost:3000

2. Add your functions

Functions are the main building blocks of Jitar applications. The created application already has one in the src/domain folder, so let's take a look.

// src/domain/sayHello.ts
export async function sayHello(name: string): Promise<string>
{
    return `Hello, ${name}!`
}

Looks like a normal function, right? The async might seem unnecessary, but is actually an important addition. The caller of the function does not know about its location. The function might be locally available, but can also be on another server. Making a function async ensures that it can be run, no matter where it resides.

Functions can be imported and called like any normal async function.

// src/App.tsx
/* other imports */

import { sayHello } from './domain/sayHello';

const message = await sayHello('World');

function App() { /* … */ }

Jitar will automatically provide a remote implementation if the function is not locally available.

ADDITIONAL INFO

Besides functions there are more useful building blocks. You can find out more in the FUNDAMENTALS section.

3. Configure what runs on the server

To tell Jitar if a function runs on the client or the server, the application is split into groups of modules, called segments. Each segment has its own configuration file. In the project we can find one in the segments folder.

// segments/default.segment.json
{
    "./domain/sayHello": { "sayHello": { "access": "public" } }
}

Segments are named, and their names are stored in the filename. In this case the segment is called ‘default’. The rest of the filename makes it a detectable segment configuration, because Jitar scans the project to find them.

Segment configurations work like the JavaScript module system. In this case we export the sayHello function from ./domain/sayHello module file. Additionally we set the access level to public so it can be called from the client. The configuration can be extended by simply adding functions.

Try yourself: remove the function from the configuration and restart the application. Note that the client doesn't make a call to the server anymore.

ADDITIONAL INFO

More detailed information about segments can be found in the FUNDAMENtALS section.

4. Run your application

Applications can be run in a single Jitar instance for development and multiple distributed Jitar instances in production.

Jitar provides multiple types of services that can be configured to fit your needs at any time. In the project we can find a configuration in the services folder for a single instance setup.

// services/standalone.json
{
    "url": "http://127.0.0.1:3000",
    "standalone":
    {
        "source": "./dist",
        "assets": ["index.html", "main.js", "App.js", "vite.svg", "assets/**/*"]
    }
}

Jitar creates segment bundles and local and remote implementations required to run the application in any setup. To boost performance the output will be cached. By default the cache will be stored in the .jitar folder, but you can configure another folder if desired.

Jitar also acts like a web server to serve the frontend components. By default it serves the index.html file when no specific file is requested, but you can configure another file. For security reasons, all assets must be specified in order to become accessible.

The configuration needs to be supplied when starting a Jitar instance. To start Jitar, a simple bootstrapper script is required that starts a server.

//src/jitar.ts
import { buildServer } from 'jitar';

const moduleImporter = async (specifier: string) => import(specifier);
const server = await buildServer(moduleImporter);

process.on('SIGINT', async () => server.stop());

server.start();

This script can be reused for every application running on Jitar.

With everything in place we can run the application with the following command.

node --experimental-network-imports dist/jitar.js --config=services/standalone.json

NOTE

Node needs the --experimental-network-imports flag in order to import functions and other components from a remote location.

The project provides a script containing the command in the package.json file, so we can also start Jitar like this:

npm run standalone

What's next?

Congratulations, you now know the basics of Jitar! Check out the FUNDAMENTALS section for more information on the building blocks for building applications and the runtime services for running them.

If you want to learn how to build great applications with Jitar, you can check out the DEVELOP section.

More information on the deploying Jitar applications can be found in the DEPLOY section section.