Vercel Product Walkthrough

Hey I'm Lee and I'll be your guide in this video as we do a walkthrough of the Vercel platform

Vercel is a Frontend Cloud that gives you the frameworks, workflow, and infrastructure to build

a fast and personalized web. So let's get into it. With Vercel's Frontend Cloud we believe

in starting with your frontend framework, and that's why we support over 35 different Frameworks

including some of your favorites like React or Svelte or even Next.js that we've created.

So let's get started by deploying a template. I'll head over to our templates marketplace

where we have a bunch of examples where you can sort or filter by the framework you want to use

the type of application you want to build or the Vercel product that you want to use, so

we'll pick the Next.js boilerplate or the hello world to get started. I'll click deploy and you're

going to notice in the top left I'm using my personal free account which is great for side

projects. I've already connected my account to my GitHub repository but you could also use GitLab

or Bitbucket for example. So it's going to prompt me here to create a new repository I'll just say

product demo and we're going to make this private by default and I'll hit create now what this is

going to do with the Vercel integration for GitHub or other git providers this is going

to go out it's going to create a new repo for me it's going to connect that to my new Vercel

project it's going to kick off the CI/CD process for me automatically so I don't have to configure

anything extra to actually get my application receiving new code that I push up to my repository.

So it pushes up our first commit to actually kick off this hello world it starts the process of

building our application. So I can expand here and I can see that it's running the build command for

an Next.js which is "next build" so it's automatically detected which framework I want to use and it's

ran the build process so it's built just this hello world's smallest Next.js application here

take in the outputs from that build process and actually uploaded those to Vercel Edge Network

so in about 30 seconds or 40 seconds here we get our new Next.js application that's deployed

globally around the world on Vercel's Edge Network. Now from here I could either click on my new site and open it up in my new .vercel.app domain where it's live on the internet for

me to share with my friends or I could actually go into the Vercel product dashboard where I can

learn more about my project I'd actually love to go look at the deployments we can see this

last production deployment that we just kicked off I want to talk about our philosophy for how

we look at frameworks so this page gives you a comprehensive overview of how we've built and

deployed your framework code and if we click on the deployment summary we can see the framework

that was auto-detected what the version was all of the different static assets that we deployed

globally in our Edge Network and even functions that we created for your application to have some

kind of dynamic compute now that hello world application doesn't really have much so I just

quickly flipped over to a version of my personal website leerob.io or we can see there's even

more interesting things happening here like the individual pages that are generating for cell

functions to dynamically render them on demand and more that shows both the version that the

function is using the size of it the location that it's running we try to make it as easy as

possible to show what the framework is actually generating and running on Vercel Edge Network.

Now you're probably not just deploying once and then never touching your website again you want

to make updates to your website so let's go over to GitHub where we see this brand new repository

that was created automatically from the Vercel git integration and you see a couple things here

you see the code that was automatically created of course you see the domain for our application

which was automatically generated and now let's show what the actual workflow looks like for

pushing changes to my application now for the sake of the demo I just opened this up in the browser

here on GitHub and I'm going to edit a file inside of my Next.js application so I'll just say hello

world and we can go ahead and actually Commit This back into GitHub so if I go here I can say

push it and I can commit those changes and we're going to push

commit and push those two are repository now if we go over to our commits we see that oh there's this

new commit that was pushed directly to our main branch that says push it so the git integration

picks up and automatically kicks off a build of our application we can go into Vercel and see this

unique deployment that was created because of this push that we just pushed to our application and

now all of a sudden we have a brand new production deployment of our application our main branch is

Alias to our production deployments so if I click visit I go out to the version of our website here

and I see these changes specifically where I see Hello World and if I go back and I see the actual

production deployment here or the production domain of product demo 5 or Vercel.app I can go

see what's live for our customers all around the world when they visit our domain now realistically

I might not be pushing changes directly to my main branch I might be wanting to review those

changes and go through a pull request process so let's go back into our code here and I'm

We're going to first create a new branch so we'll call this new changes and then I'm going to make

some well first let's switch to this branch here and then I'm going to make some changes again in

