Build a Fullstack Music App with Next.js Deploying with Vercel

Transcript from the "Deploying with Vercel" Lesson

[00:00:00]
>> And now let's just take a look at our app. Let's observe it. So so far we got our playlist in here. You can switch playlists, you can play an entire playlist. You can pause, you can skip a song, you can go back, you can shuffle, you can repeat.

[00:00:15] All the tracking seems to be working. You can click and seek, you can drag and seek. You got a really nice music player here. And actually the songs aren't that bad. I hand picked those songs. So if you need some beats, some free beats to listen to, check those out.

[00:00:29] So yeah, so far, this is a great music player. Like I said at the beginning, we're not gonna build all the features in this music player. There's so many other things that we could make. I mean, just even adding avatars and albums, and art like that would make this thing pop.

[00:00:42] The volume control's on the rights, and using the Spotify or any other casting API to casts the different devices, which is really cool. There's a Chromecast JS plugin. There's so many things you can do here. And then having the ability to create a playlist and add a favorite will be really cool as well.

[00:00:59] And you can really make this thing pop, and then just making it responsive. So it looks better and stuff like that. But I think the foundation is here if you wanna continue building on some more of those features, just based off the design alone. So that was kind of the goal.

[00:01:15] Initially, it was just like, how do I make it to where if people wanted to use this as practice to sharpen their skills with these technologies. Cuz there's always like, well, what do I do after I take all these courses? Well, you can add more features to this thing if you want to.

[00:01:29] So feel free to do that and get more practice in. I think it'd be really cool. What I'm gonna do now is actually deploy this thing so you can show it off and just kind of walk through how that's gonna look. Now since we're using Next.js, which is built by a company called Vercel, which just happens to be a hosting provider.

[00:01:47] We have really good support for deploying this thing. There's so many ways you can do it. They have a CLI that's really cool. I don't want everyone fumbling through a CLI. So we're just gonna go to the website and we're gonna do it there. But I do recommend at least pushing your stuff up to a GitHub repo.

[00:02:03] It makes it so much easier when you go to Vercel to just deploy this repo versus having to go through a CLI or do some other mechanism. So if you haven't pushed us up to your repo, I recommend doing that on GitHub. Hopefully everyone has a GitHub. I know I didn't say that that was a requirements, but yeah, if you don't have a GitHub, you can still deploy this.

[00:02:23] It would just be through a CLI and their documentation is pretty effective. I'll show you how to do that. We're gonna do it through the GUI. So first thing I'm gonna do is I'm gonna update my main branch. So I'm gonna go to GitHub, and I'm gonna make my main branch the current, which is 7.

[00:02:44] So I'm gonna merge this in to main, create that pull requests, merge that in. Cool, no, I don't mean to delete it. I'll add that back. There we go. Okay, so now my main branch is updated. It's got the latest, should be good to go. The next thing I need to do is, well, there is actually a lot of things we need to do, but let's just get it deployed and we can walk back our scenario to see what makes sense.

[00:03:13] Cuz there's things we should do, things we have to do, things that don't really matter right now. So first thing is let's head over to Vercel, and you can just type in vercel.com. You have to make an account there. It's free, you don't need a credit card. You can sign in with GitHub, Google, GitLab, I think.

[00:03:34] I guess it works with GitLab too, if you don't have GitHub. Just go to create a new projects. And this is where if you did log in with GitHub, you'll see a lot of your repos show up. So for me, here's the last repos I've worked on. I don't know how they get this order.

[00:03:53] This one was 73 days ago, but it's still here. There's also templates. So we could have went the other way from the beginning of this course, we could have just went here and deploy to Hello Next.js app. And they will put that on GitHub for us. And then we were started working from there and we had to deploy from day one.

[00:04:11] Sometimes I do do that, I just deploy immediately and then just continue to deploy as I go forward. And that was my original plan, but I thought that that was gonna slow the pace down of having to check that every single time after I had some of my friends go through and work on this curriculum.

[00:04:31] So what I'm gonna do is I'm gonna select the Import for my app, which is called Full Stack music. Your repo might have a different name, whatever you call it on GitHub or GitLab, this is mine. I'm gonna import it, give whatever name you want. The root directory is gonna be root, because that that's how Next.js app works.

