File Structure

Guiding Principles

Files that change together should live together.
Minimal requirements, maximum flexibility

Example file structure

├── app/
│   ├── blitz-client.ts
│   ├── blitz-server.ts
│   ├── core/
│   │   ├── components/
│   │   │   ├── Form.tsx
│   │   │   └── LabeledTextField.tsx
│   │   ├── hooks/
│   │   │   └── useCurrentUser.ts
│   │   └── layouts/
│   │       └── Layout.tsx
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignupForm.tsx
│   │   ├── mutations/
│   │   │   ├── login.ts
│   │   │   ├── logout.ts
│   │   │   └── signup.ts
│   │   ├── pages/
│   │   │   ├── login.tsx
│   │   │   └── signup.tsx
│   │   ├── auth-utils.ts
│   │   └── validations.ts
│   ├── users/
│   │   └── queries/
│   │       └── getCurrentUser.ts
│   └── projects/
│       ├── components/
│       │   ├── Project.js
│       │   ├── ProjectForm.js
│       │   └── Projects.js
│       ├── mutations/
│       │   ├── createProject.js
│       │   ├── createProject.test.js
│       │   ├── deleteProject.js
│       │   ├── deleteProject.test.js
│       │   ├── updateProject.js
│       │   └── updateProject.test.js
│       └── queries/
│           ├── getProject.js
│           └── getProjects.js
├── pages/
│   ├── api/
│   │   └── stripe-webhook.js
│   ├── 404.tsx
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.test.tsx
│   ├── index.tsx
│   └── projects/
│       ├── [id]/
│       │   └── edit.js
│       ├── [id].js
│       ├── index.js
│       └── new.js
├── db/
│   ├── index.ts
│   ├── schema.prisma
│   └── seeds.ts
├── integrations/
│   └── sentry.ts
├── public/
│   ├── favicon.ico*
│   └── logo.png
├── test/
│   ├── setup.ts
│   └── utils.tsx
├── README.md
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── tsconfig.json
├── types.ts
└── yarn.lock

`app`

Contains all your core application code.

The file structure nested inside app/ can be anything you want, but we recommend the following:
- First layer folders to be a "domain context", like core/, projects/, users/, billing/, etc.
- All other folders like components/ and hooks/ go inside one of the above domain context folders
queries/ and mutations/ are for your Blitz queries and mutations. Each query and mutation is exposed at a URL corresponding to its file path.
blitz-client.ts and blitz-server.ts contain Blitz Toolkit setup.

`db`

Contains database configuration, schema, and migration files. db/index.js exports your initialized database client so you can use it anywhere in your app.

`integrations`

Contains third-party integration code. Ex: auth0.js, twilio.js, etc. These files are a good place to instantiate a client with shared configuration.

`pages`

Has the same semantics as the Next.js pages folder. All files in here are mapped to the url corresponding to their file paths.

`api`

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.

`public`

All files in here are served statically from your app's root URL

Other Notes

All top level folders are automatically aliased. So for example you can import from app/projects/queries/getProject from anywhere in our app.

Topics