Skip to content
Get help on Slack

Discussion on setting up and using Sanity image pipelines in a project with Remix.

27 replies
Last updated: Aug 25, 2022
I'm having trouble understanding Sanity image pipelines...I am creating a project with Remix and using Sanity
I have installed @sanity/image-url in my project
Do I need to install @sanity/client? I feel like that was already installed when I set up Sanity?
And are there any better guides out there with a step by step set up for using images?
Aug 25, 2022, 10:19 PM
If you've already configured your client on your frontend, you won't need to create another client. You can just pass that original client into the builder. Here's a really simple example that would allow you to have a configured client and url builder:
import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({
  projectId: 'project-id',
  dataset: 'dataset-name',
  apiVersion: '2022-08-25', 
});

const builder = imageUrlBuilder(client);

export function urlFor(source) {
  return builder.image(source);
}
Aug 25, 2022, 10:24 PM
How do I check if I have @sanity/client set up?
Aug 25, 2022, 10:25 PM
That was a silly question
Aug 25, 2022, 10:27 PM
I'd first check that it's included in your package.json. If it's in the dependencies array there, there's likely a file in your repo that's called something like 
sanity.js
or 
client.js
those are the two most common names people use.
Aug 25, 2022, 10:28 PM
Hmm, it's not showing up in my dependencies so I installed it and it's still not showing up in my package.json?
Aug 25, 2022, 10:30 PM
I've also got picosanity installed - Would that be causing it not to show up?
user M
Aug 25, 2022, 10:31 PM
I'd guess you haven't installed it yet. You can run 
npm i --save @sanity/client @sanity/image-url
, then create a 
sanity.js
file. You can then just copy and paste that snippet I shared and place in your project id and dataset. You should be all configured then@
Aug 25, 2022, 10:33 PM
That worked - Where do you recommend placing the sanity.js file (Also, I'm using typescript)
Aug 25, 2022, 10:35 PM
I'm pretty typescript ignorant, so I can't help too much there 😅 But I'll usually create a 
/src
folder to hold my client configuration.
Aug 25, 2022, 10:37 PM
Thaaaankkk youuuuuu!!!
Aug 25, 2022, 10:37 PM
You're welcome!
Aug 25, 2022, 10:38 PM
user M
one last question, how do I import the sanity.js file into my component / is the urlFor imported along with it?
Aug 25, 2022, 10:46 PM
You can do this:
import { client, urlFor } from './src/sanity'
The path to your 
sanity.js
might need to be changed depending on where you're importing it, though!
Aug 25, 2022, 10:50 PM
user M
still getting an error
Aug 25, 2022, 10:52 PM
What does the error say when you hover over it?
Aug 25, 2022, 10:54 PM
Can you try adding 
.url()
to the end of your 
urlFor
function?
Aug 25, 2022, 10:56 PM
That fixes the error on src but now I'm getting this error:
Aug 25, 2022, 10:57 PM
Unable to resolve image URL from source (null)

Aug 25, 2022, 10:57 PM
it looks like 
post.mainImage
is not defined.
Aug 25, 2022, 10:57 PM
If you 
console.log(post)
is it there?
Aug 25, 2022, 10:58 PM
Wait, I figured it out - It seems I needed to have a 'mainImage' for every post I had made as test posts
Aug 25, 2022, 10:58 PM
This has been a very amazing learning journey and I can't thank you enough!!!
Aug 25, 2022, 10:59 PM
Very happy to help! I love watching folks start to 'get it'!
Aug 25, 2022, 10:59 PM
user M
is it ok for my projectId to be in a file that someone could possibly see? Also, if I were to ever deploy this, would I need to change the dataset from production to something else?
Aug 25, 2022, 11:06 PM
Yes, project IDs aren't considered secret so it's safe to expose them. You do want to take care not to expose any tokens you may eventually add in though!
You can use whatever dataset name you'd like; it won't have any effect once you go to deploy. Folks will use different datasets like 
development
and 
production
when they want a dataset that isn't reflected in their deployed site as they make changes.
Aug 25, 2022, 11:10 PM
Awesome, thank you!
Aug 25, 2022, 11:11 PM
The enthusiasm is infectious
Aug 25, 2022, 11:14 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?