Deploying a Project in Nuxt JS on Vercel with a Custom Domain
In this article, we will do something that many people want to learn and master: deploying an application. We will deploy a Nuxt JS application on Vercel with a custom domain from the site registro.br.
Vercel is a platform aimed at hosting applications in a very simple and fast way. It is known for being the company that created the Next JS framework, which is geared towards React. However, it is also possible to deploy Nuxt applications on this platform.
To perform the deploy, we need to create an account on the Vercel website. In addition, the deploy will be done through integration with GitHub. Therefore, it is important to have an account on this other platform as well.
Setting Up Our Local Project
The folder structure of our project is as follows:
It is very likely that the structure of your project is the same as shown in the image, or at least very similar.
The first thing we need to check is whether the “build” and “start” scripts of our project are correctly created. They are important because Vercel will use them to prepare and actually perform the deploy on the production server. We can check this in our package.json file. They should be as in the image below:
Before we upload our project to GitHub, it is necessary to add an essential file for the proper functioning of our project on Vercel. This file is called now.json. Now was the name of the first project developed by Vercel, launched in 2016, when the company was still called Zeit.
We will add the now.json file at the root of our project and define the following content in it:
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/now-builder",
"config": {}
}
]
}
After this change, the folder structure of our project will look like this:
We can now add all the files to our GitHub:
Now we are ready to configure our project on Vercel.
Configuring Deploy on Vercel
After creating our account on Vercel, we will go to the “Overview” tab on the Administration Dashboard and click on the “Import Project” option:
On the next page, we will choose the “Import Git Repository” option:
The next step will be to paste the URL of our GitHub repository and press “Continue”:
If this is your first time accessing Vercel, it may ask for access to your repositories. You can grant access to all repositories or just some specific ones:
After that, we will see the option below, where we can choose the root folder for the deploy. In our case, we will just click on “Continue”:
On the next page, we will be able to choose a framework for the project, in our case, Nuxt.js, and then we will enable the two options related to “Build Command” and “Output Directory.” After that, just click “Deploy”:
The deploy will be initiated, and after that, we will see the following success page:
When we see this page, we will know that the deploy was successful. Just click the “Visit” button, and we will be redirected to our live project, completely online:
This is already excellent! Our project is working in production! The process was quite simple, wasn't it?
The project address is using the default URL of Vercel, ending with “.vercel.app”. But we want to configure a custom domain. How can we do that? That’s what we are going to learn now!
Configuring a Custom Domain on Vercel
To begin the configuration of our custom domain, let's access the Dashboard of our project. On the homepage, we will click on “View Domains”:
On the next page, we will define the address we want for our project. Remember that it is important to own this domain. In my case, I own the domain myapp.dev.br, purchased from the site registro.br. You can purchase a domain on this site for around R$ 40.00 per year. This is the domain I will inform to Vercel:
After clicking “Add,” our domain will be added to the project. We will then see the information below:
Note that Vercel returned an error, indicating that the domain has an invalid configuration. And that makes sense because we have not configured our DNS on registro.br, but that is what we will do now.
Pay attention to the parameters highlighted in the image, as they will be necessary to perform this configuration.
Now let's access the site registro.br (note that it is only .br, without .com) and log in. In my account, the domain myapp.dev.br will be displayed, as we can see below:
We will click on the domain name. On the page that opens, we will click on “Edit Zone,” which will be in the “DNS” section:
On the next page, we will click on “New Entry”:
We will now provide the parameters that were given by Vercel, which are highlighted in some images above. After that, we will click on “Add”:
Don't forget to press “Save” before leaving the page:
Shortly after this, we will see that the domain on Vercel will have been “regularized” and will now be functioning:
Thus, when accessing https://myapp.dev.br/, we will see the following result:
Excellent! Our project is now functioning with our custom domain!
Our project is already functioning perfectly, but if we want, we can make it a little more complete by also adding the same domain with the www prefix.
To do this, just repeat the process we just performed, but with some changes.
Let’s configure one more entry on registro.br, with the configurations below:
Now let’s add one more domain in Vercel, called www.myapp.dev.br:
Next, we will click on Edit and select our main domain in the “Redirect to” option. Then just click on “Save”:
With this configuration, we defined that when accessing our project domain with www, we will be automatically redirected to the main domain, which will make both paths work.
Thus, no matter which URL we provide, our project will be found:
Conclusion
In this article, we learned to deploy a Nuxt JS application to Vercel. This platform is truly an excellent option for hosting our projects in a simple and straightforward way.
Nuxt JS is based on the Vue JS framework. You can learn all the features of this amazing framework in our Complete Vue JS Course, and we are sure it will help you grow in this tool.
Thank you for reading this far, and see you in the next article :)