Quickstart

In this tutorial we will show you how to setup both Contember Engine and Contember Admin to create your first project.

Prerequisites

Installed NPM version 6+
Installed Docker with Docker Compose

Step 1: Install and run Contember#

npm init @contember quickstart

It will create a new folder with basic Contember setup. After it is done:

cd quickstart

And then install dependencies:

Windows or Mac
Linux or WSL

docker-compose run admin npm install

We recommend to install dependencies directly in Docker

Then just

docker-compose up

And Contember is running

Admin at http://localhost:1480
API endpoints at http://localhost:1481 (you can authorize with token 0000000000000000000000000000000000000000)
- To connect to the GraphQL you can use pre-packed client (Apollo Playground) available at http://localhost:1481/playground
Adminer database management tool (Adminer) at http://localhost:1485
Minio local S3 provider at http://localhost:1483 (you can sign in with contembeer / contember credentials)
Mailhog testing SMTP at http://localhost:1484
PostgreSQL database at localhost:1482 (you can sign in with contember / contember credentials)

Step 2: Create first project#

Add new entity#

api/model/index.ts

import { SchemaDefinition as d } from '@contember/schema-definition';

export class Page {
    title = d.stringColumn()
    content = d.stringColumn()
}

npm run contember migrations:diff quickstart add-page

Select Yes and execute immediately.

Edit admin#

Add list page#

admin/pages/Pages.tsx

import { ListPage, PageLinkButton, Field } from "@contember/admin";

export const PageList = (
    <ListPage entities="Page" pageName="pages" rendererProps={{
        title: 'Pages',
        actions: <PageLinkButton to="pageNew">Add Page</PageLinkButton>,
    }} >
        <Field field="title" />
    </ListPage>
)

administration is running

Add create page#

admin/pages/Pages.tsx

import {
  ListPage,
  PageLinkButton,
  Field,
  CreatePage,
  TextField,
  TextAreaField
} from "@contember/admin";

export const PageList = (
...
)

export const PageCreate = (
    <CreatePage
        entity="Page"
        pageName="pageNew"
        rendererProps={{ title: 'Add page' }}
        redirectOnSuccess={(request, id) => ({
            ...request,
            pageName: 'page',
            parameters: {
                id,
            },
        })}
    >
        <TextField field="title" label="Title" />
        <TextAreaField field="content" label="content" />
    </CreatePage >
)

administration is running

Add edit page#

admin/pages/Pages.tsx

import {
  ListPage,
  PageLinkButton,
  Field,
  CreatePage,
  TextField,
  TextAreaField,
  EditPage
} from "@contember/admin";

export const PageList = (
...
)

export const PageCreate = (
...
)

export const PageEdit = (
    <EditPage
      entity="Page(id = $id)"
      pageName="page"
      rendererProps={{ title: 'Edit page' }}
    >
        <TextField field="title" label="Title" />
        <TextAreaField field="content" label="content" />
    </EditPage>
)

administration is running

Add pages to side menu#

admin/SideMenu.tsx

import { Menu } from '@contember/admin'

export const SideMenu = () => {
    return (
        <Menu>
            <Menu.Item>
                <Menu.Item title="Dashboard" to="dashboard" />
                <Menu.Item title="Pages" to="pages" />
            </Menu.Item>
        </Menu>
    )
}