Create a route

After getting the project running locally, the next step is to add a new route to the project. Routes encapsulate the logic for handling requests to a particular path in your project. They can be used to handle API requests, or render HTML pages. For now we are going to do the latter.

Routes are defined as files in the routes directory. The file name of the module is important: it is used to determine the path that the route will handle. For example, if the file name is index.js, the route will handle requests to /. If the file name is about.js, the route will handle requests to /about. If the file name is contact.js and is placed inside of the routes/about/ folder, the route will handle requests to /about/contact. This concept is called File-system routing. You can learn more about it on the Concepts: Routing page.

Route files that render HTML are JavaScript or TypeScript modules that export a JSX component as their default export. This component will be rendered for every request to the route's path. The component receives a few properties that can be used to customize the rendered output, such as the current route, the url of the request, and handler data (more on that later).

In the demo project we'll create a route to handle the /about page. To do this, one needs to create a new routes/about.tsx file. In this file, we can declare a component that should be rendered every time a user visits the page. This is done with JSX.

ℹ️ To learn more about JSX, you can read this article in the React documentation. Beware that fresh does not use React, but rather Preact, a lighter weight virtual dom library that works similar to React.

// routes/about.tsx

/** @jsx h */
import { h } from "$fresh/runtime.ts";

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>This is the about page.</p>
    </main>
  );
}

ℹ️ The first two lines are the JSX pragma, and the import for the JSX create element function. These are just boilerplate. You don't need to know exactly what they do - they just ensure that JSX get's rendered correctly.

This alone is not yet enough to actually view the page in the browser though. If one tries to visit http://localhost:8000/about, the server will return a 404 code.

Before fresh can render the page, the fresh.gen.ts manifest needs to be updated to reflect this new route. To do this, one can run the fresh manifest command:

$ fresh manifest
Manifest generated and written to ./my-project/fresh.gen.ts

ℹ️ Updating the manifest needs to be done every time you add, remove, or rename a page. It does not need to be done if just the contents of a page are edited.

Now the page will be visible at http://localhost:8000/about.