Forem: PineAppleGrits

SQLite Built-In: A Game-Changer for Node.js Development

PineAppleGrits — Thu, 11 Jul 2024 17:38:24 +0000

Introduction

Node.js continues to push the boundaries of server-side JavaScript with its latest update: a built-in SQLite module. This development promises to streamline database management, making it easier and more efficient for developers to integrate SQLite databases directly into their Node.js applications. Let's dive into why this is a significant advancement and how you can leverage it in your projects.

Why SQLite Built-In for Node.js is a Big Deal

Simplified Database Integration
- No External Dependencies: The built-in module eliminates the need for third-party packages, reducing the complexity and potential for compatibility issues.
- Streamlined Workflow: With SQLite now a native part of Node.js, setting up and managing databases becomes more straightforward, saving time and effort.
Enhanced Performance
- Synchronous Operations: The built-in SQLite module supports synchronous database operations, which can be particularly beneficial for scripts and applications where immediate data processing is crucial.
- Optimized for Node.js: Being a part of the core, the SQLite module is optimized for performance and seamless integration within the Node.js runtime.
Robust and Reliable
- Active Development: As a core module, SQLite for Node.js benefits from the robust support and continuous improvements provided by the Node.js development community.
- Stable and Secure: Built directly into Node.js, the SQLite module adheres to the high standards of stability and security, ensuring reliable database operations.

Basic Usage of the node:sqlite Module

To access the new SQLite module in Node.js, you can use either ES6 modules or CommonJS. Here’s how you can get started with an in-memory database:

Importing the Module

For ES6 modules:

// ES6 modules:
import sqlite from 'node:sqlite';
// CommonJS
const sqlite = require('node:sqlite');

_Note: This module is only available under the node: scheme.

Basic Example

The following example demonstrates how to open an in-memory database, write data to it, and then read the data back.

import { DatabaseSync } from 'node:sqlite';
const database = new DatabaseSync(':memory:');

// Execute SQL statements from strings.
database.exec(`
  CREATE TABLE data(
    key INTEGER PRIMARY KEY,
    value TEXT
  ) STRICT
`);

// Create a prepared statement to insert data into the database.
const insert = database.prepare('INSERT INTO data (key, value) VALUES (?, ?)');
// Execute the prepared statement with bound values.
insert.run(1, 'hello');
insert.run(2, 'world');

// Create a prepared statement to read data from the database.
const query = database.prepare('SELECT * FROM data ORDER BY key');
// Execute the prepared statement and log the result set.
console.log(query.all());
// Prints: [ { key: 1, value: 'hello' }, { key: 2, value: 'world' } ]

Benefits of Using the Built-In SQLite Module

Faster Development Cycles
- Developers can quickly set up databases without worrying about external dependencies or configurations.
Consistency Across Projects
- Using a built-in module ensures consistency and compatibility across different Node.js projects.
Improved Maintainability
- With SQLite as part of the core, maintenance and updates are streamlined, reducing the risk of breaking changes or outdated dependencies.

Conclusion

The introduction of a built-in SQLite module in Node.js marks a significant milestone in the evolution of JavaScript server-side development. By integrating this powerful, lightweight database directly into the Node.js environment, developers can now enjoy a more streamlined, efficient, and reliable database management experience. Whether you are building small-scale applications or large enterprise systems, the new node:sqlite module is set to become an invaluable tool in your development toolkit.

How to Create a Blog Using NextJS v14 and MDX: A Comprehensive Guide

PineAppleGrits — Tue, 09 Jul 2024 23:42:31 +0000

It is very effective to develop a blog since it helps to showcase and share acquired knowledge, pertinent experiences, and updates to a larger audience. More recently, I integrated a blog functionality on my web site with NextJS v14, MDX, and other libs. This blog post will guide you through the steps that I followed to incorporate the blog featuring updating parts, as well as configuring Next. js and also adding all the needed dependencies.

Why I Chose to Blog

Therefore, experiencing real-life projects, I began this blog to give an open look into the work process and describe my thinking and actions when turning concepts into tangible products as well as my reasons for those actions. Being a developer myself, most of the time I dwell on projects where an application begins as a mere idea in the developer’s mind and in concrete reality in a fairly short time. Documenting this journey serves several purposes:

🕵️‍♂️ Transparency: To elaborate, the following paragraphs describe actions I choose to incorporate in ensuring that my projects are efficient and effective. For the aspiring developer on the one hand, oftentimes it is useful to observe how a more experienced coworker or a fellow student, as the case may be, is going about solving the problem.
💡 Inspiration: Sharing my motivations and the reasons behind my projects can inspire others to pursue their own ideas. Understanding the "why" behind a project often provides the fuel needed to push through challenges and stay committed.
📚 Documentation: Keeping a record of my development journey helps me track my progress and reflect on the lessons learned. It's a valuable resource for future reference and continuous improvement.
🗣️ Community Engagement: A blog makes it easy to have two-way communication, getting feedback from the readers. There is also interaction by making comments of different stories and articles to get new ideas, collaboration and fellowship from other readers.

