Create a Node.js app using Contentstack DataSync

This guide covers steps to create a Node.js-based app that fetches data from your infrastructure. We will create a web page 'about' in this tutorial from the data synced through Contentstack DataSync.

So, download the boilerplate code, configure it as required, and get started with the app.

Note: The boilerplate uses Filesystem as a database. You can change the storage if required.

Prerequisites

Set up the Server

  1. Clone the boilerplate
    Clone the boilerplate using the git clone command as follows:
    git clone https://github.com/contentstack/datasync-nodejs-website-boilerplate
    Once you download the boilerplate, you will see the following folder structure:
    Boilerplate SDK.png
    config: Holds configurations for different environments. When the app starts with environment variable NODE_ENV=development , the boilerplate picks the specified configuration i.e. development.js in our case.

    middlewares: Contains middleware. We have added a middleware to load partials such as header, footer, etc. to make them available in every page.

    models
    : Holds the Contentstack DataSync SDK initialization and exports Contentstack objects to query data.

    public
    : Put all your static files inside this folder.

    routes: All your routes in the application go here. 

    view: Contains templates for your pages — we have used the Nunjucks template engine. It also contains layouts for your pages and partials, such as header and footer.
  2. Install dependencies
    Open the command prompt and navigate to the project directory. Now, install npm dependencies by using the following command:
    npm install
  3. Edit the 'development.js' file
    By default, the app runs in the development environment. So go to the config folder, edit the development.js file, and specify details of your stack. Here is the sample configuration code for datasync-filesystem-sdk:
    const config = {
      sdk: 'datasync-filesystem-sdk',
      contentstack: {
        apikey: '',
        deliveryToken: '',
      },
      locales: [
        {
          code: 'en-us',
          relative_url_prefix: '/'
        },
        {
          code: 'es-es',
          relative_url_prefix: '/es/'
        }
      ],
      contentStore: {
        baseDir: './_contents'
      },
      port: 4000
    }
    
    module.exports = config
    You need to specify the path inside the baseDir parameter. This is the location from where your synced data will be fetched.
  4. Create an example web page 'about'
    Let's consider you are creating an 'about' web page. Import the 'about' content type and its entry from the schemaNentries folder to your stack. Also, import the content type and entries of header and footer to your stack. Read how to import content types and entries to your stack.

    1. Create an 'about' page
      Create an about.js file and copy-paste the following code in it. Place this file inside the routes folder
      const express = require('express');
      const router = express.Router();
      const Stack = require('../models/contentstack');
      router.get('/about', (req, res, next) => {
        const contentTypeUID = 'about';
      
      //Render the 'about.html' page as follows:
      
        Stack.contentType(contentTypeUID).entries()
          .find()
          .then(function success (result) {
            res.render('about.html', {
              about: result
            })
          }).catch(next)
      })
      
      module.exports = router
      Verify that route of the 'about' page and the UID of the 'about' content type is correct in the following line.
      router.get('/about', (req, res, next) => {
        const contentTypeUID = 'about';
    2. Create an 'about.html' template in the 'views' folder
      {%extends "layout/parent.html" %} {%block main_body %}
      {% set entry= about.entries[0] %}
      <div>
             {# Your contact_us title will be rendered #}
             <h1>{{entry.title }}</h1>
             {#add your body here using {{ entry.field_name }} #}
      </div>
      {% endblock %}
    3. Add your routes
      Open the index.js file which is inside the routes folder, and verify that the route for the"about" page is added correctly in the following code:
      module.exports = (app) => {
        app.use('/', require('../middlewares'))
        app.use('/', require('./home'))
        app.use('/', require('./about'))
      }
      

Start the server

Start the server with the following command:

npm start

Open the browser and check if the web page (about) you created is loading correctly by using the following address: localhost:4000/about

Boilerplate Config for MongoDB Datastore

If you want to use MongoDB as the database for storing data instead of Filesystem, you need to configure the MongoDB server and have it running.

Next Step

Build an example website using Contentstack DataSync

Related Topics

Was this article helpful?
top-arrow