Start of the Blog

General idea for the blog

Since the creation of the projects on both Github and Google play, DeCODE has been publishing updates directly to social media. And all the content was carefully designed and posted at the proper time. But due to the necessity of constantly updating the community with the process of DeCODE journey, I have decided to create a specific blog, where I can post updates.

How to set up the blog in NodeJS

Here we are using ExpressJS with the React router For the blogging engine, I have decided to take Poet, as it can be easily integrated into the Express application

To start, first, you will need to install it and configure:

yarn add poet

import express from 'express';
import Poet from 'poet';

const app = express();
const poet = Poet(app);
const PORT = process.env.PORT || 3001;

app.get('/blog', (req, res) => {
  const lang = req.cookies.lang || 'en-US';
  res.render('blog_index', { 
    keywords: 'keywords,example,fine',
    description: ''
  });
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

I am a huge fan of configuring the application through the environment variables, so I like to provide the opportunity to override the PORT which the application is listening to through the env variables.

Take note, that with express and React Router SSR you might have the following construction:

  app.get('*', (req, res) => {
    const context = { useragent: req.useragent };
    const metaTags = getMetaTagsbyUrl(req);

    const { pipe } = renderToPipeableStream(
      <StaticRouter location={req.url} context={context}>
        <I18nextProvider i18n={req.i18n}>
          <AppRoutes />
        </I18nextProvider>
      </StaticRouter>,
      {
        bootstrapScripts: [`/static/${assets['index.js']}`],
        onShellReady() {
          res.status(context.status || 200); 
          res.write(preHead);
          res.write(metaTags);
          res.write(afterHead);
          pipe(res);
          res.write(tail);
        },
        onShellError(error) {
          console.log(error);
        },
        onError(error) {
          console.log(error);
        }
      }
    );
  });

If it is the case for you, you need to put the /blog URL above it, so it will not be picked up by the wildcard (* symbol)

Pug syntax

Pug is templating language, which can produce HTML. DeCODE blog uses Pug for managing the content Pug provides several utilities, some of them are blocks, which can define sections that should be rendered through the inclusion of them with block. The syntax of pug uses indenting, like Python, to introduce nested tags. Be careful, when indenting some wrappers, because you might accidentally change the template In case it's necessary to debug some of the variables, you can use standard JS console.log and check output in the shell.

This Poet blog used markdown, and you can pass additional arguments to the view like so:

    res.render('blog_index', { 
      keywords: 'keywords,example,fine',
      description: ''
    });