Quick start

From a fresh clone to a running Nuxt app and Studio, in about ten minutes.

Getting running

  1. Install and configure

    One command handles the frontend, the Studio, both `.env` files, and the demo content. It is deliberately dependency-free, so it runs on a fresh clone before anything is installed.

    Shell
    npm run setup:project

    You will be asked for your Sanity project ID, dataset, and API token. Pass --yes with --project-id= and --dataset= to run it unattended.

  2. Start both apps

    Shell
    npm run dev:all

    Nuxt on :3000 Studio on :3333 - One terminal, colour-coded output.

  3. Import the demo content

    Optional, and the fastest way to see what the blocks do. The setup script offers this; to run it later:

    Shell
    cd studio && DATASET=development npm run demo:import

    You get a home page, a typography reference page, three blog posts, colourthemes, navigation and footer.

  4. Open the Studio and edit something

    Go to Website → Pages → Home, drag a block, and watch it move on :3000. That is the whole loop.

Required in both the root and studio/ .env files
VariableWhat it's for
SANITY_STUDIO_PROJECT_IDYour Sanity project
SANITY_STUDIO_DATASETUsually `production` or `development`
SANITY_STUDIO_API_TOKENRead token for queries; write token for form submissions
SANITY_STUDIO_APP_IDStudio app identifier
DOMAINCanonical URLs and sitemap
The ones you'll actually type
CommandWhat it does
npm run dev:allNuxt and Studio together
npm run scaffold:component -- custom.my-blockGenerates a block and registers it
npm run staticnuxtStatic build - With htaccess created for Apache hosting (Most commonly shared hosting))
npm run test:runUnit and Nuxt tests
npm run typecheckFull type check, including the component registry
npm run cssvars:generateRebuilds theme CSS variables from Sanity