Moving Your Entire Development Environment to the Cloud with Next.js, Gitpod, and Vercel
In this video we'll learn how to move an entire development environment to the cloud with Next.js, Gitpod, and Vercel, enabling you to develop and iterate on full stack web applications from any machine including iPads, Chromebooks, and new environments without any previous setup.
We'll start by forking an example blog repo, running it in Gitpod, and writing our first blog post. We'll then enable a Gitpod integration, deploying again to Gitpod to show that the entire process has been automated. Finally, we'll deploy to Vercel directly from the Gitpod environment. By the end of this lesson, you should have a good understanding of how to build, deploy, and automate full stack applications to the cloud with Gitpod.
https://github.com/wutali/nextjs-netlify-blog-template
Lecturer: [0:00] In this video, we're going to learn how to move our entire development environment to the Cloud with Gitpod. We'll get started by forking an existing Next.js blog template, but any blog template should work.
[0:26] To open any GitHub repo in Gitpod, you can prepend the URL with gitpod.io/£. Next, we'll install the dependencies and run the app by running yarn and npm run dev.
[0:47] Next, we'll make an update by creating our own blog post. Here, I'll just copy some markdown from a post that I've written previously. I'll update the front matter using the front matter from license.mdx. We'll update the slug, title, author, and tags.
[1:42] Next, we'll update the meta information to include the new alternate tags. Next, we should save and be able to now view our new blog post. To automate the entire setup, we can add a new file called .gitpod.yml.
[2:18] Here, we'll define one task that will start by installing the dependencies using yarn and then run npm run dev once the dependencies are installed. Next, we'll open up the terminal and push these changes to Git.
[2:43] To test everything out, we'll go ahead and delete the existing project from Gitpod. When we reopen the project in Gitpod, we see that the entire setup is now been automated for us.
[3:29] Let's next deploy to Vercel. To do so, we'll first install the Vercel CLI. We can now run Vercel to sign in.
[4:01] Once we're signed in, we can run Vercel again to deploy and accept all of the default options. When the deployment is complete, we should be given a URL for us to test everything out. Congratulations, your entire development environment is now moved to the Cloud.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!