How to Print Your App Directory Structure in Terminal
Terminal CLI Developer Tools File Structure Web Development Productivity
To print your app’s directory structure in the terminal, use one of these commands:
🌳 1. Using tree (Recommended - Clean & Visual)
Install tree if not available:
# macOS (with Homebrew)
brew install tree
# Ubuntu/Debian
sudo apt-get install tree
# CentOS/RHEL/Fedora
sudo yum install tree # or
sudo dnf install tree
Basic usage:
# Show entire project structure
tree
# Show only specific depth (e.g., 2 levels deep)
tree -L 2
# Exclude node_modules, .git, etc.
tree -I 'node_modules|.git|dist|build|.next'
# Show with file sizes
tree -s
# Save to file
tree -I 'node_modules|.git' > structure.txt
Example output:
my-app/
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── src/
│ ├── components/
│ │ └── Header.tsx
│ ├── pages/
│ │ ├── api/
│ │ └── index.tsx
│ └── styles/
│ └── globals.css
├── package.json
├── tsconfig.json
└── next.config.js
📁 2. Using find (Built-in - No Installation Needed)
# Basic structure (all files)
find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'
# Exclude common directories
find . -type f ! -path "./node_modules/*" ! -path "./.git/*" ! -path "./dist/*" ! -path "./build/*" ! -path "./.next/*"
# With indentation (macOS/Linux)
find . -not -path "*/node_modules/*" -not -path "*/\.git/*" | sort
🔍 3. Quick One-Liners for Common Cases
# Just show directory names (no files)
find . -type d | sort
# Show only source code structure (exclude hidden and build dirs)
ls -R | grep ":$" | sed -e 's/:$//' -e 's/[^-][^\/]*\//--/g' -e 's/^/ /' -e 's/-/|/'
# Simple list with indentation
du -a --max-depth=2
💡 Pro Tips:
-
Always exclude
node_modules– it’s huge and not relevant to your app structure:tree -I 'node_modules' -
For Next.js projects, also exclude build directories:
tree -I 'node_modules|.git|.next|out|dist' -
Save output to file for documentation:
tree -I 'node_modules|.git' -o project-structure.txt -
Show only specific file types:
tree -P "*.tsx" # Only TypeScript React files