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@dev-preview

The global install for sanity v3 might be outdated by the time you read this. You may no longer need '@dev-preview', or you may need something else entirely. It's best to check the docs or npm package before committing to it so you're not stuck later on.

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\Projects\tutorial\example-blog\example-blog
To this:
\Documents\Projects\tutorial\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 sure 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.

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

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.