- Congratulations, your app is ready to get deployed.
There are different hosting platforms available
to deploy your application.
But for this lesson,
we are going to be using a platform called CloudFlare Pages.
CloudFlare Pages is a super fast solution
for deploying dynamic front end applications.
To deploy our nuxt app,
we need to first have it hosted on GitHub.
I currently have mine on GitHub, as you see right here.
If you don't already have your repo on GitHub,
go ahead and create a new repo
and push all of your work to it.
Next head over to the CloudFlare Pages website
and if you don't currently have an account,
you would need to create one by signing up.
But if you do, you can go ahead and login.
You get redirected to the pages dashboard.
In this dashboard you'd click the,
create a new project button
and this would take you to the project settings, right?
For our applications, since we have it hosted on GitHub,
would select GitHub which is already the default.
Select the user accounts
and select the repo you would like to deploy.
Mine here is learning-nuxtjs and I'll begin set up.
At this point if you need to change the name of your project
or change the production branch,
this would be where you would do that.
I'll be leaving mine as the default right now.
Next we have the build settings.
The build settings are settings that would trigger
a build deployment for your application,
every time you run a git commit.
So for us,
because we are deploying this app as a statically
generated app that build command will be
nuxt generate
or npm run generate.
I'll probably use npm run generate,
and the build directory will be dist.
The dist directory.
Another thing I would like to mention is that CloudFlare has
something called framework presets, and it's basically
already saved certains for different frameworks
that you can choose from.
We have nuxt right here, and if I choose that, okay
they used nuxt generate, so I'll just
stick to that right?
Next, we don't need to do this yet, but if you need,
like if you have a roots directory,
and you have your application inside that
you can specify here, but we are not
going to do that.
If you also have environment variable being used
in your application, you can also specify that here.
Next I will save this and have it deployed.
After completing the configuration
this will start off a deployed pipeline
that will install all the dependencies
and build out specified in your application.
Great, once the build is completed
you'll get a preview URL which we see here
that we can actually go to.
And if I try to, we have our app currently deployed.
If I try to go to the gallery page,
you see we have our gallery as well, which is great.
Now for every comment you make to your repository,
CloudFlare would trigger a new deployment for your website.
Great. That's how you deploy with CloudFlare pages.