Get Started

ReactBunode is an experimental, lightweight static site generator library

Important Note

i am excited to share this project with you, but it's important to note that it's currently undergoing active development. While it might be functional for basic exploration and experimentation, it's not yet intended for use in real-world production applications.

Installation

To create a new ReactBunode project, use the following command:

bunx createReactBunode

Run the command: Open a terminal in your desired project location and run the command .

Follow prompts: The command will guide you through additional setup steps, such as choosing a project name and configuration options

This will create a new project directory with the necessary files and configurations.

Folder Structure

project
    app/
       global.css
       page.tsx
       layout.tsx
       [id]
          page.tsx
       thankyou
          [id]
              page.tsx
    package.json
    tailwind.config.js
    reactbunode.config.ts
    tsconfig.json

Routes

ReactBunode employs a file-based routing system In this section, we'll explore how to create them

Creating a Route

To create a route, follow these steps:

Create a folder: Inside the app directory, create a new folder. The name of this folder will correspond to the URL path your route will represent (e.g., about for /about).
Add page.tsx: Renders content for the /about route.

Dynamic Routes

ReactBunode supports dynamic routes, allowing you to capture variable parts of the URL path. Here's how to create and access them:

Use square brackets: Enclose a segment of the folder name within square brackets (for eg [id])
Access dynamic value: In the page.tsx file, you can access the dynamic value using a prop for eg id if your folder name is [id]

Example


const MyDynamicPage = ({ id }) => {
return (
    <div>
      <h1>This is a dynamic page!</h1>
      <p>The slug is: {id}</p>
    </div>
  );
};

export default MyDynamicPage;

functions

getStaticPaths Function

The getStaticPaths function in ReactBunode serves a similar purpose to generateStaticParams in Next.js, allowing you to pre-render pages statically at build time in combination with dynamic routes. It facilitates the generation of paths dynamically based on data fetched from an external source.

at build time. This function is particularly useful when you have dynamic routes whose paths depend on data that is not known until runtime.

Purpose

The main purpose of getStaticPaths is to generate a list of paths for which pages will be statically generated at build time. These paths typically correspond to the dynamic parameters that your dynamic routes expect.

Note

ReactBunode serves as a static site generator library. For dynamic routes, getStaticPaths must be exported from the route component. If getStaticPaths is not provided for a dynamic route, ReactBunode won't be able to generate the corresponding static route.

Usage

export const getStaticPaths = async () => {
	const products = (await fetch('https://fakestoreapi.com/products')
	.then((res) => res.json())) as
		| Array<Products>
		| undefined;
	return products?.map(({ id }) => ({ id }));
};




async function Page({ id }: { id: string }) {
	//rest code
}

generateMetadata Function

The generateMetadata function in ReactBunode is designed to simplify the process of adding meta tags and manipulating the <head> section of HTML documents. It allows you to dynamically generate metadata such as title, description, and Open Graph tags based on the properties of a product or any other entity.

Purpose

The main purpose of generateMetadata is to generate metadata objects that can be used to enhance the SEO (Search Engine Optimization) and social sharing capabilities of your web pages.

Notes

React will automatically inject a title meta script and any other tag you add anywhere in JSX into the <head> portion of the HTML for more information see react docs

Usage

The function signature typically looks like this:

export const generateMetadata = async ({ id }: { id: string }) => {
	const product = await getProduct(id);

	return {
		title: product?.title,
		description: product?.description,
		openGraph: {
			images: [{ url: product?.image }]
		}
	};
};

Metadata Object Export

In addition to using the generateMetadata function, ReactBunode allows you to export metadata directly as an object.

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
  openGraph: {
    images: [{ url: 'image_url.jpg' }]
  }
};

reactbunode.config.ts

The reactbunode.config.ts file in ReactBunode is a configuration file used to customize various aspects of the ReactBunode setup.

Currently, the configuration options in this file are limited to defining aliases and configuring Tailwind CSS.

Usage

Here's an overview of how you can use the reactbunode.config.ts file:

Define Aliases: Use the alias property to define path aliases, which can simplify imports in your codebase by providing shorter and more convenient paths.

Example

import { join } from 'path';
import { ReactBunodeConfig } from 'reactbunode/config';
import tailwind from 'tailwindcss';

const Config: ReactBunodeConfig = {
  alias: {
    '@comp': join(process.cwd(), 'components')
  },

  style: {
		postcss: {
			plugins: [tailwind as any, autoprefixer]
		}
	}
};