create-tsrouter-app 0.0.4 → 0.1.0

package/CONTRIBUTING.md

@@ -24,9 +24,11 @@
 
 These must all product running applications that can be built (`pnpm build`) and tested (`pnpm test`).
 
-| Command                                                 | Description                                |
-| ------------------------------------------------------- | ------------------------------------------ |
-| `pnpm start app-js`                                     | Creates a JavaScript app                   |
-| `pnpm start app-ts --template typescript`               | Creates a TypeScript app                   |
-| `pnpm start app-js-tw --tailwind`                       | Creates a JavaScript app with Tailwind CSS |
-| `pnpm start app-ts-tw --template typescript --tailwind` | Creates a TypeScript app with Tailwind CSS |
+| Command                                                  | Description                                                        |
+| -------------------------------------------------------- | ------------------------------------------------------------------ |
+| `pnpm start app-js`                                      | Creates a JavaScript app                                           |
+| `pnpm start app-ts --template typescript`                | Creates a TypeScript app                                           |
+| `pnpm start app-js-tw --tailwind`                        | Creates a JavaScript app with Tailwind CSS                         |
+| `pnpm start app-ts-tw --template typescript --tailwind`  | Creates a TypeScript app with Tailwind CSS                         |
+| `pnpm start app-fr --template file-router`               | Creates a TypeScript app with File Based Routing                   |
+| `pnpm start app-fr-tw --template file-router --tailwind` | Creates a TypeScript app with File Based Routing with Tailwind CSS |

package/README.md

@@ -2,7 +2,7 @@
 
 This CLI applications builds Tanstack Start applications that are the functional equivalent of [Create React App](https://create-react-app.dev/).
 
-To help accelerate the migration away from create-react-app we created the create-tsrouter-app CLI which is a plug-n-play replacement for CRA.
+To help accelerate the migration away from `create-react-app` we created the `create-tsrouter-app` CLI which is a plug-n-play replacement for CRA.
 
 Instead of:
 
@@ -38,6 +38,10 @@ You can also specify your preferred package manager with `--package-manager` suc
 
 Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) be found in the generated `README.md` for your project.
 
+## File Based Routing
+
+By default `create-tsrouter-app` will create a Code Based Routing application. If you want to use File Based Routing then you can specify `--template file-router`. The location of the home page will be `app/routes/index.tsx`.
+
 # Contributing
 
 Check out the [Contributing](CONTRIBUTING.md) guide.

package/dist/index.js

@@ -8,27 +8,43 @@ import { execa } from 'execa';
 import { render } from 'ejs';
 import { SUPPORTED_PACKAGE_MANAGERS, getPackageManager, } from './utils/getPackageManager.js';
 const program = new Command();