this file so inside of app page we're going to add a bunch more exclamation points here and we're

going to go over and we're going to commit these changes so we'll commit and push those to

our application now back in GitHub we see that hey I recently pushed a new Branch it'd be great if I

could make a pull request so I can review those changes with my team so let's go ahead and do

that and you're going to notice something which is the Vercel git integration automatically picked up

these changes and it's kicked off a deployment for our application so let's go over here check this

out and we see we just built a brand new preview deployment of our application so this means that

these changes are not live in production for our customers instead they're behind the secure Vercel

authentication where I can view these changes with my beautiful exclamation marks here I could

say hey these look wrong we need five more and I can at mention somebody on my team if I wanted

to I can include some screenshots or can write in markdown if I want to I can maybe do some bold or

italic for example so this feature is built into the Vercel toolbar and into the preview experience

that allows you to comment on specific pieces of your UI so much like you would comment in a

Google Doc or on a Figma design you can comment on the actual UI the actual pixels that are rendered

on your screen and this makes it really great to review changes as you're making updates to your

application now if I go back over to GitHub you're going to notice something interesting

which is when I get this comment that has a link to my application and it says that there's one

comment that's unresolved now this comment is actually blocking me from merging this PR into

main because it wants to make sure that I address this feedback so if I go back over here you know

let's say I talk to my team they said you know what actually five exclamation marks is the right

one I can click resolve here I can maybe throw an emoji 100 emoji on here okay cool well it's all

we'll resolve this we'll go back over and you're going to see it automatically updates to say yes

this comment was resolved "LGTM" looks good to me let's actually merge this thing into production

so now I'm going to merge this change we've agreed that these changes of the exclamation marks looks

good I can go ahead and delete this Branch if I want let me go back to my main repo here and

I look at the list of commits and you're going to notice something interesting which is that I have

a new push for these changes so if I click on here I go view the deployment inside of Vercel I see

that this was a production deployment because we pushed to our main branch and it completed

successfully and it's now live at product demo five with my uh brand new exclamation marks I've

added to my site now you might have noticed that I talked about preview and production deployments

and I want to talk a bit about the different environments inside of Vercel so first off you

have deployment which is actually on your machine where you're making changes inside of your editor

second you have the preview environment where you could have an unlimited number of different

environments maybe this is something that is for a specific branch and I want to go in and add

specific values just to that branch something like a staging environment or a QA environment and then

of course you have your one production deployment environment now let's say I want to add new values

or new variables specifically for an environment so maybe I want to have my value here and this

is going to be the product demo and I only want this to be in my production environment I don't

want this to be in preview or deployment now I can hit save here I can also copy paste in environment

variable files here or import them in directly and then hit save we're going to see down below

here that Lee added this new value of my value and I can show the value here which is product

demo now if I want to actually use this inside of my code let's take a look at what that looks

like so back in my code let's say rather than having this hard-coded string of text I want to

do something like process.env.MY_VALUE and this is going to be dynamic based on

the environment that we're in so I could actually go back here and say you know what

MY_VALUE this is going to be preview if it's only in  the preview environment and hit save and have that

difference between preview and production so I put  in this new value I've made a new branch called

in there and we're going to say add this dynamic  value here we're going to commit and push these

up to this Branch now back in GitHub we see that  we push some changes to our Branch so I'm going

to hit to make a new poll request add this dynamic  value here we see we're using process.emv.MY_VALUE

again I'll go ahead and create a pull request so  we can review these changes we see that it's been

successfully deployed so we can go in here and say  okay let's go look at this preview deployment here

everything was successful it took about 27 seconds  so let's go visit this change and we'll get our

Vercel authentication and we see the dynamic  value of preview really screaming at me here

letting me know that it pulled this value from the  environment variables but now if I said okay let's

go ahead and merge this into our production  environment which is our main branch if I go

back over to here I'll click on the deployments  for my application we see it kicked off a new

production deployment and this is going to pull  in that production environment variable from our

application okay it's finished so if I click on  here I should see product hyphen demo which is the

value for my production environment now another  thing to mention here when you're looking at your

deployments is that maybe you want to lock down  so only people who can view these are actually

