Getting Started

Let's build a home page that displays a list of tasks, demonstrating each core feature of Catalyst one step at a time.

System Requirements

Node version 20.4.0 or later
Supported platforms: macOS, Linux.

For windows users, we recommend using Windows Subsystem for Linux (WSL) for the best development experience

Catalyst comes with built-in support for typescript

Step 1: Installation

terminal
npx [email protected]
cd <project-name>

Step 2: Setting Up the Route

First, let's create the Home component and set up its route.

// src/js/containers/Home/Home.js
import React from 'react';

const Home = () => {
    return (
        <div>
            <h1>My Tasks</h1>
            <p>Tasks will appear here...</p>
        </div>
    );
};

export default Home;

// src/js/routes/index.js
import Home from '../containers/Home/Home';

const routes = [
    {
        path: "/",
        index: true,
        component: Home,
    }
];
export default routes;

Now you can access the home page at the root URL ('/').

Step 3: Adding Client-Side Data Fetching

Let's add client-side data fetching using clientFetcher. We'll first handle API calls in our server and then implement the fetcher.

// server/server.js
const express = require("express");
const path = require("path");

// Server middlewares are added here.
export function addMiddlewares(app) {
  app.get("/api", async (_, res) => {
    const data = await fetch(
      "https://jsonplaceholder.typicode.com/todos?_limit=5",
    );
    const json = await data.json();
    res.send(json);
  });
}

// src/js/containers/Home/Home.js
import React from 'react';

const getTasks = async () => {
  return fetch(
    `http://${process.env.NODE_SERVER_HOSTNAME}:${process.env.NODE_SERVER_PORT}/api`,
  ).then((res) => res.json());
};

const Home = () => {
    return (
        <div>
            <h1>Welcome to My Blog</h1>
            <p>Tasks will appear here...</p>
        </div>
    );
};

// Add clientFetcher to fetch data
Home.clientFetcher = async () => {
    const data = await getTasks();
    return data;
};

export default Home;

Step 4: Reading Data Using useCurrentRouteData

Now let's update the component to display the fetched data using useCurrentRouteData hook.

// src/js/containers/Home/Home.js
import React from 'react';
import { useCurrentRouteData } from '@tata1mg/router';

const getTasks = async () => {
  return fetch(
    `http://${process.env.NODE_SERVER_HOSTNAME}:${process.env.NODE_SERVER_PORT}/api`,
  ).then((res) => res.json());
};

const Home = () => {
  const { data, isFetching, error } = useCurrentRouteData();
  const tasks = data || [];

  if (isFetching) {
    return <div>Loading tasks...</div>;
  }

  if (error) {
    return <div>Error loading tasks: {error.message}</div>;
  }

  return (
    <div>
      <h1>My Tasks</h1>
      <div>
        {tasks.map((task) => (
          <article key={task.id}>
            <h2>{task.title}</h2>
            <p>Id: {task.id}</p>
            <p>Completed: {task.completed}</p>
          </article>
        ))}
      </div>
    </div>
  );
};


Home.clientFetcher = async () => {
    const data = await getTasks();
    return data;
};

export default Home;

Step 5: Adding Server-Side Rendering with serverFetcher

Let's add server-side rendering support by implementing serverFetcher.

// src/js/containers/Home/Home.js
import React from "react";
import { useCurrentRouteData } from "@tata1mg/router";

const getTasks = async () => {
  return fetch(
    `http://${process.env.NODE_SERVER_HOSTNAME}:${process.env.NODE_SERVER_PORT}/api`,
  ).then((res) => res.json());
};

const Home = () => {
  const { data, isFetching, error } = useCurrentRouteData();
  const tasks = data || [];

  if (isFetching) {
    return <div>Loading tasks...</div>;
  }

  if (error) {
    return <div>Error loading tasks: {error.message}</div>;
  }

  return (
    <div>
      <h1>My Tasks</h1>
      <div>
        {tasks.map((task) => (
          <article key={task.id}>
            <h2>{task.title}</h2>
            <p>Id: {task.id}</p>
            <p>Completed: {task.completed}</p>
          </article>
        ))}
      </div>
    </div>
  );
};

// Client-side data fetching
Home.clientFetcher = async () => {
  const data = await getTasks();
  return data;
};

// Server-side data fetching
Home.serverFetcher = async () => {
  const data = await getTasks();
  return data;
};

export default Home;

Now the tasks will be fetched on the server during the initial page load, providing better SEO and faster initial page loads. The HTML will contain the full content when you view the page source.

Step 6: Adding SEO Metadata

Finally, let's add metadata for SEO optimization using setMetaData.

// src/js/containers/Home/Home.js
import React from "react";
import { useCurrentRouteData } from "@tata1mg/router";

const getTasks = async () => {
  return fetch(
    `http://${process.env.NODE_SERVER_HOSTNAME}:${process.env.NODE_SERVER_PORT}/api`,
  ).then((res) => res.json());
};

const Home = () => {
  const { data, isFetching, error } = useCurrentRouteData();
  const tasks = data || [];

  if (isFetching) {
    return <div>Loading tasks...</div>;
  }

  if (error) {
    return <div>Error loading tasks: {error.message}</div>;
  }

  return (
    <div>
      <h1>My Tasks</h1>
      <div>
        {tasks.map((task) => (
          <article key={task.id}>
            <h2>{task.title}</h2>
            <p>Id: {task.id}</p>
            <p>Completed: {task.completed}</p>
          </article>
        ))}
      </div>
    </div>
  );
};

// Client-side data fetching
Home.clientFetcher = async () => {
  const data = await getTasks();
  return data;
};

// Server-side data fetching
Home.serverFetcher = async () => {
  const data = await getTasks();
  return data;
};

// Dynamic metadata based on fetched data
Home.setMetaData = () => {
  return [
    <title key="maintitle">My Blog - Latest tasks</title>,
    <meta key="title" property="og:title" content="My Blog - Latest tasks" />,
    <meta
      key="description"
      property="og:description"
      content="Discover the latest articles on web development and technology"
    />,
    <meta
      key="keywords"
      name="keywords"
      content="blog, web development, technology, catalyst"
    />,
  ];
};

export default Home;

Step 7: Running

terminal

npm run start

Final Results

Your home page now has:

Proper routing setup
Client-side data fetching with loading states
Server-side rendering for better SEO and performance
Dynamic metadata for search engines and social sharing
Error handling for failed data fetches
Responsive styling with CSS modules

Key Points to Remember

Route Setup:
- Always define routes in src/js/routes/index.js
Data Fetching:
- clientFetcher runs on client-side navigation
- serverFetcher runs on initial page load
- Both should return the same data structure
useCurrentRouteData:
- Provides data, isFetching,error states and refetch function.
- Use it to handle loading and error states gracefully
Server-Side Rendering:
- serverFetcher runs before initial page render
- Helps with SEO and initial page load performance
Metadata:
- setMetaData can be used to generate metadata for a page.
- Important for SEO and social sharing

Getting Started

System Requirements​

Step 1: Installation​

Step 2: Setting Up the Route​

Step 3: Adding Client-Side Data Fetching​

Step 4: Reading Data Using useCurrentRouteData​

Step 5: Adding Server-Side Rendering with serverFetcher​

Step 6: Adding SEO Metadata​

Step 7: Running​

Final Results​

Key Points to Remember​