Lesson

Scaffold new application with Tanstack Router

Scaffold a new app with TanStack Router using npm create @tanstack/router and understand project setup with Vite and React

Access required

This lesson is available with an active egghead membership.

Access: Included
Transcript: Needs source

Access: Included
Transcript: Needs source

In this lesson, we learn how to quickly scaffold a new application using TanStack Router by running npm create @tanstack/router. This command initializes a project with the necessary dependencies, including Vite and React plugins for TanStack Router, as well as React Router DevTools.

We explore the project structure, focusing on key files like main.tsx (which sets up the application using ReactDOM.createRoot(rootElement)), and routeTree.gen.ts, an automatically generated file that should not be manually edited. This file is dynamically updated when changes are made to the application's routes.

The lesson also covers how tooling like VS Code is configured to prevent accidental overwrites of generated files.