So I want to have a separate chapter for adding the storage adapter just in case it gets complicated. So we're going to go ahead and add the Vercel blob as our storage adapter since we are already deploying on Vercel. So let's go ahead and first install the package here. I'm going to go ahead and do a bond add at 3.33.0. So we need to use the same version that we have the rest of our payload in.
Let's go ahead and add this right here. Let's just wait a few seconds. There we go. And once we have added that, we have to import Vercel Blob Storage from our payload.config.ts. So I'm going to import it here.
There we go, Vercel Blob Storage. And now we add it to the plugins. So let's go down here, and let's replace this comment with Vercel Blob Storage and inside of here let's add enabled to true like this and now we have to specify which collections should use Vercel Blob Storage. So I'm going to set media to true, like this. And then what we have to add, let me just see where.
So after this, we have to add a token. And the token is process.environment blob read write token. So this seems to be working without any issues so far. And now we just have to obtain the blob write token. So I don't think that anything here needs further modification.
We do see some instructions here. So configure the collections object to specify which collections should use the Vercel blob adapter. The slug must match one of your existing collection slugs. That is done. We have the media slug.
Blob read write token set in the Vercel environment variables. This is usually set by Vercel automatically after adding blob storage to your projects. Okay, that seems hopeful. We'll see. When enabled, this package will automatically set DisableLocalStorage to true for each collection.
When deployed in the server, server uploads are limited with 4.5MB. Set ClientUploads to true to do uploads directly on the client. Okay, so that is useful information for you to have right here. So if you want to, you can change this to client uploads to true if you want large files it seems. I'm going to leave it like this now and this is what I'm going to do.
I'm going to git Checkout B29 Storage Adapter, git add commit 29 Storage Adapter, and git push new origin 29 Storage Adapter. So I'm doing it this way so we have proper git history. So I'm going to go inside of my GitHub here. I will create a pull request and I can immediately merge it since we know exactly the changes we have made. We haven't done anything drastic.
And this will now immediately cause, once we merge it, this will now cause a new deployment on Vercel. But it will not work just yet because we don't have the blob read write token. But what we can do is we can go to our project. You can see that now I have a new deployment here. So let me just cancel this deployment.
You can cancel the preview deployment, and you can let the production deployment run if you want to. And now let's go inside of storage here, and let's create blob storage. I'm going to leave the name as it is and I'm going to set it for development, preview and production. Let's see the advanced options. So yeah, it asks you if you want to name your environment variable somehow.
So blob read write token is exactly what we need. So I'm just going to write connect here. And hopefully, that will be it. So I think we now have to cancel. I don't want to cancel the deployment.
I'm going to let this deployment go, actually, because it's my main master deployment. So if you have canceled yours, you can just push something to master. So git checkout, git pull origin master, like this. And then you can just do some small change and then push the master, and that will trigger a new build. And now just for you to know, you should now have, If you want, you can add Vercel blob and add this to your dot environment variable.
So this isn't committed, so it won't change anything. But there we go. Now it's here. So I'm just going to let this deploy and then I'm going to redeploy so wait for this to deploy completely and then go ahead and click redeploy I'm going to skip that whole process for you there we go so I'm just going to click redeploy now and click redeploy so after my deployment which was successful I attempted to access the dashboard but this happened it's just a blank screen So what I did was I went to debug locally. In order to do that, I first went into my settings and I grabbed my new environment variable for the blob read write key.
And then I just populated it here so I can test this locally. I then ran the app locally and I've noticed the error. So now locally I can't access admin either. You can see I see the errors here. So this is what I'm going to do first.
I'm going to do bun run, my apologies, rmrf.next node modules because my doubt is that when we installed the storage of our cell blob, the log file got messed up the same way the plugin multi-tenant caused it to mess up. So I will do a bun install again here. And I just want to see if now exactly which changes here happen now, if any. So first I'm just going to try bun run generate types. I'm also going to run this manually.
And after this I'm going to do bun run dev. So I'm still not seeing any files changed here. In here I'm just reading some documentation. So I will just continue trying this until we resolve it. That's the only thing we can do.
So I was thinking that maybe a lock file will change or something. I just want to see what exactly is going on. So I'm going to go again into the dashboard and see do we have the same errors. So I'm still getting the same error here, basically that there is a file that they cannot find here, the component that they cannot find. And it is definitely related to this package that we have installed.
I found a GitHub issue describing this exact bug. And you can see that people have problems with Vercel blob here, but also S3 client handlers here. So I think that maybe we all somehow got into the same issue. I'm going to try and do alongside this also bun.lock. So this will be another thing I'm going to try.
Perhaps the whole lock file is incorrect, and we need to rebuild that as well. So I'm going to run bun install. And now I think we are actually going to get a new bun log file, which will be something we can push to GitHub and something we can deploy Vercel on, which might cause a difference in production. So this is my next attempt at resolving this. All right, I finally managed to get it working locally, and I'm gonna show you everything that I did and all the errors that I got.
So you can see I have some changes. So the first thing that I did right here was I remove after I removed my log file I started getting these errors I'm going to show you these ones incorrect peer dependencies because payload has a new version at the time I'm making this video so I was on a version 33 if you remember And then I was like okay I'm just going to start it and let's see. And you can see that it told me to upgrade to 3.34.0. So that's exactly what I did. Let me show you.
I have replaced all of my versions of payload CMS to 3.34. It's very easy to do because they are all here. And I also removed the carrots. So you should now see and change all of this to whatever is the latest version of payload. In this case, it's 3.34.
The error itself will tell you what version it is. And after I did that, you can see that I removed my node modules and my bun lock again. I ran bun install. And then I tried running the app again but still I ran into the Vercell Blob client upload handler issue and then I actually just ran this command which they told me to do. So I went ahead and did bun run payload generate import map and would you guessed it, perhaps I could have done that the first time around and didn't even have to update anything.
But after I did that, you can see that now the import map has this file that it kept talking about. So hopefully, this is the fix for production as well. So I'm just going to go ahead and do git add here. I'm going to do git commit. And I think that we already...
I mean, everything that I've changed here is kind of auto-generated, so it's not that important. So I can push it directly to prod. So I'm just going to go ahead and call this StorageAdapters.fix, like this, and git push. So adding git push will now cause the production to have a new deployment right here. And hopefully this time we will see it working in production as well.
And here we have it finally in production. The dashboard is now working and I was able to go to my profile, go to the tenant, and guess what? I was able to do an upload. So the uploads are now officially working, which means that on the application here, When we click on John, there we go. You can see that it's working.
It is loading my picture right here. And it's also loading it in here in the product view. Amazing, amazing job. You can also confirm that by going inside of your Vercel here, Storage. And I think that now you should see something.
There we go. There's an image here. Excellent. So it looks like the problem was in the import map. This was the crucial thing.
So you can see in here, the crucial thing was the change of the import map. Looks like the bun lock was not as important. We just needed to run that command that the terminal was actually telling us to do the entire time, just running this command. So if you're having this issue, just run this command and everything will be solved for you. Amazing.
That works now. So we can officially cross this off now. There we go. We added a storage adapter, we pushed to GitHub and we deployed to our cell. So in the next chapter, we're going to go ahead and do wildcard subdomain.