Project Structure

The usual way of customising a CMS install is to just replace parts of the code with your own. As most people who have modified a Wordpress installation can attest, this makes upgrades difficult and quickly leads to tangled code.

The Content Studio project structure is a slim single-page React application where logic and code is contained in npm modules. Sanity comes with a build system that allows you to override, remove and compose existing functionality with a system of named parts.

This makes it easy to upgrade to new versions of Sanity, and also to install and ship plugins in self-contained packages.

Studio File Layout

├── config
│   └── @sanity
├── dist
├── node_modules
├── plugins
├── schemas
│   ├── castMember.js
│   ├── crewMember.js
│   ├── movie.js
│   ├── person.js
│   ├── schema.js
│   └── screening.js
├── static
│   └── project-logo.svg
├── package.json
├── sanity.json
└── yarn.lock

Content Studio contains the following files and folders out of the box:

  • config - Holds the configuration files for the plugins you've installed. Out of the box, this folder will usually only contain a checksums file, which keeps track of whether the plugin has updated it's config format since the file was created.
  • dist - Build destination folder.
  • plugins - Holds all "local" plugins. By local, we mean plugins that are specific to your Studio. Shared plugins are installed to node_modules like other npm modules. By default, this folder doesn't contain anything.
  • schemas - Holds the data schema for your Studio. If you want the schema to reside elsewhere, just change the path specified in sanity.json.
  • static - A folder to place static assets such as images, files etc that are related to the Content Studio itself. Assets that are part of your content should be uploaded via the assets API.
  • sanity.json - The main "configuration file" for your Content Studio. Defines which plugins to load, where your schema is located, the ID of your project etc.
  • yarn.lock - Locks your dependencies down to specific versions. We use yarn internally to manage dependencies.
  • Also, package.json and node_modules are present, just like any other Node.js project.

Previous: Presenting Portable TextNext: sanity.json