Website Deployment | Mouli Bheemaneti
How to deploy Nuxt 3 Project in Linux Shared Hosting cPanel?
Nuxt3, cPanel, Linux Shared Hosting.
Deploying a Nuxt3 project in cPanel was not a straightforward thing for me. There is a small setting that you should add to do in cPanel. We’ll discuss this in detail shortly. But before that let me tell you briefly about what is cPanel & Nuxt3.
What is Nuxt3?
Nuxt is a free and open-source framework used to build production-grade full-stack web applications and websites with Vue.js. You can refer to this site — Create Nuxt Project, on how to create a Nuxt3 project.
What is cPanel?
cPanel is a web-based control panel that allows website owners to manage their websites and hosting accounts. It provides a graphical interface and a variety of tools to simplify tasks such as creating email accounts, managing domains, uploading files, and installing applications. It is commonly used by web hosting providers to offer a user-friendly interface for website management.
Build Nuxt Project
Depending on your package manager, run the below to generate a .output folder.
# Use the below command if you are using yarn as your package manager.
yarn generate
# Use the below command if you are using npm as your package manager.
npm run generateYou will now see a new folder called .output. Zip the contents inside it.
Now decide where you want to deploy it, whether in your main domain or subdomain. I’ll take you through both ways.
Main Domain
Open your cPanel and go to the file manager.
NOTE: The below-attached screenshot has a new UI of cPanel. A few of you might use old UI. In the old UI also, there is a File Manager option under Files.
Subdomain
If you are willing to deploy your Nuxt project in a subdomain, then check this folder structure for your created subdomain. For example, I’m considering my subdomain, https://music.moulibheemaneti.com, so I’ll consider music.moulibheemaneti.com folder. Check in the root directory itself.
If you haven’t created your subdomain yet, refer to this cPanel article on that.
Linux Shared Hosting
Linux-shared hosting commonly uses the Apache web server. And by default, this does not allow you to deploy your Nuxt3 project. So we have to do some small configuration.
What is .htaccess file?
The .htaccess file is a configuration file used on web servers that support Apache, including those using cPanel as the control panel. The name “.htaccess” stands for “hypertext access.”
Change .htaccess file in your file manager.
.htaccess file is a hidden file. So you may not be able to see that file directly in your file manager. To display the hidden files in a file manager.
If you can’t see .htaccess file, create one in your desired directory. And copy paste the below piece of configuration lines.
# .htaccess file
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]Final Stage of Deployment
Now upload the zip folder and unzip it in the cPanel.
In cPanel, you can’t directly upload a folder. Instead, you have to create a folder manually in cPanel and then copy the contents of the local directory to this created remote directory. Instead of such a long process, it is better to upload the zip and unzip the folder.
Now search for your domain or subdomain, wherever you hosted it, in your browser. I have used my website music.moulibheemaneti.com.
Conclusion
There are many platforms to deploy Nuxt3 project in. Since I recently worked on Linux server hosting and while working I found it important to document this process so that it might help someone like me.
This guide can be shared with your peer coders.😁
Happy Coding.
Follow me on Medium for more insightful articles related to development.
Also follow me on my GitHub and LinkedIn