My objective is to note down and share all the stages of idea formation and turning it into an actual project and thus motivate people sharing their ideas. It is my way of putting something back into the developer population and helping to build the knowledge base.

So... How i did it?

Adding and Configuring the dependencies

Next.js supports MDX (Markdown for JSX) out of the box with some additional configuration. Here’s how I set it up:

Install Required Packages

I installed the necessary MDX packages and related dependencies:

npm install @mdx-js/loader @mdx-js/react @next/mdx @tailwindcss/typography

Update `next.config.js`

We must add the withMDX plugin to the Next.js configuration file.

// next.config.js
const withMDX = require("@next/mdx")();

const nextConfig = {
  // Rest of the configuration
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

module.exports = withMDX(nextConfig);

Update `tailwindcss.config.ts`

I'm using tailwind so i must add the typography plugin to the tailwind config file.

// tailwindcss.config.ts
const config = {
  // Rest of the configuration
  plugins: [require("@tailwindcss/typography")],
}

Create required components to render the MDX

We will create a mdxComponents file that will allow us to define how each element of the MDX will be rendered.

// components/MdxComponents.tsxx
import Link from "next/link";
import { MDXComponents } from "mdx/types";
import { Ref, RefAttributes } from "react";
import { Code } from "bright";
export const mdxComponents: MDXComponents = {
  pre: (props) => (
    <Code
      theme={"github-dark"}
      {...props}
      style={{
        margin: 0,
      }}
    />
  ),
  a: ({ children, ref, ...props }) => {
    return (
      <Link href={props.href || "."} ref={ref as Ref<HTMLAnchorElement> | undefined} {...props}>
        {children}
      </Link>
    );
  },
  File: ({ children, path, ...props }) => {
    return (
      <div className="bg-gray-950 pt-1 rounded-3xl">
        <div className="flex items-center ml-4 my-2 italic font-semibold">{path}</div>
        {children}
      </div>
    );
  },
};

export default mdxComponents;

For example in the code above, we are defining how the pre tag will be rendered, we are using the Code component from the bright library to render the code blocks with syntax highlighting. We are also defining how the a tag will be rendered, we are using the Link component from Next.js to render the links. We are also defining a custom File component that will render a file path above the code block.

The File component is exactly what im using to render the code blocks in this blog post!

Let's create the component to render the MDX!

// components/BlogCard.tsxx
import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import remarkA11yEmoji from "@fec/remark-a11y-emoji";
import remarkToc from "remark-toc";
import mdxComponents from "./MdxComponents";

export default function BlogPost({ children }: { children: string }) {
  return (
    <div className="prose prose-invert min-w-full">
      <MDXRemote
        source={children}
        options={{
          mdxOptions: {
            remarkPlugins: [
              // Adds support for GitHub Flavored Markdown
              remarkGfm,
              // Makes emoji accessible ! adding aria-label
              remarkA11yEmoji,
              // generates a table of contents based on headings
              [remarkToc, { tight: true }],
            ],
            // These work together to add IDs and linkify headings
            rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
          },
        }}
        components={mdxComponents}
      />
    </div>
  );
}

This is the component that will render the blog post, it uses the MDXRemote component from next-mdx-remote/rsc to render the MDX content. We also pass some options to the MDXRemote component to enable support for GitHub Flavored Markdown, accessible emojis, and table of contents generation. The mdxComponents object contains the components that will be used to render the MDX content.

Create the logic to fetch the blog posts

We will define the types for the blog posts and create a function to fetch all the posts.

// types.d.ts
export type IBlogPost = {
  date: string;
  title: string;
  description: string;
  slug: string;
  tags: string[];
  body: string;
};

We will store our .mdx files under the /posts path, and we will use the gray-matter library to parse the front matter of each file.
Create a file to define the functions to fetch all blog posts.

// lib/blog.ts  
import matter from "gray-matter";
import path from "path";
import fs from "fs/promises";
import { cache } from "react";
import { IBlogPost } from "@/types";
export const getPosts: () => Promise<IBlogPost[]> = cache(async () => {
  const posts = await fs.readdir("./posts/");

  return Promise.all(
    posts
      .filter((file) => path.extname(file) === ".mdx")
      .map(async (file) => {
        const filePath = `./posts/${file}`;
        const postContent = await fs.readFile(filePath, "utf8");
        const { data, content } = matter(postContent);

        // Not published? No problem, don't show it.
        if (data.published === false) {
          return undefined;
        }

        return { ...data, body: content } as IBlogPost;
      })
      .filter((e) => e)
  ) as Promise<IBlogPost[]>;
});

export async function getPost(slug: string) {
  const posts = await getPosts();
  return posts.find((post) => post?.slug === slug);
}

export default getPosts;

The getPosts function reads all the files in the /posts directory, filters out the non-MDX files, and parses the front matter using gray-matter. It then returns an array of objects containing the post data and body content. The getPost function fetches a specific post based on its slug.

Create a Blog Page

Now let's create the page where we wll display all the blog posts,
I created a group to be able to define a layout for the blog pages, you dont need to if you dont need it.

// app/(blog)/blog/page.tsxx
// Here's where we will display all the blog posts
import BlogCard from "@/components/BlogCard";
import getPosts from "@/lib/blog";

export default async function PostPage() {
  const posts = await getPosts();

  return (
    <>
      <h1 className="text-5xl">
        The <span className="font-bold">Blog</span>.
      </h1>
      <div className="flex flex-col space-y-10 mt-4 p-5">
        <div>
          <ol className="group/list">
            {posts.map((post, i) => (
              <li
                className={`mb-12 animate-ease-in animate-delay-500 ${i % 2 == 0 ? "animate-fade-right" : "animate-fade-left"}`}
                key={i}
              >
              {/* Remember to always define a key when doing a map function.*/}
                <BlogCard {...post} key={i} />
              </li>
            ))}
          </ol>
        </div>
      </div>
    </>
  );
}

The PostPage component fetches all the blog posts using the getPosts function and maps over them to render a BlogCard component for each post. The BlogCard component will display the post title, description, and tags.

And then we can create the page for the specific post.

// app/(blog)/[slug]/page.tsxx
import BlogPost from "@/components/BlogPost";
import getPosts, { getPost } from "@/lib/blog";

import { notFound } from "next/navigation";
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post?.slug }));
}
export default async function PostPage({
  params,
}: {
  params: {
    slug: string;
  };
}) {
  const post = await getPost(params.slug);
  if (!post) return notFound();
  return <BlogPost>{post?.body}</BlogPost>;
}

