What is Nuxt.js?
Nuxt.js is a Vue.js-based framework for creating a modern website that is rendered on the server. Nuxt.js is also present to improve 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 is the way to solve problems in the Vue.js application
Why Nuxt.js
There are several reasons why people use this 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 do not need configuration from the server or client side.
- Can get a project structure with good quality automatically or by default.
- You can separate the codes automatically.
- Can present files that are static.
- Easy route transition setup
Preparation Before Upload
Sebelum upload file Nuxt.js Anda ke cPanel hosting, there are some preparations that must be made. 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 a terminal or console. Well, you can use SSH through the terminal or PuTTy software.
- Make sure you are familiar with Linux CMD. Since the installation process mostly uses Linux commands, make sure you are familiar with Linux commands.
- Have 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 File on Hosting Complete
After knowing what Nuxt.js is and preparing before starting to upload Nuxt.js files. Now we move on to the tutorial on how to upload Nuxt.js files on Hosting. Please follow the steps below:
Login to cPanel Hosting
The first step is to log in to your hosting cPanel. You can access the cPanel through domainanda.com/cpanel or through the members area of your hosting service.
Specify Upload Location
After logging in, you must then specify the upload location. You must specify whether the file will be uploaded to the main domain or subdomain. If the main domain, please upload to the public_html file.
However, if it is a subdomain, please create the subdomain first so that you can upload the Nuxt.js file. For example, here we create a tutorial.domainanda.com subdomain.
In the Document Root, please enter the folder name to store the subdomain files. Please just create a folder with the name tutorial in the public_html directory.
Creating 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 in its development. So, please create the Node.js app first.
Here are the steps:
- Select the Setup Node.js App menu in the cPanel.
- Klik 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 store the Nuxt file in the Application Root field.
- After that, select the domain or subdomain that will be used to access the Nuxt.js file in the Application URL section.
- If everything is filled in, please click CREATE.
- Wait for the creation process to finish.
- The command to install Nuxt.js will appear. Copy the command in your notepad.
- Finish.
Now you can try to access your website url. Node.js is now installed on the tutorial.domainanda.com subdomain.
Mengupload File Nuxt.js
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 that you created earlier when filling in the 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 customize the folder.
Setting Port di Nuxt.js
Nuxt.js by default runs on port 3000. But to be safe, you can change the port value as desired, for example port 8000. Then add the following command to the dev section of the package.json file:
“dev”: “nuxt –hostname ‘0’ –port 8000”
Accessing SSH Through 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 Terminal. Please write the following command in Terminal / PuTTy:
ssh username@controlpanelURL -p 64000
Installing Nuxt.js
Next you have to install Nuxt.js, the way 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 customize the above command with the Virtual Environment that you have created in the third step.
After that, start installing Nuxt.js 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 on a subdomain, add the code in the .httaccess file in the subdomain folder. The code that you must add is as follows:
Options +FollowSymLinks -Indexes
IndexIgnore *
DirectoryIndex
<IfModule mod_rewrite.c>
RewriteEngine on
# gunakan port yg sesuai seperti diatas
RewriteRule ^(.*)$ http://localhost:8000/$1 [P] #port sesuai yang ditentukan
</IfModule>
Perform PM2 Installation
So that Node.js can run automatically and the process can be checked, you can use pm2. PM2 is a process manager package 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 was successful and you have successfully uploaded the Nuxt.js File on the Hosting. To check the results, you can try accessing the domain or subdomain in the browser.
Nuxt.js Bisa Dimanfaatkan untuk Membuat Website Server Side Rendering dan PWA
Well, that was a complete tutorial on how to upload Nuxt.js files on Hosting. However, before you choose hosting services for your website, it's important to consider the security and reliability of the hosting service provider.
For this reason, we would like to recommend hosting services from Exabytes Indonesia. Exabytes Indonesia is a leading hosting provider that has been providing high-quality hosting services with various excellent features.
One aspect that makes Exabytes Indonesia stand out is their high data security, as they have successfully achieved ISO 27001 certification.
The ISO 27001 certificate confirms Exabytes Indonesia's commitment to maintaining the confidentiality and security of customer data. By using hosting services from Exabytes Indonesia, you can rest assured that your data will be well protected.
With Exabytes Indonesia, you can focus on developing your Nuxt.js website without worrying about hosting security and performance.
In addition, Exabytes Indonesia also provides responsive and reliable technical support, ready to help you with any hosting-related issues.
So, if you're looking for secure, reliable, and high-quality hosting for your Nuxt.js website, consider hosting services from Exabytes Indonesia with ISO 27001 certification. Get the best hosting experience for your website with Exabytes Indonesia.
Good luck!