DEV Community: Anurag Ashok

Use Docker for local development

Anurag Ashok — Sun, 03 Jan 2021 16:00:00 +0000

Docker/Containers have become the de facto standard for building and deploying applications. The isolation, portability and easy scaling capabilities of containers make them the popular choice for app deployments.

However, containers are not only for application deployments but can also be for local development. They can solve many developer issues. The use of Docker containers during development can have the following advantages.

runs on my machine = runs anywhere
there are no cumbersome configuration/version incompatibilities
The development environment is closer to production
easy onboarding of new developers

Let's see how I use Docker for the development of this blog.

Base Image

TheOverEngineeredBlog is built on next.js which needs node. Also, the package manager of choice is yarn. The official node image on docker hub is here. It includes yarn too. This blog uses node:lts image to get the latest lts version of node.

Docker Compose

I created a docker-compose.yml file at the root of the project to define the entire container configuration and add more containers if necessary later.

docker-compose.yml View on GitHub

version: '3.7'

services:
  runner: 
    image: node:lts
    ports: 
      - "$PORT:3000"
      - "$DEBUGPORT:9229"
    volumes:
    - .:/app:cached
    - yarn-cache-volume:/usr/local/share/.cache/yarn/v6:cached
    working_dir: /app
    command: "$COMMAND"

volumes:
  yarn-cache-volume:

The compose file defines a service named runner using the base image "node:lts".

The ports section instructs Docker to expose ports 3000 and 9229 at $PORT and $DEBUGPORT on the host. PORT and DEBUGPORT are environment variables to configure the desired ports on the host.

The volumes section defines mounts and named volume. The root directory of the project is mounted to /app inside the container. Also, it defines a named persistent volume for yarn cache. Docker manages this volume and persists it through the container stop/start. This cache reduces yarn execution time next time the container starts.

working_dir set the current directory to ./app to avoid changing the directory each time the container starts.

command is set to an environment variable $COMMAND. It can be supplied when invoking docker-compose.

RUN script

I like to have a run script to spawn the container using docker-compose to avoid writing the same commands each time.

run View on GitHub

#!/bin/sh
export PORT=${PORT:-3000}
export DEBUGPORT=${DEBUGPORT:-9229}
export COMMAND=${@:-"yarn dev"}
EXISTING_CONTAINER_ID=""
if [-n `docker-compose ps -q runner`]; then
    EXISTING_CONTAINER_ID=`docker-compose ps -q runner`;
elif [-n `docker ps -q --no-trunc | grep $(docker-compose ps -q runner)`]; then
    EXISTING_CONTAINER_ID=`docker ps -q --no-trunc | grep $(docker-compose ps -q runner)`;
fi

if [-z $EXISTING_CONTAINER_ID]; then
  COMMAND=${@:-"yarn dev"} docker-compose run --service-ports --rm runner
else
  echo "Existing container ${EXISTING_CONTAINER_ID}"
  docker exec -it ${EXISTING_CONTAINER_ID} ${COMMAND}
fi

The script is executed like this.

[PORT=<desired port on host> DEBUGPORT=<desired debug port on host>] ./run [<command>]

DEFAULTS PORT=3000 DEBUGPORT=9229 COMMAND="yarn dev"

Sections in [] are optional and have defaults set.

To start the application, I need to write ./run on the shell. It starts the container, exposing the ports 3000 and 9229 on the host and then runs yarn dev inside the container.

Any command can be executed inside the container by prefixing it with ./runE.g. To add a package, run ./run yarn add some-package-name

You could also do ./run bash to get a bash shell attached to the container. This bash shell can be used to execute commands inside the container without the prefix './run'

The script also checks if a container is already running for the application and reuses the container to execute the command. Credits to this answer on ServerFault

We can also write a similar script for windows machines using cmd/PowerShell.

This setup has helped me enormously. I don't have to worry about installing different versions of node/java/python etc. Besides, now the only dependency for local development is, Docker!

Generate RSS and Sitemap for Next.js JAMstack site

