Skip to content

Latest commit

 

History

History
223 lines (142 loc) · 8.24 KB

manual-installation.md

File metadata and controls

223 lines (142 loc) · 8.24 KB
Raw

Manual Installation

Configure your Sanity Studio

Step 1. Change directories to your Sanity Studio

cd studio

Step 2. Install dependencies

npm install

Step 3 Create a new Sanity project and dataset

npx sanity init --bare

You will be prompted with an output that contains the project ID and dataset name.

Success! Below are your project details:

Project ID: <projectId>
Dataset: <dataset>

You can find your project on Sanity Manage — https://www.sanity.io/manage/project/rjtcllfw

Your projectI ID is not sensitive information

Step 4. Set up environment variables

cp -i .env.local.example .env.local

Next, populate the .env.local file with the project ID and dataset name provided by the Sanity CLI in the previous step, or by visiting the Sanity Manage Console

Step 5. Optionally seed content by importing a dataset

If you want to start with some sample content, you can import the provided dataset (demoData.tar.gz) into your Sanity project. This step is optional but can be helpful for getting started quickly.

To import the dataset, run the following command in your terminal:

npx sanity dataset import demoData.tar.gz production

This assumes your dataset is named production. If your dataset is named differently, replace production with the name of your dataset.

Step 6. Run your Sanity Studio locally

At this point, when you run your Sanity Studio, you'll see a message indicating that Presentation needs to be configured.

Presentation needs configuration

We'll address this in the next section when we set up the Next.js app.

npm run dev

Tip

In this demo starter, we are using TypeScript. After making changes to your schema, you'll need to extract the Sanity Studio Schema so that you can use that JSON file to generate TypeScript types for your Next.js app.

npm run extract-types

This command is running sanity schema extract --enforce-required-fields under the hood. Learn more about extracting types.

Configure your Next.js app

Step 1. Change directories to your Next.js app

cd nextjs-app # from the root of the repo

Step 2. Install dependencies

npm install

Step 3. Set up environment variables

cp -i .env.local.example .env.local

You can now populate NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET by running the following command. Select your project and dataset when prompted and select NO when asked "Would you like to add configuration files for a Sanity project":

npm create sanity@latest -- --env=.env.local

Creating a read token

Before you can run the project you need to setup a read token (SANITY_API_READ_TOKEN), it's used for authentication by Sanity's Presentation tool and pulling content while in draft mode.

  1. Go to manage.sanity.io and select your project in the "Project" dropdown.
  2. Click on the 🔌 API tab.
  3. Click on + Add API token.
  4. Name it "Next.js / Presentation READ Token" and set Permissions to Viewer and hit Save.
  5. Copy the token and add it to your .env.local file.
SANITY_API_READ_TOKEN="<paste your token here>"

Step 4. Run your Next.js app locally

npm run dev

Note

we are generating types automatically by running "predev": "npm run typegen" in our package.json file. This is optional, but will build your sanity.types.ts file automatically. Learn more about Sanity TypeGen.

npm run extract-types

This command is running sanity typegen generate under the hood. Learn more about generating types.

Deploying the Sanity Studio and Next.js app to production

Deploy your Sanity Studio

To deploy your Sanity Studio, follow these steps:

  1. You'll likely need a different .env file for production, so that you can set a different SANITY_STUDIO_PREVIEW_URL to match the domain you will deploy your Next.js app to. Copy the .env.local file to .env.production and set the correct environment variables.

    cp -i .env.local .env.production

  2. In your terminal use the following command to deploy the Studio to Sanity's servers. Learn more about deploying to Sanity.

    npx sanity deploy

  3. When prompted, choose a unique hostname for your Studio. This will be the URL where your Studio is accessible.

  4. Once the deployment is complete, you'll receive a URL for your deployed Sanity Studio. It will look something like:

    https://your-project-name.sanity.studio

  5. You can now access and use your Sanity Studio from this URL from any device with an internet connection.

    Remember to redeploy your Studio whenever you make changes to its configuration or schema.

Note

Make sure you have the necessary permissions to deploy. If you're working in a team, check with your project owner or administrator.

Tip

You can also set up continuous deployment for your Sanity Studio using services like Netlify or Vercel. This allows your Studio to automatically redeploy whenever you push changes to your repository.

Deploy your Next.js app to Vercel

[!NOTE]

You can deploy your Next.js app wherever you'd like, but for the sake of this demo we will be using Vercel.

To deploy manually deploy your Next.js app to Vercel, follow these steps:

  1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).

  2. Visit Vercel's dashboard and click on "New Project".

  3. Import your Git repository:

    • Select your Git provider (GitHub, GitLab, or Bitbucket)
    • Choose the repository containing your Next.js app

  4. Configure your project:

    • Set the Root Directory to the directory of your Next.js app
    • Vercel will automatically detect that it's a Next.js app
    • Adjust the build settings if needed (usually not necessary for Next.js apps)

  5. Set up environment variables:

    • Click on "Environment Variables"
    • Add all the variables from your .env file. Don't forget to set NEXT_PUBLIC_SANITY_STUDIO_URL the url of your deployed studio.

  6. Click "Deploy" to start the deployment process.

  7. Once deployed, Vercel will provide you with a URL for your live app.

  8. (Optional) Set up a custom domain in the Vercel dashboard.

  9. Now you can add your App's domain to the list of CORS origins in your Sanity Manage console, under the 🔌 API tab.

For subsequent deployments, simply push changes to your Git repository. Vercel will automatically rebuild and redeploy your app.

Tip

You can also use the Vercel CLI for deployment. Install it globally with npm i -g vercel, then run vercel in your nextjs-app directory and follow the prompts. [!NOTE] You may need to disable or configure "Protection Bypass for Automation" in your Vercel settings to get Presentation to work in your Sanity Studio.

Next steps