The PostPage component fetches the specific post based on the slug provided in the URL. If the post is not found, it returns a 404 page using the notFound function from next/navigation. The BlogPost component renders the post content using the MDXRemote component.

Create a Sitemap

Creating a sitemap is essential for search engine optimization (SEO) and helps search engines discover and index your website's pages. We can create a sitemap using a serverless function in Next.js.

// app/sitemap.ts
import { getPosts } from "@/lib/blog";

export default async function sitemap() {
  // Define the routes that should be included in the sitemap
  const routes = ["", "/blog"].map((route) => ({
    url: `https://ginos.codes${route}`,
    lastModified: new Date().toISOString().split("T")[0],
  }));

  // Get all posts and create a sitemap route for each one
  const posts = await getPosts();
  const blogs = posts.map((post) => ({
    url: `https://ginos.codes/blog/${post.slug}`,
    lastModified: new Date(post.date).toISOString().split("T")[0],
  }));

  return [...routes, ...blogs];
}

The sitemap function defines the routes that should be included in the sitemap. It includes the homepage and the blog page. It then fetches all the blog posts and creates a sitemap route for each post, including the post URL and last modified date.

Conclusion

In this guide, we covered the complete process of setting up a blog using NextJS v14 and MDX. From installing and configuring necessary dependencies to creating and displaying blog posts, each step is crucial for a functional and aesthetically pleasing blog. By following these steps, you can easily set up a blog that is not only easy to manage but also SEO-friendly.

Junior dev wants new challenges!

PineAppleGrits — Mon, 22 Feb 2021 03:34:55 +0000

Hi, I'm Grits! I would like to participate in a project to expand my borders in programming! (I dont mind about the kind of project, i want to work in a group and share my code!) I specialize mainly in Javascript but I also know Java, React, Express, MongoDB, MySQL, and I would love to continue the dev way!

Forem: PineAppleGrits

SQLite Built-In: A Game-Changer for Node.js Development

Introduction

Why SQLite Built-In for Node.js is a Big Deal

Basic Usage of the node:sqlite Module

Importing the Module

Basic Example

Benefits of Using the Built-In SQLite Module

Conclusion

How to Create a Blog Using NextJS v14 and MDX: A Comprehensive Guide

Why I Chose to Blog

Adding and Configuring the dependencies

Install Required Packages

Update next.config.js

Update tailwindcss.config.ts

Create required components to render the MDX

Create the logic to fetch the blog posts

Create a Blog Page

Create a Sitemap

Conclusion

Junior dev wants new challenges!

Update `next.config.js`

Update `tailwindcss.config.ts`