Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 14, 2022 11:24 pm GMT

Getting started with Sanity

Creating a Sanity account

  1. Go to sanity.io
  2. Click log in
  3. Click create an account
  4. Sign up, I use GitHub for this

You should get routed to your Sanity dashboard sanity.io/manage

Setting up Sanity CLI

Install the Sanity CLI globally by running this in a command line.
i is short for install
-g is to install a package globally

npm i -g @sanity/cli

Then, make sure you are still inside of your project folder and run

sanity init
  1. It should ask you to login, use the method that you used when signing up. So for myself I would select GitHub

  2. If this is your first project then it will ask you for a project name, if you already have a project it will ask you to create a new one or use existing. When you select Create new project, (or you don't have any projects yet), you will be asked for a project name.
    I'm going to name mine example-blog just because that is what my project folder is called.

  3. Hit enter to accept default data config.

  4. Edit the last path in your output path from the folder name to studio

EXAMPLE

From this:\Documents\Projectsutorial\example-blog\example-blogTo this:\Documents\Projectsutorial\example-blog\studio

5 . Select Clean project with no predefined schema as the template to start with a fresh setup.

6 . Hit enter to select no to using TypeScript

And that should be it! Sanity is now setup and if you run this you should be taken to your project's dashboard on Sanity.io.

cd studio && sanity manage

Connecting our app to our new Sanity project

Go back into your text editor and create a filed name .env in the root folder.
This is where we are going to put the environment variables to connect our project.
Make you you add .env to your .gitignore file as well so that your variables don't get leaked on GitHub.

Add this code to your new .env file

SANITY_STUDIO_API_PROJECT_ID=""SANITY_STUDIO_API_DATASET="production"NEXT_PUBLIC_SANITY_PROJECT_ID=""NEXT_PUBLIC_SANITY_DATASET="production"SANITY_API_TOKEN=""

For both of the PROJECT_ID lines we will add the PROJECT ID from our project's dashboard we opened when we ran sanity manage.

Sanity project id

Now back in your dashboard...

  1. Click API on the right
  2. Scroll down to Tokens
  3. Click Add API token
  4. Add a name (I used example-blog)
  5. Select Editor
  6. Copy the token that it created
  7. Paste it into your .env file for SANITY_API_TOKEN

Launching our Studio

To make sure this all works, go back into your command line, inside of your studio folder and run

npm i url && sanity start

The url install is just to fix an error that will prevent studio from launching.
After this runs it should tell you that

Sanity Studio is running at http://localhost:3333

Go to that url in your browser and login with the same credentials you've used all lesson for Sanity.
If it all works you should see a screen like this at url localhost:3333/desk

Sanity Studio

Don't worry about that warning, it just means that we haven't given Studio any data yet, we will do that in the next lesson.

That's everything to get Sanity Studio up and running locally. In the next lesson I will show you how to add your own datatypes and data.


Original Link: https://dev.to/zacherymorgan/getting-started-with-sanity-1ohj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To