1. Install Canner CLI
Make sure you have already installed NodeJS and use the command below to install
@canner/cli globally. And as the official NPM docs mentioned, we also recommend using a Node version manager to prevent the EACCESS issue.
npm install -g @canner/cli
Check the installation with
- Your Node version must at least >= 6.10.
2. Initialize project
canner.schema.js is the most important one, which defines the data model and UIs of your CMS. It's written with
jsx, a XML-like language, and is easy to learn and understand.
canner.cloud.js are both configurations for hosting, such as the theme, sidebar menu, data sources, ...etc. The difference between them are the former one is used for self-hosting, which means you can locally serve and host your CMS and GraphQL APIs. The latter one is for Canner Cloud platform, which helps you to host the CMS on cannercms.com.
In this step, we create the three files with CLI. You can take a look at the files, and edit them by the following guides.
Now, let's create a empty folder and enter it.
mkdir my-cms cd my-cms
Initialize the package.json and install the dependencies:
npm init npm install --save-dev @gqlify/server
It ask you to select a schema template. Feel free to select any one of them, you can easily change afterwards.
Initializing... What template do you want to create? Blog ? This will override the file and folder below, do you want to continue? /Users/siou/Code/test10/canner.schema.js /Users/siou/Code/test10/schema /Users/siou/Code/test10/components Yes ✔ Initialized Next Steps: - Host your CMS: canner start - Follow the docs below to connect your data source: Firebase: http://www.canner.io/docs/next/data-source-firebase Firestore: http://www.canner.io/docs/next/data-source-firestore - Deploy to Canner cloud: http://www.canner.io/docs/next/guides-deploy-to-canner
And then, there will be serveral files and folders under the directory.
canner.schema.js and schema/\*.schema.js: The schema of the CMS, defines the data model and UI.
components/\*.js: The customized components, not every projects have this.
canner.server.js: The configuration of OSS version, you can change the dataSources, i18n, sidebar, style, ...etc.
canner.cloud.js: The configuration of Cloud version, you can change the dataSources, i18n, sidebar, style, ...etc.
3. Host the CMS locally
canner start, this command will read the configuration from
canner.server.js and serve it. You can edit it by the following guides.
When running the command, it displays an awesome dashboard displaying the progress of the static files building, server status, and server logs, ...etc.
Here are the actions actually doing in the background.
- Build static files:
The static files of the CMS is generated under
- Build json schema:
The JSON schema of your canner schema is generated called
- Host the CMS
Host the path
- Run the GraphQL server
canner.schema.jsonto GQLify data modal, and the endpoint will expose at
After the line
Server ready on port 3000 shows on dashboard, you can go to
http://localhost:3000 to see your CMS and login with the default username and password,
After loging in, here is your CMS!
4. Next Step
You can follow the instruction below to configurate your CMS.