Learn how to upload Nuxt.js files on hosting with a step by step guide. Get instructions for uploading and managing files easily. Nuxt.js was officially released in 2016 quoted from the Wikipedia article portal. Nuxt.js technology is inspired by Next.js. If React.js has Next.js then Vue.js has Nuxt.js. Nuxt.js was built to anticipate SEO quality issues that often occur on websites with single-page applications (SPA) such as Vue.js.
The increasing number of Nuxt.js users, many are asking can websites with Nuxt.js be run on hosting? Can! There are several settings that you have to do when you want to upload a Nuxt.js file to hosting. So, in this guide we will explain a little about Nuxt.js and how to upload Nuxt.js files to hosting.
Nuxt.js is a technology inspired by Next.js. Nuxt.js was created to overcome SEO problems that occur on single-page websites. For those of you who prioritize website SEO, you must know how to upload nuxt.js files to hosting.
Nuxt.js itself was officially released in 2016. If React.js has Next.js, then Vue.js has Nuxt.js. There are more and more Nuxt.js users, many of them are asking whether websites with Nuxt.js can be run on hosting.
So, in this article we will answer all these questions along with a tutorial on how to upload a Nuxt.js website to hosting. For those of you who don't know how, read this article until the end.
Before proceeding to the tutorial, it's a good idea to get to know what Nuxt.js technology is and the reasons why you should use Nuxt.js. The following is a brief explanation and some preparations before uploading files to hosting.
What is Nuxt.js?
Nuxt.js is a framework based on Vue.js for creating modern websites that are rendered on the server. Nuxt.js is also here to fix the shortcomings that exist in Vue.js. According to the original website, Nuxt.js is a framework for creating Vue.js applications.
Vue.js itself is a Javascript framework that is used to create SPA (Single-Page Application) user interfaces. Nuxt.js allows creating websites that support Server Side Rendering and PWA (Progressive Web App).
Where PWA and Server Side Rendering are the way to solve problems in the Vue.js application
Why You Should Nuxt.js
There are several reasons why people use Nuxt.js technology to create a website, including the following:
- Can render Vue.js applications without having to think about server configuration.
- You can create a website easily and there is no need for configuration on the server or client side.
- Can get a project structure with good quality automatically or by default.
- You can separate code automatically.
- Can serve files in static form.
- Route transition setup can be done easily
Preparation Before Uploading
Before uploading your Nuxt.js file to cPanel hosting, there are several preparations that must be done. Here are some things you should prepare:
- You must know how to access the server via SSH. This is very important because during installation, everything is done via SSH via the terminal or console. So, you can use SSH via the terminal or PuTTy software.
- Make sure you are familiar with CMD Linux. Because the installation process mostly uses Linux commands, make sure you are familiar with Linux commands.
- Already installed Node.js on the Hosting server. Because Nuxt.js can only run on the server side with the help of Node.js, make sure you have installed Node.js on the hosting server.
How to Upload Nuxt.js Files on Complete Hosting
After knowing what Nuxt.js is and preparation before starting to upload the Nuxt.js file. Now let's move on to the tutorial on how to upload Nuxt.js files on hosting. Please follow these steps:
1. Login to cPanel Hosting
The first step, please log in to your hosting cPanel first. You can access cPanel via yourdomain.com/cpanel or you can also access the members area of your hosting service.
2. Determine the Upload Location
After logging in, next you have to determine the upload location. You must determine whether files will be uploaded to the main domain or subdomain. If it is the main domain, please upload it to the public_html file.
However, if it is a subdomain, please create a subdomain first so you can upload the Nuxt.js file. For example, here we create a subdomain tutorial.yourdomain.com.
In Document Root, please enter the name of the folder to store the subdomain file. Please just create a folder with the name tutorial in the public_html directory.
3. Create a Node.js Application
Next you have to create a Node.js application for the server, this is because Nuxt.js is a framework that requires a JavaScript environment for its development. So, please create a Node.js app first.
Here are the steps:
- Select the Node.js App Setup menu in cPanel.
- Click CREATE APPLICATION.
- In the Node.js version section, select the recommended Node.js version.
- Then in Application Mode, select Development.
- Enter the name of the folder used to save the Nuxt file in the Application Root column.
- After that, select the domain or subdomain that will be used to access the Nuxt.js file in the Application URL section.
- If everything has been filled in, please click CREATE.
- Wait until the creation process is complete.
- Later a command will appear for installing Nuxt.js. Copy the command in your notepad.
- Finished.
- Now you can try to access your website url. Now Node.js has been installed on the tutorial.yourdomain.com subdomain.
4. Uploading Nuxt.js Files
After installing Node.js, the next step is to upload the Nuxt.js file to web hosting. You can do this upload process via the File Manager menu. Please upload the Nuxt.js file in the folder you created previously when filling in Application Root.
Because in this tutorial the folder is called nux-app, please upload the Nuxt.js file to that folder. If the folder name is different, please adjust it to that folder.
5. Port Settings in Nuxt.js
Nuxt.js by default runs on port 3000. But to be more secure, you can change the port value as you wish, for example port 8000. Then add the following command to the dev section of the package.json file:
“dev”: “nuxt –hostname ‘0’ –port 8000”
6. Accessing SSH via Terminal or PuTTy
The next step is to access SSH via PuTTy or Terminal. Windows users can use PuTTy, while Mac or Linux users can use the Terminal. Please write the following command in Terminal / PuTTy:
ssh username@controlpanelURL -p 64000
7. Installing Nuxt.js
Next you have to install Nuxt.js, the method is to enter the virtual environment via Putty or Terminal. The commands used are:
- source /home/websites/nodevenv/nux-app/10/bin/activate
- cd /home/websites/nux-app
Please adjust the command above with the Virtual Environment that you created in the third step.
After that start the Nuxt.js installation with the following command:
- npm install
- npm run dev
The next step is to set .httaccess so that the specified domain or subdomain can run the Nuxt.js file. If you are using the main domain, please add the code in the public_html folder.
Meanwhile, if in a subdomain, add the code in the .httaccess file in the subdomain folder. The code that you have to add is as follows:
Options +FollowSymLinks -IndexesIndexIgnore *DirectoryIndex<IfModule mod_rewrite.c>RewriteEngine on# use the appropriate port as aboveRewriteRule ^(.*)$ http://localhost:8000/$1 [P] #port as specified</IfModule>
8. Perform PM2 Installation
So that Node.js can run automatically and the process can be checked, you can use pm2. PM2 is a package process manager so that Node.js can run continuously. Before installing, run the following command:
- npm run build
- npm run start
After that press CTRL + C on the Keyboard. Then write the following command to install pm2:
- npm install pm2
- npx pm2 start npm –name “nuxtjs” –interpreter bash — start #nuxt
Wait for it to finish and run the following command:
- npx pm2 status
If the status is online, then the pm2 installation is successful and you have successfully uploaded the Nuxt.js file on Hosting. To check the results, you can try accessing the domain or subdomain in a browser.
Nuxt.js Can Be Used to Create Server Side Rendering and PWA Websites
So, that was the complete tutorial on how to upload Nuxt.js files on Hosting. However, before you choose a hosting service for your website, it is important to consider the security and reliability of the hosting service provider.