First exercises

Summary: To get started with StartER, here are some practical exercises to complete after installation.

Objectives

They'll allow you to verify that your environment is functional and experiment with the framework's essential principles, from Express routing to React integration.

Complete the exercises

Exercise 1: Hello API

Let's start with a minimalist endpoint that returns "hello, world!". This exercise validates your setup and introduces the basics of routing with Express.

Step 1: write the test first

Create a hello folder in src/express/modules. Then, create a hello.test.ts file inside it to define what we expect from our API before we build it:

import express from "express";
import request from "supertest";

import routes from "../../routes";

const app = express();
app.use(routes);

describe("Hello API", () => {
  it("should return hello world", async () => {
    const response = await request(app).get("/api/hello");

    expect(response.status).toBe(200);
    expect(response.body).toEqual({ message: "hello, world!" });
  });
});

Run npm run test in your terminal. The test will fail because the route doesn't exist yet. This is the first step of Test-Driven Development (TDD).

Step 2: create a routes file

Now, let's make the test pass. Create a helloRoutes.ts file in the src/express/modules/hello folder with the following contents:

import { type RequestHandler, Router } from "express";

const router = Router();

/* ************************************************************************ */

const sayHello: RequestHandler = (_req, res) => {
  res.json({ message: "hello, world!" });
};

/* ************************************************************************ */

router.get("/api/hello", sayHello);

/* ************************************************************************ */

export default router;

Step 3: integrate the module into the main routes

Modify the src/express/routes.ts file to integrate your new module at the end of the file:

// ...

/* ************************************************************************ */

await importAndUse("./modules/hello/helloRoutes");

/* ************************************************************************ */

export default router;

Step 4: verify the endpoint

Run npm run test again. The test should now pass! You can also restart your server if necessary and visit http://localhost:5173/api/hello in your browser or use a tool like cURL or Postman. You should see the JSON response.

🎉 If everything works, congratulations: your first Express route is up and running!

Exercise 2: Create an "About" page

Now let's move on to the client side: we'll create a page and connect it to React Router's routing system.

Step 1: create a page component

Create an About.tsx file in the src/react/components folder:

function About() {
  return (
    <>
      <h1>About</h1>
      <p>StartER rocks !</p>
    </>
  );
}

export default About;

Step 2: add the route to the routes.tsx file

Modify the src/react/routes.tsx file to integrate your new page:

// ...

import About from "./components/About";

// ...

import "./index.css";

const routes: RouteObject[] = [
  {
    // ...
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
      // ...
    ],
  },
];

export default routes;

Step 3: update the navigation

Modify the NavBar component to include a link to your new page. Open the src/react/components/NavBar.tsx file and add a new element to the navigation.

Step 4: test the Page

Visit http://localhost:5173/about in your browser. You should see your new page.

🎉 If the page displays correctly, you have successfully validated client-side routing and the integration of a standalone component.

Exercise 3: Connecting the frontend to the backend

In this last exercise, we will connect the frontend and the backend: the React page will display the message returned by your Express API.

Step 1: add the fetch functionality to About.tsx

Modify the About.tsx component to add a call to the /api/hello endpoint:

import { use } from "react";

import { cache } from "../helpers/cache";

function About() {
  const { message } = use(cache<{ message: string }>("/api/hello"));

  return (
    <>
      <h1>About</h1>
      <p>StartER rocks !</p>
      <p>Message from the API : "{message}"</p>
    </>
  );
}

export default About;

Step 2: test the integration

Reload the http://localhost:5173/about page. You should now see the "hello, world!" message retrieved from your API.

🎉 If you see the "hello, world!" message in your browser, your integration is successful. You've just completed a full loop between the React client and the Express server!

Congratulations!

You have completed the introductory exercises for StartER! You know how to:

1. Create an API endpoint with Express
2. Create a React page and connect it to the router
3. Connect the frontend to the backend to display dynamic data

Best practices and use cases

• Proceed step by step: test each part (backend isolated, then frontend isolated) before attempting to connect them. This greatly facilitates debugging in case of data retrieval issues.

See also

• Directory structure
• Creating your first resource