DEV Community: Surya Shakti

Build complete website with Docusaurus

Surya Shakti — Sat, 22 Oct 2022 15:40:27 +0000

In this post, we'll look at how to build an end to end product website including landing page(s), docs pages and blogs using Docusaurus.

Installing Docusaurus

For building a Docusaurus website we have to install it first with a starter website skeleton. Run the below command:

npx create-docusaurus@latest my-website classic

After the successful installation you will get the basic website which you can run right away and start customizing it according to you needs.

Seeing website in development server

To run the development server go to the root directory of the project and run the the following command.

npm start

After starting the development server you will can see your site on http://localhost:3000/. It will look something like the following image.

This boiler plate we get after installing the Docusaurus have the following folder structure

my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

Here we can see different directories which contain different files. Let us discuss about all those things.
On first we have the blog directory. It contains the Markdown files of the blogs you want to show in the website.
The docs directory contains the docs of the website.
In src you have CSS files and your pages directory which have your landing page of the website and here you can add other custom pages to according to your requirements.
In static directory we have our assets like images and company logo.

Customizing Home Page

src/pages/index.js is the homepage for the website. It exports a React component that is rendered between navbar and footer. we will also see how to customise navbar and footer later.

The boiler plate code of the home page is :

import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';

import styles from './index.module.css';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro">
            Docusaurus Tutorial - 5min ⏱️
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

you can edit here like you would edit a normal react component and it will change in the website.

Customizing Navbar

In the docusaurus.config.js we have themeConfig object where we can customize our Navbar and Footer.

For navbar customization, we can do it in this object

 navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'doc',
            docId: 'intro',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],

Here in title you can give title on the website. In logo you can add the company's logo. In items you can have the the links of different pages or different sections.
The key position in item object decides the position of that item in the navbar.

Customizing the footer

footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },

In links object each object is a column in the footer which contains links.

Creating a new page

To create a new page for your website you can add it in src/pages directory.

├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
│       └── new-page.js

Here as we added new-page.js it became a route itself.
you can navigate to /new-page in the browser to see.

Conclusion

In this post we saw how to setup a custom website with Docusaurus and also learnt how to customize the navbar, footer etc.

Logging for your Node.js app

Surya Shakti — Thu, 22 Sep 2022 07:03:31 +0000

Introduction

In this article we will learn how we can store logs of Node.js application into parseable using Winston library. We'll look at what is logging and why it is important.

What is logging?
Using winston in a Node.js application
sending those logs to the parseable

What is logging?

Logging is the process of recording application events and data to a log file or any other sources, for the purpose of analyzing the system.

Logs help developers to find the error, track the source of the bug and fix it. In Node.js it is critical to structure the application logs. when we are at the development phase we can use console.log to find the problems and to get the information you need.

But once the application is in production we cannot use the console.log any more.

Using winston in a Node.js application

I assume you have a node.js application, now to install winston & winston-transport in your project run the following commands.

npm install winston
npm install winston-transport

Now our aim is to replace all the console messages from the application with the winston logger. So Just for example if you have these three event logs in your node.js application which you want to store in parseable using winston library.

connsole.warn('Got mutiple elements with same id');
console.error('Login Failed. Invalid ID');
console.info('Events posted successfully.');

Configuring Winston in Node.js app

Create a 'logger' folder in the root directory where we will configure winston and send the logs to parseable.
Now in logger/index.js add following code

const winston = require("winston");
const { combine, timestamp, label, printf } = winston.format;
const Transport = require("winston-transport");
var axios = require("axios");

const myFormat = printf(({ level, message, label, timestamp }) => {
  return JSON.stringify({
    timestamp: timestamp,
    level: level,
    message: message,
  });
});

class CustomTransport extends Transport {
  constructor(opts) {
    super(opts);
  }
  log(info, callback) {
    console.info(info);
    var data = JSON.stringify([info]);

    var config = {
      method: "post",
      url: `https://demo.parseable.io/api/v1/logstream/${streamName}`,
      headers: {
        "X-P-META-Tag": "Owner",
        "X-P-META-Tag": "Host",
        "X-P-META-Tag": "Host.owner",
        Authorization: `Basic ${key}`,
        "Content-Type": "application/json",
      },
      data: data,
    };

    axios(config)
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });

    callback();
  }
}

const devLogger = () => {
  const transport = new CustomTransport({});

  return winston.createLogger({
    level: "debug",
    format: combine(label(), timestamp(), myFormat),
    transports: [transport],
  });
};


let logger = null;

if (process.env.NODE_ENV !== "production") {
  logger = devLogger()  
}

module.exports = logger;

Here we are configuring winston in our node.js application and sending the logs to parseable.

Let's discuss this code in parts for better understanding.

Initializing winston logger instance

const devLogger = () => {
  const transport = new CustomTransport({});
  return winston.createLogger({
    level: "debug",
    format: combine(label(), timestamp(), myFormat),
    transports: [transport],
  });
};

The snippet above contains the initialization of a Winston logger instance. Here we specify the log level for this specific logger instance using the npm log level standard, format in which logs will be stored and


 that specifies where the logs data will go. In our case we will send it to the parseable.



