Node.js flat CMS Tutorial with Enduro.js

A tutorial on how to get started with with Enduro.js, a Node.js flat CMS.

Prologue

There are plenty of CMS out there, but very few of them are written in Node.js and are easy to use, in this guide I'm going to explain how to get started with one them that I liked so far: Enduro.js

Installation

You can easily install it through $ npm i -g enduro, then just use the cli commands to generate a new project: in this tutorial we are going to build a basic website homepage for an ipothetical small business, so we can run $ enduro create BusinessWebsite in the terminal and then move in that directory.

Project Structure

On a fresh install, like we did, Enduro.js create five main folder for us:

  • app: this folder contains two important elements, the abstractor folder, collecting all the functions that allow to manipulate contents before they get served to the html templates, acting like a sort of middleware and the app.js file, in which you are able to write a complete Express.js app: if you are looking forward to build some APIs for your CMS, that's the place to put them;
  • assets: like the name suggests is the place where you should put all the project assets, like stylesheets, javascript, template helpers ...
  • cms: most important folder, contains the contents and the admin configuration;
  • components: the place to put some template blocks or reusable components like a footer or a sidebar;
  • pages: the actual website pages, the frontend. Enduro expects to find a file with the same name of the corresponding entity in the cms folder in order to provide the correct contents to it.

Configuring the CMS

As you can see inside the cms folder you have a index.js file, this is basically your homepage, delete all its content so we can start fresh.

The first contents to manage in a webpage are probably meta tags, so google and the other web crawler can find and index your site easily, let's add a metaTags key in index.js


{
  $meta_tags_expander: true,
  $meta_tags_info: 'Used by google to index the website',
  meta_tags: {

  }
}

metaTags config

What we did here: we declared an object meta_tags which will contain all the meta tags like title, description, og:title and so on; then with a particular sintax based on '$' + field_name + '_' + option keyword we can customize how the field will appear in the admin panel. In this case we set expander to true, so the whole box/section about meta tags can be collapsed or expanded with a button and info to a string that contains a help message for the user who is going to manage the website content.

We can keep adding contents, like a title, a description and an image for the og:image tag, index.js should looks like this:


{
  $meta_tags_expander: true,
  $meta_tags_info: 'Used by google to index the website',
  meta_tags: {
    $title_label: 'meta title',
    title: '',

    $description_type: 'textarea',
    $description_label: 'meta description',
    description: '',

    $og_image_type: 'image',
    $og_image_label: 'og image',
    og_image: ''
  }
}
  

keep going on metaTags config

Things to note here: we used the _label property to specify a label with a more human friendly value; we set description to display as a textarea in order to better suit mid length text; the same way we specified that og_image is an image, so the admin will provide a thumbnail and an upload logic for it.

Start the app

Before starting the actual app, we need to create an admin account in order to access the CMS, we can easily do that by running $ enduro addadmin , then we can finally start the app in dev mode with the $ enduro command.

As printed in the terminal, your app should now be running on port :5000 and the admin panel should be accessible at localhost:5000/admin, you can log in with the credentials provided before when creating the admin. Once authenticated you can change and manage your content and save them with the publish button on the top right corner of the screen.

Conclusion

With this first part we covered some basic concepts about Enduro.js like folder structure and started adding manageble contents, in the next tutorial we are going to add more field's type, like array of objects, check it out here.

You may also like

Node.js flat CMS Tutorial with Enduro.js - Part Two

Second part of a tutorial on how to get started with with Enduro.js, a Node.js flat CMS.

Tags: Node.js CMS

Read more

Frontend pipeline with webpack 2: setting up babel (1 of 2)

An introduction about frontend pipeline in 2017 and how to build one from scratch using webpack 2: setting up babel traspiler.

Tags: webpack 2

Read more

Javascript promises guide: using async await in both frontend and backend

A guide about javascript promises, what they are and how to use them effectively with async await.

Tags: JavaScript ES6 Node.js

Read more
See all