Discussion on setting up and using Sanity image pipelines in a project with Remix.
27 replies
Last updated: Aug 25, 2022
Z
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?
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
Z
How do I check if I have @sanity/client set up?
Aug 25, 2022, 10:25 PM
Z
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.jsor
client.jsthose are the two most common names people use.
Aug 25, 2022, 10:28 PM
Z
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
Z
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 , then create a
npm i --save @sanity/client @sanity/image-url
sanity.jsfile. 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
Z
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
/srcfolder to hold my client configuration.
Aug 25, 2022, 10:37 PM
Z
Thaaaankkk youuuuuu!!!
Aug 25, 2022, 10:37 PM
You're welcome!
Aug 25, 2022, 10:38 PM
Z
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:
The path to your
import { client, urlFor } from './src/sanity'sanity.jsmight need to be changed depending on where you're importing it, though!
Aug 25, 2022, 10:50 PM
Z
user M
still getting an errorAug 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
urlForfunction?
Aug 25, 2022, 10:56 PM
Z
That fixes the error on src but now I'm getting this error:
Aug 25, 2022, 10:57 PM
Z
Unable to resolve image URL from source (null)
Aug 25, 2022, 10:57 PM
it looks like
post.mainImageis not defined.
Aug 25, 2022, 10:57 PM
If you
console.log(post)is it there?
Aug 25, 2022, 10:58 PM
Z
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
Z
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
Z
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
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
developmentand
productionwhen they want a dataset that isn't reflected in their deployed site as they make changes.
Aug 25, 2022, 11:10 PM
Z
Awesome, thank you!
Aug 25, 2022, 11:11 PM
V
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.