> **Setting custom format of the log data**
>
>>

 ```js 
const myFormat = printf(({ level, message, label, timestamp }) => {
  return JSON.stringify({
    timestamp: timestamp,
    level: level,
    message: message,
  });
});

The snippet above specifies the format of the log data in which it will be stored.

Sending the log data to parseable

class CustomTransport extends Transport {
  constructor(opts) {
    super(opts);
  }
  log(info, callback) {
    console.info(info);
    var data = JSON.stringify([info]);
    var config = {
      method: "post",
      url: `https://demo.parseable.io/api/v1/logstream/${streamName}`,
      headers: {
        "X-P-META-Tag": "Owner",
        "X-P-META-Tag": "Host",
        "X-P-META-Tag": "Host.owner",
        Authorization: `Basic ${key}`,
        "Content-Type": "application/json",
      },
      data: data,
    };
    axios(config)
      .then(function (response) {
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
    callback();
  }
}

The snippet above is responsible for sending the log data to the parseable. here streamName is the log stream you have created in parseable. and the key is the authentication key for accessing the parseable.

calling the logger function

let logger = null;
if (process.env.NODE_ENV !== "production") {
  logger = devLogger()  
}

You may not want to store the logs in parseable in development phase then you can see them on console to test it and when in production mode you can send it to parseable. The snippet above calls the logger function according to your requirements. you can also call the function directly if you don't want this conditional calling.

Then we can use logger instead of console in our application.

const logger = require('./logger')

logger.warn('Got mutiple elements with same id')
logger.error('Login Failed. Invalid ID')
logger.info('Events posted successfully.')

Conclusion

Hurray!!🥳🥳🥳

You have successfully integrated parseable with your node.js application. now you can run your application and all the events you have replaced with logger will be posted to parseable and you can check in the logstream you created earlier.

Logging for your frontend apps

Surya Shakti — Mon, 19 Sep 2022 11:46:24 +0000

Logging is one of the key activities when you set out to build a reliable piece of software. Yet, we've seen developers putting off logging setup for future. This can be largely attributed to unavailability of simple, developer friendly logging platforms that just work.

In this post we'll take a look at how to configure a React app to send logs (over HTTP) to Parseable - an open source, developer friendly log storage and query platform.

The Setup

While Parseable is FOSS and can be setup anywhere, we'll use the public demo instance to avoid the setup and instead focus on the react app side of things.

I'll use the Pino JS Logger as the logging client.

Create a React app

Ideally you may have a react app available that you want to add logging for. In case you're starting from scratch, create a react application first so that we can add logging to the app.

npx create-react-app my-project-demo

Setup Pino

Install Pino so we can use it as a library in the react app.

npm install pino

Once installed successfully, create a directory named src/loggers inside your react app source. We'll initialise Pino library here, to send logs to Parseable.

Create a file src/loggers/index.js and paste this following code.

import pino from "pino";

const send = async function (level, logEvent, a, b) {
  const url = "https://demo.parseable.io/api/v1/logstream/pinotest";

  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: "Basic cGFyc2VhYmxlOnBhcnNlYWJsZQ==",
      "Content-Type": "application/json",
    },
    body: JSON.stringify([logEvent]),
  });
  console.log(response);
};

const logger = pino({
  browser: {
    serialize: true,
    asObject: true,
    transmit: {
      send,
    },
  },
});

export default logger;

Note that the Parseable URL https://demo.parseable.io/api/v1/logstream/pinotest points to the pinotest stream on Demo Parseable instance. This is a public instance to demonstrate Parseable UI. Please don't post any sensitive / production logs to the URL. Refer to Parseable Docs to start your own Parseable instance.

Add logging to the app

Now we can add logs to the react app we created initially.

import logger from "./loggers";
logger.info("test log! pinotest stream from reactjs application.");
function App() {
  return <div className="App">ReactJs logs to parseable</div>;
}
export default App;

That is all! You have successfully integrated parseable with your React app.

All the events you log with the logger will be posted to Parseable and you can check in the log stream you created earlier.

Conclusion

In this post we learnt about how to setup and configure a react app to send logs to Parseable - a simple, developer friendly log storage platform. We were able to do this with just few lines of code.

With this setup, all the logs are stored securely and efficiently on a remote machine. Logs are available in seconds for auditing and debugging purposes.

Links:
[1] Parseable Github: https://github.com/parseablehq/parseable
[2] Parseable Docs: https://www.parseable.io/docs/introduction
[3] Pino Github: https://github.com/pinojs/pino
[4] Pino Docs: https://getpino.io/

DEV Community: Surya Shakti

Build complete website with Docusaurus

Installing Docusaurus

Seeing website in development server

Customizing Home Page

Customizing Navbar

Customizing the footer

Creating a new page

Conclusion

Logging for your Node.js app

Introduction

Table of contents

What is logging?

Using winston in a Node.js application

Conclusion

Logging for your frontend apps

The Setup

Create a React app

Setup Pino

Add logging to the app

Conclusion