If you're want to quickly see what Contember can do, check out our Headless CMS template. It's the easiest way to try out what Contember can do in minutes.
In this tutorial we will show you how to setup both Contember Engine and Contember Admin to create your first project.
It will create a new folder with basic Contember setup. After it is done:
And then install dependencies:
And you're ready to go. Just start Docker containers and Contember will be running.
Now, administration UI should be running on address http://localhost:1480.
- Admin UI at http://localhost:1480
- API endpoints at http://localhost:1481 (you can authorize with token
For advanced use-cases there is also:
- Adminer database management tool 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).
From the first step you should have a folder structure that looks like this:
First you have to tell Contember Engine, how your data model looks like. The
init command automatically created
api/model/index.ts file, so go there.
Here you start defining your project schema. Really simple example looks like this:
SchemaDefinitionso you'll get TypeScript autocompletion.
- Define your first entity -
Article. For this example let's just add two columns named
content, both are
Then you need to generate a database migration for Contember Engine:
npm run contember is a Contember CLI, if you call this without any arguments you'll see all the available commands.
migrations:diff command. It goes through your schema and generates migration - instructions for Contember how to get from previous state to your new one.
This command needs two parameters: first is name of your project (
quickstart in our example) and then name your migration. It can be anything you want.
Run this command and choose an option
Yes and execute immediately. It will create your migration and after confirmation execute it. Now if you would look into your database, you would see there a table
article with three columns:
Now we have something we want to edit in UI. Let's start by adding a listing page for our articles.
admin/pages and create new file
@contember/adminpackage for TypeScript autocompletion.
articleList. The export name is used for linking to the page and in URL.
DataGridPagecomponent to show the data in a simple datagrid.
- Tell it which entities you'd like to edit. In our case it's
Article(it has to be the same name we used in the model).
TextCellto add text column.
If you go to localhost:1480/articles you'll see list of your articles. Which is empty as we didn't add any data there yet.
Let's add some data.
- For simplicity, we'll add it to the same file.
- This time we'll use
CreatePagecomponent exported as
- We'll tell it what we want to add (
- We'll use two new components -
RichTextFieldand tell them what fields to edit.
But it doesn't work very well. One of the things missing is to go to edit mode after you created a new article. So let's start by adding an edit page:
For simplicity, we'll add it to the same file as well. It looks almost the same as the create page - but we have to tell it which article to edit:
Let's use it. We'll redirect users from our create page to the edit page after the article is successfully created:
This is done with
redirectOnSuccess prop where we specify link to page where user should be redirected.
Now if you create a new article you're automatically redirected to the edit page.
What's missing is an edit and delete button in the list of pages.
- We've added two
- First with
articleEditpage and passing
- Second with delete button provided by
- Minor touch is use of
shrunkwith tells the cell to be as small as possible.
One last thing is to add our pages to the left sidebar:
And that's it! You have just created a simple data model and created custom interface, so you can edit the data.
We recommend reading Content API topic however if you're looking to quickly play with the API, we've prepared Insomnia project for you to import and quickly try it out. To use it download it here and just drag&drop it to Insomnia.