No Comments Yet
Be the first to share your thoughts and start the conversation.
Deploying Project Using Vercel and GitHub
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â To deploy our project, we'll be using Vercell.
00:00:03Â So just head to vercell.com and then either sign in or sign up.
00:00:08Â You should be redirected to your dashboard and then just add a new project.
00:00:12Â For this to work, we'll have to put our project in GitHub.
00:00:15Â So just head over to github.com forward slash new.
00:00:20Â and create a new repository, I'll call it something like jsm live docs.
00:00:27Â Make it either public or private and click create repository.
00:00:31Â Now we'll have to run a few of these commands.
00:00:34Â Before we do that though, let's quickly head over to our next.config.js.
00:00:40Â And here, just at the top of the next config, let's say TypeScript, And then you can add ignore build errors is set to true.
00:00:48Â We most likely have just one or two TypeScript warnings there, so we don't want those to ruin our build.
00:00:55Â Now that we have this, we are ready to push our code to GitHub.
00:00:59Â So just say git init, git add dot, git commit-m, first commit.
00:01:07Â git branch m main, git remote add origin, like this, and then git push u origin main.
00:01:18Â And in just a couple of seconds, your code will be up right here and Vercell will automatically notice it.
00:01:25Â So let's click import.
00:01:27Â They automatically figure out the name and we just have to add our environment variables.
00:01:33Â So let's head to .env.local and let's copy all of the keys and just paste them right here.
00:01:41Â You can do that by pressing Ctrl or Command A, then copying it and just pasting it right here and press deploy.
00:01:48Â Let's wait a minute until it does its thing and I'll be right back.
00:01:52Â And there we go, live and deployed on first try.
00:01:56Â This doesn't happen often, trust me, especially after building and developing for such a long time and then trying to publish it all at once.
00:02:05Â But with that said, let's just click continue to dashboard.
00:02:09Â And on the top right, you can click visit.
00:02:11Â This is looking amazing.
00:02:13Â So let's continue with GitHub.
00:02:15Â And for the time being, I will disable this Vercell deployment toolbar.
00:02:21Â I'm logging in with my same account and you can see that the document that I shared with this second account is right here.
00:02:28Â I can go ahead and create a new document.
00:02:31Â Everything works well.
00:02:34Â And as you know, I can invite additional people to it.
00:02:37Â I don't think I have to show that to you.
00:02:39Â You know that it works.
00:02:40Â And don't forget that this is now live and deployed so that you can share this link with everyone, invite them to your documents and use this app as your own.
00:02:49Â Maybe even your own documentation site.
00:02:51Â Who knows?
00:02:52Â You can definitely include it on your portfolio.
00:02:55Â And I would even recommend creating a case study out of it.
00:02:59Â Not only out of this video, but out of the all projects that you create.
00:03:04Â A case study is a document where you explain your process of challenges you faced, as well as the solutions you implemented,
00:03:12Â and how you came to the final solution.
00:03:14Â Here, I even give you a complete example and a template for a case study, how you can explain the process, and everything that you need to put in there.
00:03:23Â This is a part of our new DCA course where I help you accelerate your dev career.
00:03:29Â And before I forget, we also have weekly meetings where you can speak directly with me and ask me any questions.
00:03:36Â We just had one two hours ago, so it's already counting up for the next one next week.
00:03:42Â You can check out the DCA course as well as our ultimate Next.js course on jsmastery.pro.
00:03:49Â If you loved learning about the revalidation and server-side rendering and so much more stuff, and if you want to really learn how to build proper well-optimized
00:04:01Â Next.js applications so that you truly understand how the stuff works behind the scenes, I would highly recommend checking out the Next.js course.
00:04:09Â Just go to jsmastery.pro.
00:04:11Â With that in mind, congratulations on coming to the end of this video.
00:04:15Â I really love this one and I hope you did too.
00:04:18Â Thank you so much and have a wonderful day.