Service-Oriented Web Framework
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
.gitignore
LICENCE
Readme.md
index.ts
package-lock.json
package.json
tsconfig.json

Readme.md

Zox.js

Service-Oriented Web Framework.

Build scalable web apps and services with React and GraphQL or generate Static Sites.

VISIT THE WEBSITE

Get started with a new project:

npm i zox zox-plugins

Add support for GraphQL:

npm i graphql-plugins zox-graphql-ws

Render React Components on the Server-Side:

npm i zox-react

Use handlebars templates:

npm i zox-handlebars

A simple controller

Controllers implement a handle() method that returns a Response object which will be in charge of sending the HTTP response.

@Route({
    route: '/page/hello-world'
})
export class MyPage implements IController
{
    public handle(): IResponse
    {
        return new StringResponse('Hello World');
    }
}

Page controller

A PageController is a base controller class that returns our page in a RenderResponse. As the name suggests this class will render our template and add the required js, css and meta tags, before sending the response.

@Route({
    route: '/page/hello-world'
})
export class MyPage extends PageController
{
    public page()
    {
        const renderable = this.container.create(
            Renderable,
            'my-template-name'
        );
        renderable.text = 'Hello World';
        return renderable;
    }
}

A simple API

Creating API endpoints is as simple as creating a controller that returns a JsonResponse.

@Route({
    route: '/api/user/:id'
})
export class MyApi extends Controller
{
    public handle(): IResponse
    {
        const data = users.find(u => u.id == this.params.id);
        return new JsonResponse(data);
    }
}

GraphQL resolvers

With GraphQL we get to explicitly define types of inputs and outputs of our endpoints.

@Query('user(id: ID!): User', UserDef)
export class UserQuery extends ResolverBase
{
    public resolve(root, args, context): Array<UserData>
    {
        return users.find(u => u.id == args.id);
    }
}

React SPA

You can simply return a ReactRenderable with your App component and continue with your regular React workflow.

@Route({
    route: '/react/hello-world'
})
export class MyReactPage extends PageController
{
    public page()
    {
        return this.container.create(
            ReactRenderable,
            <App text='Hello World' />
        );
    }
}