Vercel Blob

[00:00:00]
>> Brian Holt: Let's go look at object storage. So, npm run dev here. Localhost 3000. If I'm on test user now, well, actually it's not going to, it shouldn't let me edit the article. Well, now it's just going to say save article, it's going to give me a failure to submit it. If we wanted to, we could go back and edit this, and this is what if you follow along with my steps, you can edit.

[00:00:44]
It makes it so that the edit article button doesn't show up anymore. Yeah, you can see right there. We hit forbidden right there. In any case, that's, I think what we want to do now is we're going to rerun our seed article, or DB seed if you want to, because right now everything's written by Brian Holt, or whatever your first thing that you signed up with is.

[00:01:14]
But if I do npm run db seed again, and I go back and I refresh this, you can see some of these now will be written by unknown, which is the art of the person I just signed up with, or the test user. And these ones I could edit, right? So if I come in here and say blah. Yep, it'll edit that and allow me to go back.

[00:01:47]
I don't remember which one I just edited, but usually it brings it to the bottom. Yeah, you can see that one's now been edited. This is not accepting image uploads yet, so you can put an image in here. So I have one, a nice one here of Anacortes, Washington, nice little area. And I can click save article, but it's not going to do anything, right?

[00:02:15]
So if I go back to this article, nothing's there. I just accepted it and did nothing with it. So, you need some sort of like large object storage is what you'd call it, or object storage or blob storage, any one of those things. There's 1 trillion companies that do this. Most of them are just reshipping AWS S3, right, in some variety of capacity.

[00:02:38]
We are going to use one such reshipper of S3. We're going to use Vercel. Vercel has blob storage. Vercel Blob, I think it's what they're called, yep. Or Vercel storage. No, it's Vercel Blob. So, I need you to go to Vercel.com. I already have a project here. But I'm going to create a new one. Add a new project.

[00:03:14]
Yeah, let's do it this way. We're going to call this FEM Wiki Masters. Oh, yeah, that's what they're going to want to do. They want you to, so you want to put this on GitHub first, right? So we're going to go to GitHub. I'm going to create a new repository. And we'll call this FEM Wiki Masters. The Brian Holt.

[00:03:43]
None of that stuff, create repository. I'm going to grab the keys here. So I just grabbed this particular one. You might need to use HTTPS. I have my SSH keys all set up. I'm assuming at this point that you've used GitHub before. I think this is already a git repository. Nope, it is not, so I'm going to say git init.

[00:04:08]
I'm going to say git remote add origin blah. Which is, you know, that's my repository. Yours will say whatever yours is. I'm going to say git add -A, git status, this should have all of my files in it. I'm trying to think of anything in here doesn't matter. Nope, looks good to me. Git commit -m. Very cool wiki.

[00:04:44]
And I'm going to say git push origin main. Refresh here, should see all my files now. Very cool. New project FEM Wiki Masters, so this one. It's the next project, it detects that right away. You can like it knows how to do all like the build and stuff like that, so you don't really need to do anything for that, and just click deploy, it's going to break.

[00:05:09]
It's going to break, but that's okay. It's going to break because I didn't put those secrets in and the build will fail. But I don't care. We're just going to, we're not going to wait for that to break. I'm just going to go back to the home. And now I have this FEM Wiki Masters project here. It's not built, that's very okay.

[00:05:41]
Yeah, we'll dismiss that for the moment. We'll worry about Neon later. What I really want now is for storage. So, and I want it to be attached to FEM Wiki Masters. I'm just going to say create database and I'm going to create a blob. And, I think Vercel only gives you one blob bucket free. I have a paid account so I can create as many as I want.

[00:06:14]
And we'll call this prod. And we are, what did we do this in, we did it in the Ohio one, right? Cleveland. That seems normal. So create. And connect. And there we go. Now we have FEM Wiki Masters blob prod. What I need from this more than anything is in settings, I think it is. Yeah, I need the base URL. So we're going to come in here to the .env file.

[00:06:50]
I'm going to say blob base URL and that's going to be equal to blah. So, again, you're in FEM Wiki Masters, whatever you call that, this particular project, you're going to go to settings, environmental variables. And then you're just going to copy this or whatever and click the copy. And what did I call this?

[00:07:59]
URL. It's like a blob API key, I think is what it is. Cool. Okay, and then. Good. Project ID, it's great. And now we are going to go to our project. And we're going to go to our next config. And we're going to put another one in here says images. And here we're going to say remote pattern. And we're going to say new URL.

[00:08:40]
And we're going to say process.env.blob base URL like that. And let's make this a template string actually. Because you need to put it on the end. It's like slash star star. Basically what this is saying is like I expect all of my Next Image images to come from this base URL and if it doesn't come from that base URL then I want you to throw a fit about it.

[00:09:09]
It's, then we gotta put a comma here, and it's prob, is it not going to complain about this, it should. I guess this is fine, this will accept the undefined. Normally you'd have to say like assert up here as well and say assert that this exists. But I guess if it's not complaining, I'm not going to worry about it.

[00:00:00]
Okay, and then here in the bottom of our project, we're going to say npm i @vercel/blob. Okay, this will get us our blob SDK. And now, let's go make image uploads work.