- [Female Narrator] What about deploying a server
in that app?
What solution do we use for this?
We'll take a look at one of them called Vercel.
Vercel is a platform for front-end frameworks
and static sites built to integrate
with your headless content, commerce or database.
Vercel provides you the option to deploy your application
as a server-rendered or
static-generated app.
For this lesson, we'll take a look
at how to deploy a server-rendered Nuxt app with Vercel.
The Nuxt demand contributors made an official package
called the Nuxt Vercel Builder Package to help with this.
This package is the ideal way to ship
fast production ready Nuxt application
that scales automatically on Vercel
when using server-side rendered mode.
Let's see how we can use it in our Nuxt application.
I'll head over to the code editor
and in here I'll create a new file called
vercel.json.
Inside this file, we'll have an object
and we'll call this builds.
This would become an array inside here.
We want to include the source.
So the source would be the nuxt.config.js,
and we wanted to use
the nuxtjs vercel builder.
We can also add an additional configuration here
called config.
And for now I'd leave this empty but
when this could be used is probably
if you need to include files in a server
that are no builds by a web pack,
you can include a server files key.
Or if you need to
pre-render route during build using like Nux generate
you can also include a generate static routes value
inside this config,
but for now, I'm going to leave it empty.
Now, the next thing I'll do here is to push this to GitHub
so that when I deploy my application to Vercel
the current version is included in the GitHub repo.
Now, if you currently don't have a GitHub repo
for your project, this will be the best time to do that.
Create a new report and push all of your code
and changes to that repo.
Right now, I already have mine pushed to a repo
called learning nuxt.
No, now I'm going to go back to Vercel and
if you currently have an account, that's great.
You can log in, but if you don't,
you have to sign up for a new account.
I do,
so I would just go ahead and login with my GitHub user.
The next thing I would like to do here
is create a new project.
This follows a similar route.
As when we deployed to Cloudflare pages.
We are going to come over here
and select the repo would like to deploy.
In this case,
I'm going to be deploying the learning nuxt.
So I'll go ahead and import that here in our project name.
We'll leave it as it is.
It's already pre-selected the framework presets
that we are using, which is Nuxt.
There are also other different frameworks included
in case you're deploying other frameworks.
In our case, we would stick to using
the Nuxt framework preset.
I won't be changing any of the default
build settings that was already included.
I also don't have any environment variable to include,
so the next thing I would like to do is deploy.
So I'll click the deploy button
and that would start running the deployment process.
One thing I'd like to highlight here is
that because we've included the config file,
it's going to build it differently.
So typically how you would have like a static
generated Nuxt application deployed to Vercel
is not exactly the same way
it will build
this SSR
in that application.
So using the Nuxt builder
it's going to create a serverless function.
If we have any for our application,
right now we see on the log that it's running
with the Nuxt Vercel builder with version included.
And when we wait for it to install the dependencies
run the build artifacts,
we finally get our application deployed.
Great!
Now application is deployed
as a server rendered application.