Getting Started

What we will do:

Step 1: Get an account
Step 2: Create a project
Step 3: Start from the scratch
Step 4: Create content template
Step 5: Create a content item
Step 6: Access your content
Step 7: Display your content on a website
Step 8: Adding JavaScript
Step 9: F inishing Touches
What's Next?

This guide will provide you with a foundation for creating, publishing and showcasing your content using Nimvio. With the help of this introductory tutorial, you will construct a basic website powered by Nimvio, right from the beginning to the end. For those who are new to headless CMSs, this is an excellent starting point.

Step 1. Get an account

If you haven't yet created a Nimvio account, visit https://www.app.nimvio.com/sign-up/ to sign up for a free account. Afterwards, go to https://app.nimvio.com/ and sign in.

If you encounter any difficulties during the sign-up process, you can refer to the Get Started to Nimvo guide for assistance.

Step 2. Create a project

In Nimvio, you have the option to start your project either from scratch or by selecting a theme. Click the +New Project button to create a new Nimvio project.

Step 3. Start from the scratch

Select the "Start from Scratch" option to initiate a project and provide a name for your new project.

Step 4. Create content template

Content templates define the structure of a piece of content – a content item. They are made of content elements such as texts and images. As its name suggests, it provides a template for content that can be re-used in the future.

A content template can be applied to a single content item, such as a homepage, or multiple content items, such as articles that share a common Article content template.

Now it's time to create a content template for a homepage, which should consist of a headline, some text, and an image.

Access your newly created project by clicking on its name.
Navigate to the Content Template menu and select the "+ New Template" button.
In the Content Template editor:
- Drag in a Text element and name it Headline.
- Drag in a Rich text element and name it Body text.
- Drag in an Media element and name it Picture.
Click Save

Congratulations! Your content template is now available for use.

To view the created content template, click on the pencil icon located in the content template table.

Step 5. Create a content item

You can now create a content item based on the new Homepage content template. A content item is an instance of a content template.

Step 6. Access your content

Each content item can be accessed at a specific URL similar to this one:

https://api.nimvio.com/cda/rest/v1/<ENVIRONMENT_ID>/contents

The REST API URL for published content is available on the information sidebar panel in the right.

You can alson construct the URL manually by following the below steps:

Replace <ENVIRONMENT_ID> with the ID of your project:
1. Navigate to Settings menu, then in Project settings, click General.
2. In the Environment ID field, click the icon on the right.
Open the URL in your browser.

For example, the URL can look like this:

https://api.nimvio.com/cda/rest/v1/Project_2eb07e5e-2e66-4cba-3369-d8d597fb7e81/contents

The API will return your content item as a structured JSON object that is easy to parse by any programming language.


{
   "status": 200,
   "data": [
      {
         "CreatedAt": "2023-05-12T13:18:09.608Z",
         "PublishedBy": "Rudy Nimvio",
         "Name": "Hello World",
         "UpdatedBy": "Rudy Nimvio",
         "TemplateName": "Homepage",
         "Status": "Published",
         "CreatedBy": "Rudy Nimvio",
         "Data": {
            "headline": "Hello World!",
            "bodyText": "<p>Nimvio offers a lot of flexibility, whether you want to move quickly and see the final result or prefer to dive deeper into the product. We have you covered.<\/p>\n",
            "picture": {
               "Type": "Reference",
               "ReferenceType": "Media",
               "Id": "Media_478ba714-473e-4cfc-b0f7-62808da65b45",
               "MediaUrl": "https://media.nimvio.com/Project_2eb07e5e-2e66-4cba-b369-d8d597fb7e81/Media/logo-nimvio%402x_published.png",
               "AltText": ""
            }
         },
         "UpdatedAt": "2023-05-12T15:07:55.783Z",
         "PublishedAt": "2023-05-12T15:07:55.783Z",
         "TemplateID": "Template_e27950a8-7fb5-443a-b27c-ee1ac965c7fe",
         "HasChild": false,
         "ChildDepth": 0,
         "ContentID": "Content_b2860c7a-db2f-4b1b-aae9-b31da8baed1c"
      }
   ],
   "totalItems": 1,
   "totalPages": 1
}

Step 7. Display your content on a website

In this part of the guide, you will learn how to use JavaScript to display the content from a JSON object onto a web page. The JSON response contains the three elements as objects which are specified by their field name: headline, bodyText, and picture.

Adding HTML

First, you will create an HTML file and declare which HTML elements you want to populate. The order of elements in the HTML file is the order in which the content will appear on the website. Create a new, blank text file and name it index.html.

Insert the following code into the HTML file:


<!DOCTYPE html>
<html>

<head>
    <title>Hello World with Nimvio</title>
    <script src="main.js" async defer></script>
</head>

<body>
    <!-- The HTML elements are there only to display data from Nimvio.
        Using JavaScript, you'll pull the content from your Nimvio project into the elements -->
    <img id="banner">
    <h1 id="headline"></h1>
    <p id="bodyText"></p>
</body>

</html>

Step 8. Adding JavaScript

Let’s populate the <h1>, <img>, and <p> elements in the HTML file with content from Nimvio:

The headline with the value “Hello World!” goes into the <h1> element,
the bodyText with the paragraph below the logo goes into the <p> element,
and the picture, the value of which is the logo URL, goes into the <img> element.

Now, create a file named main.js and insert the following code:


const API_CD_URL =
  "https://api.nimvio.com/cda/rest/v1/Project_2eb07e5e-2e66-4cba-b369-d8d597fb7e81/contents";

// Fetch json data from Nimvio API CD and return it
async function fetchJSONData() {
  const response = await fetch(API_CD_URL);
  const jsonData = await response.json();

  return jsonData;
}

// Processes the retrieved data and displays it on the page.
function processData(response) {
  const { Data } = response.data[0];
  const bodyText = Data.bodyText;
  const headline = Data.headline;
  const picture = Data.picture.MediaUrl;

  document.getElementById("bodyText").innerHTML = bodyText;
  document.getElementById("headline").append(headline);
  document.getElementById("banner").src = picture;
}

// Render function
async function render() {
  const data = await fetchJSONData();
  processData(data);
}

// Call render function
render();

Step 9. Finishing Touches

Fantastic! You have finished the journey to create your website from scratch in Nimvio. To preview your website, simply open the index.html file that you created before. When you merge the two code examples and add a bit of CSS, the result will appear as shown in the image below.

What's next?

Congratulations! You have arrived at the end of your website building journey. To learn on how to deploy and host your website, please refer to the following guide on Website Provisioning Outside Nimvio. Keep exploring others below:

Developer

Adding HTML