logged into Vercel so you can go to your settings  and toggle on Vercel authentication maybe you want

that for previews or maybe you want it for all of  your deployments there's some additional settings

here based on whether you're on a free account  or you're on a paid Pro account you could throw

on password protection you can customize the  suffix of your domain so it's not dot versus

app but something custom that you want there's so  much more that you can do here depending on the

plan that you choose from Vercel and if you go up  to Enterprise as well too there's even additional

cool things here like audit logs or SAML SSO or  blocking specific IPs all of this can be found on

our pricing page if you want to learn more more  than what I can go into right now okay so we're

now in production we've deployed our website  we have our CI CD automatically set up we're

integrated into git all our changes are picked  up well now what now what do we do that we're in

production well we have this domain product-demo  five.vercel.app maybe we want to do something a

little bit more custom so you could go over to  vercel.com/domains I could say my cool app

.tech or maybe something more interesting  or exciting than that I could go ahead and in a

couple clicks purchase this domain for my account  or for my team and then back inside of my settings

I can go in and actually add in domains for my  application so maybe I want to add in this new

domain that I purchased through Vercel or any  domain that I've purchased in any registrar okay

so we got that domain now maybe we want to make  sure that things are running successfully so we

want to take a look at the logs so if you click  on the logs tab here we can go in and see all of

the different information about requests to our  site so we see all these get requests for the

index route we can see some additional metadata  about the requests we can filter things on the

left based on the status code or the specific  function or the host or whether it was successful

or an error now for a slightly more interesting  example we can look at again my personal website

leerob.io which is on a Pro plan and I can look at  the logs here you can see a bunch more logs and we

can actually have a little bit longer duration we  can go back in time and see this information plus

of course there's some info logs where I can dig  into you know people viewing this blog post for

example there's also a couple warnings here which  looks like some 404s for people trying to access

things that don't exist so I get all of this  observability through logs now if I want to take

this even further I can enable monitoring inside  of Vercel which allows me to cross link logs

into this Monitoring view that allows me to run  queries and save queries and really dig into all

of the usage and traffic of my application so for  example we include some queries by default like

understanding requests to different sites in your  account so you can view those over time and drill

in and inspect specific parts of your production  or preview traffic or where your usage is coming

from and who's accessing your website so this  is uh something that's very helpful as well if

you want to get further insight into your traffic  now what about if I want analytics for my website

well Vercel has a product Web Analytics that makes  it really easy to do this as well too so rather

than needing to use a tool like Google Analytics  which is going to give you free analytics but at

the cost of your customers privacy Vercel has a  web Analytics tool that is a first-party privacy

friendly solution has a nice dashboard here that  allows you to view your visitors view your page

traffic understand the top pages where people are  referring your site from the different countries

or operating systems or browsers and hey even add  custom events where you can dig in and understand

who is creating these custom events where are  they bringing in their traffic from and just

really have this fine grain detail into how your  site is performing and converting and optimizing

as well too so this is the Web Analytics product  that Vercel offers but we also have another

product once you're in production you want to make  sure that your performance is staying great as

well too so maybe you validated things on your  preview deployments while you're in GitHub but

then you deploy to production and you want to make  sure that things are going well for real visitor

traffic and that's where we have Speed Insights  so we're looking at here the Next.js website we

can see we've got a real experience score of 100  and we can dial the knobs here we can see these

dotted lines are showing specific deployments  that have went to production so I updated some

content here on the home page for example we  can drill into specific core web vitals and

understand their effect on the performance of our  website and if there's a regression unfortunately

we could go and say you know what we're going  to roll back that regression because we saw

a dip in our speed insights data speaking of  regressions wouldn't it be great if we could

instantly roll back to any previous version of  our application so maybe we talked to our design

team and they say you know what those exclamation  marks that you added inside of that new Next.js

site you deployed we don't want those anymore  so let's say we go to our deployments again

back on that site that I deployed and we can  filter by our production deployments if we'd

like and we're going to say let's roll back  instantly to this last version of the website

so we're going to have some confirmation modal  here to understand to make sure I know what I'm