[00:04:51] Built and output settings, I would say we do wanna change this. Definitely some things we wanna change here. So I think what we wanna do here is I'm just running next build. I think we wanna run Prisma. Do we have to install Prisma? You might have to install Prisma.

[00:05:14] I'm just gonna put npx in front of it. So I will say npx prisma generate. So it generates the SDK. Without it, our app could literally break. If it doesn't generate this, then when you go do prisma.user, .user is not gonna exist, so it'll break in production. So you have to do this prisma generate, and then npx, Prisma migrate deploy.

[00:05:48] And then next build, so it'll be all those. And I guess I need to spell Prisma, otherwise, that will totally break. Yeah, I think npx works here. If not, we'll fix it and then we'll just install Prisma globally here and we'll do it that way. But so, yeah, prisma generate, prisma migrate deploy, and then do a next build.

[00:06:09] So we'll do that. You can keep all of these the same. It already knows Next.js, it already does npm. And then environment variables, I mean, you really just wanna do the same thing you did in your environment variables file locally. So I'm just gonna go get my local variables.

[00:06:22] Obviously, typically you would have a different database for production than you would at development and staging. But I'm not gonna walk you through making a whole another database just to add these environment variables. You can just use the same environment variables that you use locally if it was a local database.

[00:06:36] If you're using a local Postgres database, this is where you would have to go make a database on Heroku or somewhere and go get a URL. So if you did run your Postgres database locally, you gotta go make a database for this step to deploy, cuz you can't use your local database deployment.

[00:06:52] So I'm gonna take database URL here. I'm gonna paste that in, I'm gonna grab the value like that, paste that in there. And there we go, I'm gonna add the other one. I don't think it needs it in production, but I'm gonna grab it anyway. If it doesn't use it, then it doesn't use it.

[00:07:14] I'm gonna add that. Cool, we got both of our environment variables. I wanna say Node env is gonna set to be production by default. But I guess technically we could just set that here too. This is also where we will put like our JWT secret that we hard coded everywhere.

[00:07:31] We will also put our cookie name that we hard coded everywhere. We'll put all that here, but we just hard coded it. So we definitely put that here, that shouldn't break the app. That's just for security. You should just put that here for security. But it shouldn't affect how the app behaves, where this would definitely affect how the API is.

[00:07:51] Okay, so once we got all that set, we can attempt to do a deploy, we're gonna see what happens. So let's do that. I think the thing we might have to do is globally set our Prisma client to be global. It really depends on how their serverless functions behave, we'll see.

[00:08:10] So now it's building, we can look at the output of it. It's basically gonna do exactly what you would do locally, plus the commands that we gave it. And I don't know exactly the provider that Vercel uses. Like I said, it's like a mix of custom, plus Azure and Google maybe, maybe you need some AWS, I'm sure.

[00:08:30] There's something going on there. But, yeah, and then we got a TypeScript error. There we go. So, well, at least we got past the hard part. [LAUGH] You got past the stuff that could have broken, now we're just stuck on TypeScript. So it doesn't like this one. It's like, you can't be the same as your man.

[00:08:51] So, all right, I guess I'll fix that one, if I must. So for that deployment, it just wants me to go down here and say, and now you could just do something like this. You can say as number, Do that, or you can do that in JSX maybe, type string of type number may be mistaken.

[00:09:12] Now so you can do as unknown, [LAUGH] as number. There we go. [LAUGH] Yeah, so that's the fix for that. Don't ask me how I know that. Clearly been doing that for a while. And then this was just a ES linting, so it should be good. It's not gonna break TypeScript.

[00:09:38] We got that. I'm gonna push this up. And now because I did set that up at Vercel, it should automatically deploy every time I do a push. So because I just pushed that up, can refresh this and here it is. Okay, so it looks like it's building right now, so let's check it out.

[00:09:54] We can go to deployments, you can see it's building. It looks like it failed, again, before this probably cuz that typo that I pushed up, let's see what it says now. Don't fail me now. Okay, we got another type error here. How can I just turn off type checking?