-const createCopyFile = (templateDir, targetDir) => async function copyFiles(files) {
-    for (const file of files) {
-        const targetFileName = file.replace('.tw', '');
-        await copyFile(resolve(templateDir, file), resolve(targetDir, targetFileName));
-    }
-};
-const createTemplateFile = (projectName, options, templateDir, targetDir) => async function templateFile(file, targetFileName) {
-    const templateValues = {
-        packageManager: options.packageManager,
-        projectName: projectName,
-        typescript: options.typescript,
-        tailwind: options.tailwind,
-        js: options.typescript ? 'ts' : 'js',
-        jsx: options.typescript ? 'tsx' : 'jsx',
+const CODE_ROUTER = 'code-router';
+const FILE_ROUTER = 'file-router';
+function sortObject(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((acc, key) => {
+        acc[key] = obj[key];
+        return acc;
+    }, {});
+}
+function createCopyFile(targetDir) {
+    return async function copyFiles(templateDir, files) {
+        for (const file of files) {
+            const targetFileName = file.replace('.tw', '');
+            await copyFile(resolve(templateDir, file), resolve(targetDir, targetFileName));
+        }
+    };
+}
+function createTemplateFile(projectName, options, targetDir) {
+    return async function templateFile(templateDir, file, targetFileName) {
+        const templateValues = {
+            packageManager: options.packageManager,
+            projectName: projectName,
+            typescript: options.typescript,
+            tailwind: options.tailwind,
+            js: options.typescript ? 'ts' : 'js',
+            jsx: options.typescript ? 'tsx' : 'jsx',
+            fileRouter: options.mode === FILE_ROUTER,
+            codeRouter: options.mode === CODE_ROUTER,
+        };
+        const template = await readFile(resolve(templateDir, file), 'utf-8');
+        const content = render(template, templateValues);
+        const target = targetFileName ?? file.replace('.ejs', '');
+        await writeFile(resolve(targetDir, target), content);
     };
-    const template = await readFile(resolve(templateDir, file), 'utf-8');
-    const content = render(template, templateValues);
-    const target = targetFileName ?? file.replace('.ejs', '');
-    await writeFile(resolve(targetDir, target), content);
-};
-async function createPackageJSON(projectName, options, templateDir, targetDir) {
+}
+async function createPackageJSON(projectName, options, templateDir, routerDir, targetDir) {
     let packageJSON = JSON.parse(await readFile(resolve(templateDir, 'package.json'), 'utf8'));
     packageJSON.name = projectName;
     if (options.typescript) {
@@ -51,22 +67,35 @@ async function createPackageJSON(projectName, options, templateDir, targetDir) {
             },
         };
     }
+    if (options.mode === FILE_ROUTER) {
+        const frPackageJSON = JSON.parse(await readFile(resolve(routerDir, 'package.fr.json'), 'utf8'));
+        packageJSON = {
+            ...packageJSON,
+            dependencies: {
+                ...packageJSON.dependencies,
+                ...frPackageJSON.dependencies,
+            },
+        };
+    }
+    packageJSON.dependencies = sortObject(packageJSON.dependencies);
+    packageJSON.devDependencies = sortObject(packageJSON.devDependencies);
     await writeFile(resolve(targetDir, 'package.json'), JSON.stringify(packageJSON, null, 2));
 }
 async function createApp(projectName, options) {
-    const templateDir = fileURLToPath(new URL('../project-template', import.meta.url));
+    const templateDirBase = fileURLToPath(new URL('../templates/base', import.meta.url));
+    const templateDirRouter = fileURLToPath(new URL(`../templates/${options.mode}`, import.meta.url));
     const targetDir = resolve(process.cwd(), projectName);
-    const copyFiles = createCopyFile(templateDir, targetDir);
-    const templateFile = createTemplateFile(projectName, options, templateDir, targetDir);
+    const copyFiles = createCopyFile(targetDir);
+    const templateFile = createTemplateFile(projectName, options, targetDir);
     intro(`Creating a new TanStack app in ${targetDir}...`);
     // Make the root directory
     await mkdir(targetDir, { recursive: true });
     // Setup the .vscode directory
     await mkdir(resolve(targetDir, '.vscode'), { recursive: true });
-    await copyFile(resolve(templateDir, '.vscode/settings.json'), resolve(targetDir, '.vscode/settings.json'));
+    await copyFile(resolve(templateDirBase, '.vscode/settings.json'), resolve(targetDir, '.vscode/settings.json'));
     // Fill the public directory
     await mkdir(resolve(targetDir, 'public'), { recursive: true });
-    copyFiles([
+    copyFiles(templateDirBase, [
         './public/robots.txt',
         './public/favicon.ico',
         './public/manifest.json',
@@ -75,36 +104,50 @@ async function createApp(projectName, options) {
     ]);
     // Make the src directory
     await mkdir(resolve(targetDir, 'src'), { recursive: true });
+    if (options.mode === FILE_ROUTER) {
+        await mkdir(resolve(targetDir, 'src/routes'), { recursive: true });
+    }
     // Copy in Vite and Tailwind config and CSS
     if (!options.tailwind) {
-        await copyFiles(['./src/App.css']);
+        await copyFiles(templateDirBase, ['./src/App.css']);
     }
-    await templateFile('./vite.config.js.ejs');
-    await templateFile('./src/styles.css.ejs');
-    copyFiles(['./src/logo.svg']);
+    await templateFile(templateDirBase, './vite.config.js.ejs');
+    await templateFile(templateDirBase, './src/styles.css.ejs');
+    copyFiles(templateDirBase, ['./src/logo.svg']);
     // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-    await templateFile('./src/App.tsx.ejs', options.typescript ? undefined : './src/App.jsx');
-    await templateFile('./src/App.test.tsx.ejs', options.typescript ? undefined : './src/App.test.jsx');
+    if (options.mode === FILE_ROUTER) {
+        copyFiles(templateDirRouter, ['./src/routes/__root.tsx']);
+        await templateFile(templateDirBase, './src/App.tsx.ejs', './src/routes/index.tsx');
+    }
+    else {
+        await templateFile(templateDirBase, './src/App.tsx.ejs', options.typescript ? undefined : './src/App.jsx');
+        await templateFile(templateDirBase, './src/App.test.tsx.ejs', options.typescript ? undefined : './src/App.test.jsx');
+    }
+    // Create the main entry point
+    if (options.typescript) {
+        await templateFile(templateDirRouter, './src/main.tsx.ejs');
+    }
+    else {
+        await templateFile(templateDirRouter, './src/main.tsx.ejs', './src/main.jsx');
+    }
     // Setup the main, reportWebVitals and index.html files
     if (options.typescript) {
-        await templateFile('./src/main.tsx.ejs');
-        await templateFile('./src/reportWebVitals.ts.ejs');
+        await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs');
     }
     else {
-        await templateFile('./src/main.tsx.ejs', './src/main.jsx');
-        await templateFile('./src/reportWebVitals.ts.ejs', './src/reportWebVitals.js');
+        await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs', './src/reportWebVitals.js');
     }
-    await templateFile('./index.html.ejs');
+    await templateFile(templateDirBase, './index.html.ejs');
     // Setup tsconfig
     if (options.typescript) {
-        await copyFiles(['./tsconfig.json', './tsconfig.dev.json']);
+        await copyFiles(templateDirBase, ['./tsconfig.json', './tsconfig.dev.json']);
     }
     // Setup the package.json file, optionally with typescript and tailwind
-    await createPackageJSON(projectName, options, templateDir, targetDir);
+    await createPackageJSON(projectName, options, templateDirBase, templateDirRouter, targetDir);
     // Add .gitignore
-    await copyFile(resolve(templateDir, 'gitignore'), resolve(targetDir, '.gitignore'));
+    await copyFile(resolve(templateDirBase, 'gitignore'), resolve(targetDir, '.gitignore'));
     // Create the README.md
-    await templateFile('README.md.ejs');
+    await templateFile(templateDirBase, 'README.md.ejs');
     // Install dependencies
     const s = spinner();
     s.start(`Installing dependencies via ${options.packageManager}...`);
@@ -116,9 +159,11 @@ program
     .name('create-tsrouter-app')
     .description('CLI to create a new TanStack application')
     .argument('<project-name>', 'name of the project')
-    .option('--template <type>', 'project template (typescript/javascript)', (value) => {
-    if (value !== 'typescript' && value !== 'javascript') {
-        throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript`);
+    .option('--template <type>', 'project template (typescript, javascript, file-router)', (value) => {
+    if (value !== 'typescript' &&
+        value !== 'javascript' &&
+        value !== 'file-router') {
+        throw new InvalidArgumentError(`Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`);
     }
     return value;
 }, 'javascript')
@@ -130,11 +175,12 @@ program
 }, getPackageManager())
     .option('--tailwind', 'add Tailwind CSS', false)
     .action((projectName, options) => {
-    const typescript = options.template === 'typescript';
+    const typescript = options.template === 'typescript' || options.template === 'file-router';
     createApp(projectName, {
         typescript,
         tailwind: options.tailwind,
         packageManager: options.packageManager,
+        mode: options.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
     });
 });
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/index.ts

@@ -17,14 +17,27 @@ import type { PackageManager } from './utils/getPackageManager.js'
 
 const program = new Command()
 
+const CODE_ROUTER = 'code-router'
+const FILE_ROUTER = 'file-router'
+
 interface Options {
   typescript: boolean
   tailwind: boolean
   packageManager: PackageManager
+  mode: typeof CODE_ROUTER | typeof FILE_ROUTER
+}
+
+function sortObject(obj: Record<string, string>): Record<string, string> {
+  return Object.keys(obj)
+    .sort()
+    .reduce<Record<string, string>>((acc, key) => {
+      acc[key] = obj[key]
+      return acc
+    }, {})
 }
 
-const createCopyFile = (templateDir: string, targetDir: string) =>
-  async function copyFiles(files: Array<string>) {
+function createCopyFile(targetDir: string) {
+  return async function copyFiles(templateDir: string, files: Array<string>) {
     for (const file of files) {
       const targetFileName = file.replace('.tw', '')
       await copyFile(
@@ -33,14 +46,18 @@ const createCopyFile = (templateDir: string, targetDir: string) =>
       )
     }
   }
+}
 
-const createTemplateFile = (
+function createTemplateFile(
   projectName: string,
   options: Required<Options>,
-  templateDir: string,
   targetDir: string,
-) =>
-  async function templateFile(file: string, targetFileName?: string) {
+) {
+  return async function templateFile(
+    templateDir: string,
+    file: string,
+    targetFileName?: string,
+  ) {
     const templateValues = {
       packageManager: options.packageManager,
       projectName: projectName,
@@ -48,6 +65,8 @@ const createTemplateFile = (
       tailwind: options.tailwind,
       js: options.typescript ? 'ts' : 'js',
       jsx: options.typescript ? 'tsx' : 'jsx',
+      fileRouter: options.mode === FILE_ROUTER,
+      codeRouter: options.mode === CODE_ROUTER,
     }
 
     const template = await readFile(resolve(templateDir, file), 'utf-8')
@@ -55,11 +74,13 @@ const createTemplateFile = (
     const target = targetFileName ?? file.replace('.ejs', '')
     await writeFile(resolve(targetDir, target), content)
   }
+}
 
 async function createPackageJSON(
   projectName: string,
   options: Required<Options>,
   templateDir: string,
+  routerDir: string,
   targetDir: string,
 ) {
   let packageJSON = JSON.parse(
@@ -90,6 +111,24 @@ async function createPackageJSON(
       },
     }
   }
+  if (options.mode === FILE_ROUTER) {
+    const frPackageJSON = JSON.parse(
+      await readFile(resolve(routerDir, 'package.fr.json'), 'utf8'),
+    )
+    packageJSON = {
+      ...packageJSON,
+      dependencies: {
+        ...packageJSON.dependencies,
+        ...frPackageJSON.dependencies,
+      },
+    }
+  }
+  packageJSON.dependencies = sortObject(
+    packageJSON.dependencies as Record<string, string>,
+  )
+  packageJSON.devDependencies = sortObject(
+    packageJSON.devDependencies as Record<string, string>,
+  )
   await writeFile(
     resolve(targetDir, 'package.json'),
     JSON.stringify(packageJSON, null, 2),
@@ -97,18 +136,16 @@ async function createPackageJSON(
 }
 
 async function createApp(projectName: string, options: Required<Options>) {
-  const templateDir = fileURLToPath(
-    new URL('../project-template', import.meta.url),
+  const templateDirBase = fileURLToPath(
+    new URL('../templates/base', import.meta.url),
+  )
+  const templateDirRouter = fileURLToPath(
+    new URL(`../templates/${options.mode}`, import.meta.url),
   )
   const targetDir = resolve(process.cwd(), projectName)
 
-  const copyFiles = createCopyFile(templateDir, targetDir)
-  const templateFile = createTemplateFile(
-    projectName,
-    options,
-    templateDir,
-    targetDir,
-  )
+  const copyFiles = createCopyFile(targetDir)
+  const templateFile = createTemplateFile(projectName, options, targetDir)
 
   intro(`Creating a new TanStack app in ${targetDir}...`)
 
@@ -118,13 +155,13 @@ async function createApp(projectName: string, options: Required<Options>) {
   // Setup the .vscode directory
   await mkdir(resolve(targetDir, '.vscode'), { recursive: true })
   await copyFile(
-    resolve(templateDir, '.vscode/settings.json'),
+    resolve(templateDirBase, '.vscode/settings.json'),
     resolve(targetDir, '.vscode/settings.json'),
   )
 
   // Fill the public directory
   await mkdir(resolve(targetDir, 'public'), { recursive: true })
-  copyFiles([
+  copyFiles(templateDirBase, [
     './public/robots.txt',
     './public/favicon.ico',
     './public/manifest.json',
@@ -134,55 +171,85 @@ async function createApp(projectName: string, options: Required<Options>) {
 
   // Make the src directory
   await mkdir(resolve(targetDir, 'src'), { recursive: true })
+  if (options.mode === FILE_ROUTER) {
+    await mkdir(resolve(targetDir, 'src/routes'), { recursive: true })
+  }
 
   // Copy in Vite and Tailwind config and CSS
   if (!options.tailwind) {
-    await copyFiles(['./src/App.css'])
+    await copyFiles(templateDirBase, ['./src/App.css'])
   }
-  await templateFile('./vite.config.js.ejs')
-  await templateFile('./src/styles.css.ejs')
+  await templateFile(templateDirBase, './vite.config.js.ejs')
+  await templateFile(templateDirBase, './src/styles.css.ejs')
 
-  copyFiles(['./src/logo.svg'])
+  copyFiles(templateDirBase, ['./src/logo.svg'])
 
   // Setup the app component. There are four variations, typescript/javascript and tailwind/non-tailwind.
-  await templateFile(
-    './src/App.tsx.ejs',
-    options.typescript ? undefined : './src/App.jsx',
-  )
-  await templateFile(
-    './src/App.test.tsx.ejs',
-    options.typescript ? undefined : './src/App.test.jsx',
-  )
+  if (options.mode === FILE_ROUTER) {
+    copyFiles(templateDirRouter, ['./src/routes/__root.tsx'])
+    await templateFile(
+      templateDirBase,
+      './src/App.tsx.ejs',
+      './src/routes/index.tsx',
+    )
+  } else {
+    await templateFile(
+      templateDirBase,
+      './src/App.tsx.ejs',
+      options.typescript ? undefined : './src/App.jsx',
+    )
+    await templateFile(
+      templateDirBase,
+      './src/App.test.tsx.ejs',
+      options.typescript ? undefined : './src/App.test.jsx',
+    )
+  }
+
+  // Create the main entry point
+  if (options.typescript) {
+    await templateFile(templateDirRouter, './src/main.tsx.ejs')
+  } else {
+    await templateFile(
+      templateDirRouter,
+      './src/main.tsx.ejs',
+      './src/main.jsx',
+    )
+  }
 
   // Setup the main, reportWebVitals and index.html files
   if (options.typescript) {
-    await templateFile('./src/main.tsx.ejs')
-    await templateFile('./src/reportWebVitals.ts.ejs')
+    await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs')
   } else {
-    await templateFile('./src/main.tsx.ejs', './src/main.jsx')
     await templateFile(
+      templateDirBase,
       './src/reportWebVitals.ts.ejs',
       './src/reportWebVitals.js',
     )
   }
-  await templateFile('./index.html.ejs')
+  await templateFile(templateDirBase, './index.html.ejs')
 
   // Setup tsconfig
   if (options.typescript) {
-    await copyFiles(['./tsconfig.json', './tsconfig.dev.json'])
+    await copyFiles(templateDirBase, ['./tsconfig.json', './tsconfig.dev.json'])
   }
 
   // Setup the package.json file, optionally with typescript and tailwind
-  await createPackageJSON(projectName, options, templateDir, targetDir)
+  await createPackageJSON(
+    projectName,
+    options,
+    templateDirBase,
+    templateDirRouter,
+    targetDir,
+  )
 
   // Add .gitignore
   await copyFile(
-    resolve(templateDir, 'gitignore'),
+    resolve(templateDirBase, 'gitignore'),
     resolve(targetDir, '.gitignore'),
   )
 
   // Create the README.md
-  await templateFile('README.md.ejs')
+  await templateFile(templateDirBase, 'README.md.ejs')
 
   // Install dependencies
   const s = spinner()
@@ -197,13 +264,17 @@ program
   .name('create-tsrouter-app')
   .description('CLI to create a new TanStack application')
   .argument('<project-name>', 'name of the project')
-  .option<'typescript' | 'javascript'>(
+  .option<'typescript' | 'javascript' | 'file-router'>(
     '--template <type>',
-    'project template (typescript/javascript)',
+    'project template (typescript, javascript, file-router)',
     (value) => {
-      if (value !== 'typescript' && value !== 'javascript') {
+      if (
+        value !== 'typescript' &&
+        value !== 'javascript' &&
+        value !== 'file-router'
+      ) {
         throw new InvalidArgumentError(
-          `Invalid template: ${value}. Only the following are allowed: typescript, javascript`,
+          `Invalid template: ${value}. Only the following are allowed: typescript, javascript, file-router`,
         )
       }
       return value
@@ -230,17 +301,19 @@ program
     (
       projectName: string,
       options: {
-        template: string
+        template: 'typescript' | 'javascript' | 'file-router'
         tailwind: boolean
         packageManager: PackageManager
       },
     ) => {
-      const typescript = options.template === 'typescript'
+      const typescript =
+        options.template === 'typescript' || options.template === 'file-router'
 
       createApp(projectName, {
         typescript,
         tailwind: options.tailwind,
         packageManager: options.packageManager,
+        mode: options.template === 'file-router' ? FILE_ROUTER : CODE_ROUTER,
       })
     },
   )

package/{project-template → templates/base}/README.md.ejs

@@ -32,11 +32,14 @@ This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
 This project uses CSS for styling.
 <% } %>
 ## Routing
-
-This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.
+<% if (fileRouter) { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as fiels in `src/routes`.<% } else { %>This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a code based router. Which means that the routes are defined in code (in the `./src/main.<%= jsx %>` file). If you like you can also use a file based routing setup by following the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) guide.<% } %>
 
 ### Adding A Route
+<% if (fileRouter) { %>
+To add a new route to your application just add another a new file in the `./src/routes` directory.
 
+TanStack will automatically generate the content of the route file for you.
+<% } else { %>
 To add a new route to your application just add another `createRoute` call to the `./src/main.<%= jsx %>` file. The example below adds a new `/about`route to the root route.
 
 ```tsx
@@ -70,7 +73,7 @@ const aboutRoute = createRoute({
 That is how we have the `App` component set up with the home page.
 
 For more information on the options you have when you are creating code based routes check out the [Code Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/code-based-routing) documentation.
-
+<% } %>
 Now that you have two routes you can use a `Link` component to navigate between them.
 
 ### Adding Links
@@ -93,6 +96,7 @@ More information on the `Link` component can be found in the [Link documentation
 
 ### Using A Layout
 
+<% if (codeRouter) { %>
 Layouts can be used to wrap the contents of the routes in menus, headers, footers, etc.
 
 There is already a layout in the `src/main.<%= jsx %>` file:
@@ -111,6 +115,8 @@ const rootRoute = createRootRoute({
 You can use the React component specified in the `component` property of the `rootRoute` to wrap the contents of the routes. The `<Outlet />` component is used to render the current route within the body of the layout. For example you could add a header to the layout like so:
 
 ```tsx
+import { Link } from "@tanstack/react-router";
+
 const rootRoute = createRootRoute({
   component: () => (
     <>
@@ -126,11 +132,37 @@ const rootRoute = createRootRoute({
   ),
 });
 ```
+<% } else { %>In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
+
+Here is an example layout that includes a header:
 
+```tsx
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+import { Link } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+<% } %>
 The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
 
 More information on layouts can be found in the [Layouts documentation](hthttps://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
 
+<% if (codeRouter) { %>
 ### Migrating To File Base Routing
 
 First you need to add the Vite plugin for Tanstack Router:
@@ -301,7 +333,7 @@ reportWebVitals();
 Now you've got a file based routing setup in your project! Let's have some fun with it! Just create a file in `about.<%= jsx %>` in `src/routes` and it if the application is running TanStack will automatically add contents to the file and you'll have the start of your `/about` route ready to go with no additional work. You can see why folks find File Based Routing so easy to use.
 
 You can find out everything you need to know on how to use file based routing in the [File Based Routing](https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing) documentation.
-
+<% } %>
 ## Data Fetching
 
 There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.

package/{project-template → templates/base}/package.json

@@ -6,7 +6,7 @@
     "start": "vite --port 3000",
     "build": "vite build && tsc --noEmit",
     "serve": "vite preview",
-    "test": "vitest"
+    "test": "vitest run"
   },
   "dependencies": {
     "@tanstack/react-router": "^1.104.1",

package/{project-template → templates/base}/src/App.tsx.ejs

@@ -1,7 +1,15 @@
-import logo from "./logo.svg";
-<% if (!tailwind) { %>
-import "./App.css";
+<% if (fileRouter) { %>
+import { createFileRoute } from "@tanstack/react-router";
+import logo from "../logo.svg";<% if (!tailwind) { %>
+import "../App.css";
 <% } %>
+<% } else { %>import logo from "./logo.svg";<% if (!tailwind) { %>
+import "./App.css";
+<% } %><% } %><% if (fileRouter) { %>
+
+export const Route = createFileRoute("/")({
+  component: App,
+});<% } %>
 
 function App() {
   return (<% if (tailwind) { %>
@@ -13,7 +21,7 @@ function App() {
           alt="logo"
         />
         <p>
-          Edit <code>src/App.<%= jsx %></code> and save to reload.
+          Edit <code><% if (fileRouter) { %>src/routes/index.tsx<% } else {%>src/App.<%= jsx %><% } %></code> and save to reload.
         </p>
         <a
           className="text-[#61dafb] hover:underline"
@@ -38,7 +46,7 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.<%= jsx %></code> and save to reload.
+          Edit <code><% if (fileRouter) { %>src/routes/index.tsx<% } else {%>src/App.<%= jsx %><% } %></code> and save to reload.
         </p>
         <a
           className="App-link"
@@ -61,4 +69,6 @@ function App() {
 <% } %>  );
 }
 
+<% if (!fileRouter) { %>
 export default App;
+<% } %>

package/templates/base/vite.config.js.ejs

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import viteReact from "@vitejs/plugin-react";<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite";
+<% } %><%if (fileRouter) { %>
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+<% } %>
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [<% if(fileRouter) { %>TanStackRouterVite(), <% } %>viteReact()<% if (tailwind) { %>, tailwindcss()<% } %>],
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
+});

package/templates/file-router/package.fr.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/router-plugin": "^1.105.0"
+  }
+}

package/templates/file-router/src/main.tsx.ejs

@@ -0,0 +1,35 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals";
+
+// Create a new router instance
+const router = createRouter({ routeTree });
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById("app")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/templates/file-router/src/routes/__root.tsx

@@ -0,0 +1,11 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})

package/project-template/vite.config.js.ejs

@@ -1,14 +0,0 @@
-import { defineConfig } from "vite";
-import viteReact from "@vitejs/plugin-react";
-<% if (tailwind) { %>
-import tailwindcss from "@tailwindcss/vite";
-<% } %>
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [viteReact()<% if (tailwind) { %>, tailwindcss()<% } %>],
-  test: {
-    globals: true,
-    environment: "jsdom",
-  },
-});