doing here and I do want to instantly roll  back and I'm going to confirm the rollback

and we're done so now you see it updates here to  say current if I go click on this deployment and

I go look at our site in production we don't  see that process.env value anymore we see the

old exclamation one as well too now maybe I wanted  to go way back like all the way back to the first

deployment well I'm on a free account here but if  you upgrade to Pro you can have a limited instant

rollbacks now let's say you have a slightly more  complex application that's actually hooked up to

some dynamic data from a Content Management System  like a CMS or a database for example well this

result toolbar that I've already showed you how  to comment on the pieces of your UI can also be

used to preview draft content from your CMS and  Visually edit it on the page as well too so for

example on the Vercel website we have a blog  that's driven by a CMS and I'm doing some draft

content right now maybe I want to go ahead  and click this edit button and actually pick

some of the different entries on the page to go  ahead and either edit this in line directly here

and we'll see that nice same animation or I can  more importantly get linked directly to the entry

inside of Contentful so after logging in you'll  see I'm linked back to the specific blog post

inside of Contentful now this can be a bunch of  different CMSes it could be Sanity or Builder, Tina

Dato, Payload there's there's a bunch who support  this and more coming because it uses an open

source spec for how you actually integrate visual  editing into your content system but I could go

ahead and make a change here as well too and have  that be reflected back in my draft content that

I'm viewing inside of Vercel okay so to recap  so far we picked the framework and deployed it

we actually automatically set up CI/CD and we  integrated with our git provider we showed some

of the different features of the Vercel platform  but there's one other one that's really important

which is you might want to store some content  somewhere inside of database or a key value store

so Vercel integrates and gives you options to  use both KV, Postgres, a Blob store which is object

storage, as well as Edge Config which is really low  latency reads from all over our Edge Network back

inside the Vercel dashboard we can click on the  storage tab inside of our project and that's going

to give us the option to really easily create any  of these different types of databases so for my

personal site for example I've already created an  edge config store where I'm storing some really

important redirects maybe I also want to click  create a database in let's say we want to do

Postgres for example so I'm going to go ahead  and call this my Postgres database and we can

choose the region we wanted to play this in the  default is in us-east which is also the default

for Vercel Functions which is great because you  want your compute and your data to be co-located

in the same place so we'll hit create here we're  going to create a brand new database amazing it's

that easy to create our new database so we've got  a post address database we can connect to it with

whatever tool we want whether it's just the native  psql driver here the packages that we've created

Prisma which is really popular just the native  PG package as well and we've got some steps down

below that make it easy to actually use this with  whichever framework you prefer now you might be

thinking okay well I want to integrate into some  other tool that you haven't already talked about

how can I do that and the good news is that Vercel  Frontend cloud makes it easy to integrate with

basically any solution whether that's through code  in your framework or whether it's through some of

the pre-built integrations that we provide inside  of the dashboard so for example maybe I want to

use a database like PlanetScale but we have  this nice admin dashboard template that will

get you automatically set up with PlanetScale  or maybe I want to use some commerce provider

like Shopify or I want to use a headless CMS  provider like Sitecore well maybe I can get

started from this Next.js Commerce template here  and get started in very very quickly building a

high performance e-commerce site these are all  available not only on the pre-built templates

that we have but also on our integrations  marketplace where you can see some of these

integrations that will make it really easy for  you to get started quickly using your favorite

tools and if you're thinking well that's great  but I actually want to integrate into something

completely custom that no one's ever seen we also  have a rest API as well as our CLI it allows you

the full flexibility of extending our platform  alright so this has been the lightning Vercel

product overview where I've walked through some  of the main features but there's actually a lot

more that I'd love to show you in another video  so why don't you give us a subscribe and leave a

like and let me know what type of features you'd  like for me to walk through in the meantime if you

head over to our pricing page you can get started  completely for free with an account where you can

build your side projects you can get started with  a team on a pro account and get access to more

included usage for all of the things that you know  and love from Vercel now or you can chat to our

sales team about creating an Enterprise account  so hopefully you found this helpful let me know

what you'd like to see us talk more about or build  next to help you build your websites faster cheers