Skip to main content

Project structure

The structure of a Strapi project depends on whether the project was created with TypeScript (which is the default if you used the --quickstart option while creating the project) or with vanilla JavaScript, and looks like the following:

The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation page.

. # root of the application
β”œβ”€β”€β”€β”€ .strapi # auto-generated folder β€” do not update manually
β”‚ └──── client # files used by bundlers to render the application
β”‚ β”œ index.html
β”‚ β”” app.js
β”œβ”€β”€β”€β”€ .tmp
β”œβ”€β”€β”€β”€ config # API configurations
β”‚ β”œ admin.ts
β”‚ β”œ api.ts
β”‚ β”œ cron-tasks.ts # optional, only if you created CRON tasks
β”‚ β”œ database.ts
β”‚ β”œ middlewares.ts
β”‚ β”œ plugins.ts
β”‚ β”” server.ts
β”œβ”€β”€β”€β”€ database
β”‚ └──── migrations
β”œβ”€β”€β”€β”€ dist # build of the backend
β”‚ └──── build # build of the admin panel
β”œβ”€β”€β”€β”€ node_modules # npm packages used by the project
β”œβ”€β”€β”€β”€ public # files accessible to the outside world
β”‚ β”œβ”€β”€β”€β”€ uploads
β”‚ β”” robots.txt
β”œβ”€β”€β”€β”€ src
β”‚ β”œβ”€β”€β”€β”€ admin # admin customization files
β”‚ β”‚ β”œβ”€β”€β”€β”€ extensions # optional, files to extend the admin panel
β”‚ β”‚ β”œβ”€β”€β”€β”€ app.example.tsx
β”‚ β”‚ β”œβ”€β”€β”€β”€ webpack.config.example.js
| | β”œβ”€β”€β”€β”€ tsconfig.json
β”‚ β”œβ”€β”€β”€β”€ api # business logic of the project split into subfolders per API
β”‚ β”‚ └──── (api-name)
β”‚ β”‚ β”œβ”€β”€β”€β”€ content-types
β”‚ β”‚ β”‚ └──── (content-type-name)
β”‚ β”‚ β”‚ β”œ lifecycles.ts
β”‚ β”‚ β”‚ β”” schema.json
β”‚ β”‚ β”œβ”€β”€β”€β”€ controllers
β”‚ β”‚ β”œβ”€β”€β”€β”€ middlewares
β”‚ β”‚ β”œβ”€β”€β”€β”€ policies
β”‚ β”‚ β”œβ”€β”€β”€β”€ routes
β”‚ β”‚ β”œβ”€β”€β”€β”€ services
β”‚ β”‚ β”” index.ts
β”‚ β”œβ”€β”€β”€β”€ components
β”‚ β”‚ └──── (category-name)
β”‚ β”‚ β”œ (componentA).json
β”‚ β”‚ β”” (componentB).json
β”‚ β”œβ”€β”€β”€β”€ extensions # files to extend installed plugins
β”‚ β”‚ └──── (plugin-to-be-extended)
β”‚ β”‚ β”œβ”€β”€β”€β”€ content-types
β”‚ β”‚ β”‚ └──── (content-type-name)
β”‚ β”‚ β”‚ β”” schema.json
β”‚ β”‚ β”” strapi-server.js
β”‚ β”œβ”€β”€β”€β”€ middlewares
β”‚ β”‚ └──── (middleware-name)
β”‚ β”‚ β”œ defaults.json
β”‚ β”‚ β”” index.ts
β”‚ β”œβ”€β”€β”€β”€ plugins # local plugins files
β”‚ β”‚ └──── (plugin-name)
β”‚ β”‚ β”œβ”€β”€β”€β”€ admin
β”‚ β”‚ β”‚ └──── src
β”‚ β”‚ β”‚ β”” index.tsx
β”‚ β”‚ β”‚ β”” pluginId.ts
β”‚ β”‚ β”œβ”€β”€β”€β”€ server
β”‚ β”‚ β”‚ β”œβ”€β”€β”€β”€ content-types
β”‚ β”‚ β”‚ β”œβ”€β”€β”€β”€ controllers
β”‚ β”‚ β”‚ └──── policies
β”‚ β”‚ β”œ package.json
β”‚ β”‚ β”œ strapi-admin.js
β”‚ β”‚ β”” strapi-server.js
β”‚ β”œβ”€β”€β”€ policies

β”‚ β”” index.ts # include register(), bootstrap() and destroy() functions
β”œβ”€β”€β”€β”€ types
β”‚ └──── generated
β”‚ β”œ components.d.ts # generated types for your components
β”‚ β”” contentTypes.d.ts # generated types for content-types
β”œ .env
β”œ .strapi-updater.json # used to track if users need to update their application
β”œ favicon.png
β”œ package.json
β”” tsconfig.json