Created with Fabric.js 5.3.0

Vovk.ts Interactive Examples

Basic Controller Example
 
export default class BasicController {
  @get('greeting')
  static getHello() {
    return { greeting: 'Hello world!' };
  }
}
export default class BasicController {
  @get('greeting')
  static getHello() {
    return { greeting: 'Hello world!' };
  }
}
Basic Controller with Service
 
export default class BasicService {
  static getHello() {
    return { greeting: 'Hello world!' };
  }
}      
export default class BasicService {
  static getHello() {
    return { greeting: 'Hello world!' };
  }
}
Form Example
 
setResponse(
  await FormController.createUser({
    body: { name, email },
  })
);
setResponse(
  await FormController.createUser({
    body: { name, email },
  })
);
React Hook Form Example
 
const {
  register,
  handleSubmit,
} = useForm<VovkClientBody</* ... */>({
  resolver: zodResolver(userSchema),
});
const {
  register,
  handleSubmit,
} = useForm<VovkClientBody</* ... */>({
  resolver: zodResolver(userSchema),
});
Server Component Example
 
export default async function ServerComponent() {
  const response = await Controller.getHello();

  return <div>{response.greeting}</div>;
}        
export default async function ServerComponent() {
  const response = await Controller.getHello();

  return <div>{response.greeting}</div>;
}
Stream Example
 
using stream = await StreamController.streamTokens();

for await (const token of stream) {
  setTokens((tokens) => [...tokens, token]);
}
using stream = await StreamController.streamTokens();

for await (const token of stream) {
  setTokens((tokens) => [...tokens, token]);
}
Stream using Response Object
 
@get('tokens')
static async streamTokens() {
  const response = new StreamResponse<Token>();
  void this.streamService.streamTokens(response);
  return response;
}
@get('tokens')
static async streamTokens() {
  const response = new StreamResponse<Token>();
  void this.streamService.streamTokens(response);
  return response;
}
OpenAI Chat Example
 
yield* await openai.chat.completions.create({
  messages,
  model: 'gpt-3.5-turbo',
  stream: true,
});
yield* await openai.chat.completions.create({
  messages,
  model: 'gpt-3.5-turbo',
  stream: true,
});
Worker Service Class Example
 
WorkerService.use(/* ... */);

await WorkerService.factorize(BigInt(value)));
WorkerService.use(/* ... */);

await WorkerService.factorize(BigInt(value)));
Worker Service Class Generator Example
 
for await (
  const pi of WorkerService.approximatePi(/* ... */)
) {
  setPi(pi);
}
for await (
  const pi of WorkerService.approximatePi(/* ... */)
) {
  setPi(pi);
}

Other Examples

React Native Example

import { GreetingController } from 'vovk-client';

// ...
<Pressable 
    onPress={async () => {
        setGreetingResponse(
            await GreetingController.getGreeting()
        );
    }}
>
    <Text>Get Greeting</Text>
</Pressable>
import { GreetingController } from 'vovk-client';

// ...
<Pressable 
    onPress={async () => {
        setGreetingResponse(
            await GreetingController.getGreeting()
        );
    }}
>
    <Text>Get Greeting</Text>
</Pressable>

Next.js + Vovk.ts can be used as a back-end for React Native applications. For details see vovk-react-native-example repository.

Bundle the Client

// webpack.config.js          
module.exports = {
  entry: {
    index: './index.ts',
  },
  devtool: 'inline-source-map',
  // ...
};
// webpack.config.js          
module.exports = {
  entry: {
    index: './index.ts',
  },
  devtool: 'inline-source-map',
  // ...
};

The client REST API library bundle can be compiled into a single package and distributed thru NPM, CDN or any other way. The examples on this page are bundled with Webpack and served from NPM as vovk-examples package that's, in its turn is used by examples on vovk.dev website to render live demos.

Static JSON API

import { initVovk, generateStaticAPI } from 'vovk';

// ...

export function generateStaticParams() {
  return generateStaticAPI(controllers);
}

export const { GET } = initVovk({ controllers, workers });

import { initVovk, generateStaticAPI } from 'vovk';

// ...

export function generateStaticParams() {
  return generateStaticAPI(controllers);
}

export const { GET } = initVovk({ controllers, workers });

Thanks to generateStaticParams Next.js feature it's possible to generate static API that is compiled at build time and served from a static hosting. This approach is used at one of the examples on vovk.dev that is hosted on Github Pages.