Anurag Ashok — Sun, 27 Dec 2020 16:00:00 +0000

Image by mohamed Hassan from Pixabay

RSS and sitemap are essential for blogs today. RSS Feeds let users subscribe to your content and improves user engagement. On the other hand, a sitemap is for search engines to find and index your content.

When using a CMS like wordpress etc.., the RSS and sitemap XML files are generated at runtime. However, for JAMStack websites, we would like to create them at the build stage. I was not able to find an OOTB solution for next.js to create these files. The XML files for RSS and sitemap are not too complex to generate. Hence, I decided not to introduce any third-party dependencies to generate these files.

There are mainly three questions to answer when generating these files. Where, When and How?

1. Where to place

The convention followed by many is to place rss.xml and sitemap.xml at the root of the website. Sitemaps can be split into files and referenced from the main sitemap.xml. This is needed when sitemaps grow very huge. We will stick to single sitemap.xml for now.

Next.js routing does not support files that are not content. So, what we can do is, to place these files in the public directory. Next's static file serving feature serves the files under this directory at the root of the website.

2. When to generate

We have to generate the files inside the public directory during the build. During the build, the getStaticProps function gets invoked for each page. We can leverage this function to create our XML files.

We can use getStaticProps function of any page component to create the files. However, this will add unnecessary code to the pages. So, I created a dummy.tsx page. The getStaticProps of this page component will contain the additional build time processing logic.

If anyone visits /dummy we should probably return 404 and ignore the page from any search engine indexing.

dummy.tsx View on GitHub

const Dummy: React.FC = () => (
  <>
    <Head>
      <meta name="robots" content="noindex" />
    </Head>
    <DefaultErrorPage statusCode={404} />
  </>
);

3. How to generate

The creation of XML files is a matter of iterating over the content and generating the XML tags. This can be implemented in the getStaticProps function of pages/dummy.tsx. You can find the snippets of the code below. You can refer to GitHub repo for this blog for the full code sample.

dummy.tsx - getStaticProps() View on GitHub

export const getStaticProps: GetStaticProps = async () => {
  const posts = await getPosts();
  generateRss(posts);

  const pages = await getAllContent();
  generateSitemap(pages);

  return {
    props: {},
  };
};

generateRss() View on GitHub

const generateRssItem = (post: Post): string => `
  <item>
    <guid>${getFullUrl(`blog/${post.slug}`)}</guid>
    <title>${post.title}</title>
    <link>${getFullUrl(`blog/${post.slug}`)}</link>
    <description>${post.description}</description>
    <pubDate>${new Date(post.publishDate).toUTCString()}</pubDate>
  </item>
`;

export default (posts: Post[]): void => {
  const rss = `<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
      <title>${SITE_TITLE}</title>
      <link>${getFullUrl('')}</link>
      <description>${SITE_TITLE}</description>
      <language>en</language>
      <lastBuildDate>${new Date(posts[0].publishDate).toUTCString()}</lastBuildDate>
      <atom:link href="${getFullUrl('rss.xml')}" rel="self" type="application/rss+xml"/>
      ${posts.map(generateRssItem).join('')}
    </channel>
  </rss>`;
  fs.writeFileSync('./public/rss.xml', rss);
};

generateSitemap() View on GitHub

export default (pages: Content[]): void => {
  const links = compose(map(mapToSitemapEntry))(pages);

  if (fs.existsSync(SITEMAP_PATH)) {
    fs.unlinkSync(SITEMAP_PATH);
  }
  const stream = fs.createWriteStream(SITEMAP_PATH, { flags: 'a' });
  stream.write(`<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`);
  links.forEach((item) => {
    stream.write(`
      <url>
        <loc>${item.url}</loc>
        <changefreq>${item.changefreq}</changefreq>
        <priority>${item.priority}</priority>
      </url>`);
  });
  stream.write('\n');
  stream.write('</urlset>');
  stream.end();
};

You can later validate these xml files against the specs at W3C Feed Validator and XML Sitemap Validator