Ad Code

Guide to Uploading nuxt.js Files on Hosting

Table of Contents: [Show]

    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?

    Guide to Uploading nuxt.js Files on Hosting

    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 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

    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

    How to Upload Nuxt.js Files on Complete Hosting

    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.
    • 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 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 -Indexes

                          IndexIgnore *


                          <IfModule mod_rewrite.c>

                          RewriteEngine on

                          # use the appropriate port as above

                          RewriteRule ^(.*)$ http://localhost:8000/$1 [P] #port as specified


    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.

    Post a Comment


    Close Menu