# Setting Up Our Frontend with TanStack Start

We've finished our backend series — a Directus instance running on a VPS managed by Coolify, backed by PostgreSQL and Redis, with a products collection already built and secured with roles and permissions.

Now it's time to build a frontend to actually display that data. For this, we're using **TanStack Start**, **Tailwind CSS**, and **shadcn/ui**. This post covers getting TanStack Start installed and running.

%[https://www.youtube.com/watch?v=vzN_njItJFo] 

## What Is TanStack Start?

Straight from the [official docs](https://tanstack.com/start/latest/docs/framework/react/overview):

> TanStack Start is a full-stack React framework powered by TanStack Router. It provides full-document SSR, streaming, server functions, client/server builds, and more. With Vite and Rsbuild support, it's ready to develop and deploy to the hosting provider or runtime you want.

In short: it offers the same kind of full-stack capability as frameworks like Next.js or Remix, built on top of TanStack Router.

## Creating the Project

First, create a folder for your app. I'm naming mine `app_fe` — "fe" for front end.

> **Naming convention tip:** I use `<app-name>_fe` for all my frontend project folders — so an e-commerce project would be `store_fe`. Makes the folder's purpose obvious at a glance.

From inside that folder, run:

```bash
npx @tanstack/cli@latest create .
```

> **Note the trailing dot.** Since we created the folder ourselves beforehand, the dot tells the CLI to install directly into the current directory. Omit the dot if you'd rather the CLI create a new folder for you.

## Walking Through the Setup Prompts

The CLI will walk you through a series of choices:

| Prompt | Selection |
| --- | --- |
| Select Framework | React |
| Select Toolchain | ESLint |
| Select Deployment Adapter | None (self-hosting on our own VPS) |
| Include demo/example pages? | No |
| What add-ons would you like? | shadcn/ui |
| Initialize a new git repository? | Yes |
| Continue with these settings? | Yes |

Wait for the install to finish.

## Running the App

Navigate into your app directory (if you aren't already there) and run:

```bash
npm run dev
```

Open your browser to `http://localhost:3000`. Congratulations — your TanStack Start app is up and running.

## Editing the Home Page

Open `src/routes/index.tsx`. Delete everything inside the div, and save — your home page should now be completely blank. This file is your landing page, the first thing visitors see.

Add an `h1` tag inside the empty div:

```tsx
<h1>Home</h1>
```

Save, and you'll see "Home" rendered on the page. Now let's add some Tailwind styling:

```tsx
<h1 className="font-bold text-5xl text-slate-700">Home</h1>
```

Save again — notice Tailwind works right out of the box, no extra configuration needed.

## File-Based Routing

TanStack Start runs on TanStack Router, which uses **file-based routing**. Every file added to the `routes` folder automatically becomes a navigable page.

### Adding an About Page

Create `src/routes/about.tsx`:

```tsx
<div className="p-8">
  <h1 className="font-bold text-5xl text-slate-700">About</h1>
</div>
```

Save, then visit `http://localhost:3000/about`. Notice the home page lives at `localhost:3000/`, and the about page lives at `localhost:3000/about` — TanStack Start handled that routing automatically, purely based on the filename.

### Adding a Products Page

Create `src/routes/products.tsx` the same way:

```tsx
<div className="p-8">
  <h1 className="font-bold text-5xl text-slate-700">Products</h1>
</div>
```

Visit `localhost:3000/products`, and there's your new page. That's as simple as basic routing gets — there's plenty more you can do with nested and dynamic routes, which we'll cover as it becomes relevant.

## What Is That `__root.tsx` File?

You've probably noticed a file called `__root.tsx` sitting in your routes folder. Here's the simplest way to think about it:

Picture any large website — Amazon, YouTube, anything. Every page has a header up top and often a footer at the bottom that never change, no matter what page you're on. But the content in the middle changes depending on where you navigated.

`__root.tsx` is the file that builds that "never changes" part. It's the frame around every page in your app. Every route you build — home, about, products — gets rendered *inside* this one file. Write it once, and every page automatically inherits it.

> **A word of caution:** this file is central to how TanStack Router works under the hood. Avoid modifying it until you understand exactly what each piece does — we'll take a closer look at it in an upcoming post, exactly when it becomes relevant to what we're building.

## Summary

In this part, we:

*   Installed and configured a new TanStack Start project
    
*   Ran it locally and confirmed Tailwind works out of the box
    
*   Learned file-based routing by building About and Products pages
    
*   Got introduced to `__root.tsx`, the file behind every page in the app
    

That wraps up our frontend setup. Next up, we'll start pulling real data from our Directus backend into this frontend — connecting everything we've built across this series.

* * *

*Found this useful? Follow for more Directus and TanStack Start tutorials, or check out the video version above.*