[00:10:13] I just wanna turn it off. Let's do that. Yeah, yes, that's the one. They knew we needed this. This is in the next config. Awesome, awesome, awesome, awesome, awesome, yes, restrict mode. Thank you. Okay, cool, let's try this again. Go to our dashboard. It's building, look at these deployments.

[00:10:47] Watch it again, and let's see what happens. So, yeah, this is why you deploy early, and then you set up a CI so you can catch it every time. This is also why people love TypeScript. But the people who aren't good at TypeScript, hate TypeScript because of this.

[00:11:07] No, have an error again, what's this? Skipping validations of type. It's also now filling on ESLint. Okay, looks like that's the thing. There you go, they have that too. [LAUGH] they knew it was gonna happen. Let's do that. Let's try it again. Yeah, okay. We'll build it once more.

[00:11:29] We're getting closer. Deployments, here we go. It's running again. At least it deploys really quick, and that took less than five seconds. All right, so it's going through, it's checking the package Json. They'll do caching on the npm module, so install is faster. Yeah, it'll do that, it's pretty smart.

[00:11:53] Uploading the build outputs. So each one of these will tell you the type of file that got generated. So if you see an F, that means it is a function like, what is? The edge function. These are API functions. The circles are basically like pages. Okay, build completed.

[00:12:28] It look like we got a check and you can even see it showing a preview of the page. That's a good sign. So we got a preview of the page. So we can go in here, and there we go, I'm on my URL. It's asking me to sign in.

[00:12:38] Let's just check to make sure the auth works if I try to go home. Nope, it immediately brings me back to sign in. So the auth works pretty good. I'm using the same database, so maybe the same user works. User@test.com, password is password. Let's see what happens. Sign in works.

[00:13:02] We're able to sign in. It's pulling down my playlists data, that looks good. It's using my seeded user. We got our artists with our cats. If I go to my playlists, playlists seems to be working just fine. If I click Play, it is currently playing. So we are deployed.

[00:13:22] So once you get past all the task errors and things, it works pretty easily. And now it's hooked up to my GitHub. So every time I push to GitHub, it's gonna do a deploy if you want. Next, Vercel also does what's called preview builds. So every pull request will get deployed.

[00:13:41] So if you're reviewing someone's code, you can click on the link, it'll post the link in GitHub pull request. I click this link to go see this pull requests being deployed. You can go test that person's code out on a preview build, which is really cool. So you can do that, it'll do that all the time.

[00:13:56] And yeah, it's pretty awesome. And then as far as the custom domains, there's a lot of ways you can do that but luckily for us Vercel makes that pretty easy. They have a Domains tab up here, you can click on Domain. I have a domain here, I literally don't even remember buying this.

[00:14:11] I think I was gonna do some ecommerce at one point. And I'll pop biabrand.shop, I don't know. I actually have a lot of domains in another. I have so many domains there.
>> [LAUGH]
>> But it's actually quite easy, all you have to do is just buy a domain, or if you have a domain you can transfer it in if you want to.

[00:14:34] And you can add in the domain and authorization code here. You can add one, select a project to add your domain to. There's a lot of ways to do it. I'm trying to see if I can just use this one. I don't know if this one's being used or not.

[00:14:48] I think I might be using this on a different name server. The other way you can do it is that you can actually just go to something like Cloudflare and set up a DNS yourself. You just gotta get the value of the name server here. And then you can add that to your DNS and Cloudflare or wherever you're doing your deal DNS, and then you can manually route the domain there.

[00:15:09] Honestly, there really isn't much tutorial to adding the domain if you do it through Vercel. You just literally buy it and then you click Add, and you click on your project, and then you're done. That's it, you don't do anything else, that's all you do. It handles the routing of the DNS, obviously it'll take up to an hour for it to propagate.

[00:15:25] But that's it. That's all you do for a custom domain on Vercel. You don't do anything else. That's the easiest domain situation I've ever seen. The other way, like I said, is to go buy a domain on Iwantmyname or Google domains. You can go here, this is where I buy all my domains.

[00:15:46] And you can find a domain here, and you buy it, and then you just transfer it over to the DNS by using the name servers. I typically use Cloudflare for that cuz it's so awesome. But yeah, for Vercel, you just click Buy and then you add it and then you're done.

[00:15:59] Or if you already have one, transfer it in, and you're good to go.