---
title: Top-level src directory
description: Learn how to use a top-level src directory in your Expo Router project.
hideTOC: true
---

import { FileTree } from '~/ui/components/FileTree';

import { Terminal } from '~/ui/components/Snippet';

As your project grows, it can be helpful to move all of the directories containing application code into a single **src** directory. Expo Router supports this out of the box.

<FileTree
  files={['src/app/_layout.js', 'src/app/index.js', 'src/components/button.js', 'package.json']}
/>

Simply move your **app** directory to **src/app** and restart the development server with a clear cache:

<Terminal
  cmd={['$ npx expo start --clear', '', '# Or when exporting', '$ npx expo export --clear']}
/>

**Notes**:

- The config files (**app.config.js**, **app.json**, **package.json**, **metro.config.js**, **tsconfig.json**) should remain in the root directory.
- The **src/app** directory takes higher precedence than the root **app** directory. Only the **src/app** directory will be used if you have both.
- The **public** directory should remain in the root directory.
- Static rendering will automatically use the **src/app** directory if it exists.
- You may consider updating any [type aliases](/guides/typescript#path-aliases) to point to the **src** directory instead of the root directory.