Upload Node.js application to Shared Hosting

Upload Node.js application to Shared Hosting

In the tutorial below we will learn how to upload a Node.js application to shared hosting. We will approach the process from Visual Studio Code to make it as clear as possible.

Currently most shared hosting providers do not have Node.js included, but it is perfectly possible to install from ssh, node and then use the power of npm to effectively deploy your application.

Explanatory video (spanish)

Upload Node.js application to Shared Hosting

Exploratory Index

From these links you can jump directly to the part of the tutorial that interests you the most:

Glossary of Terms Used in the Tutorial where it is explained how to Upload Node.js application to Shared Hosting

What is ssh?

ssh is a remote access protocol that makes it easy to remotely access and control servers from a command console.

What is Node.js?

Node.js Asynchronous event-driven JavaScript runtime environment, Node. js serves as a server in Javascript code, which allows you to create scalable applications with asynchronous events.

What is NPM?

NPM stands for Node Package Manager, it is the default JavaScript package manager, to install libraries with commands from the terminal in a simple, effective and scalable way.

What is a Shared Hosting?

It is a set of virtual machines, with web pages hosted on a single physical server, these pages share resources with each other, such as RAM and processing capacity.

Shared hosting is usually the most popular and cheapest option to have your own website.

What is FTP?

It is a file transfer system that allows applications to be uploaded to a server remotely. Files can be uploaded from folder to folder, from a visual environment. Unlike ssh, where the process is done from the console, although it should be added that the ssh protocol is more secure.

What is Git?

It is the most popular Version Control system in the world, this tool is designed to help development teams to manage the changes that are made in the source code of the applications that are developed.

What is Git Bash?

Git Bash is an application designed for Microsoft Windows that allows you to run Git from the command line. This terminal allows you to run Bash, SSH, SCP among other very popular Unix utilities effectively compiled for Windows.

If you want to know more about the most important Git Bash commands, you can see the following tutorial:

How to use Terminal

Configuration of the necessary tools for the deployment of a Javascript application in a Shared Hosting

Next, the necessary tools will be shown and configured for the correct operation of the application to be deployed.

Application to Deploy to the Server

In this post we are going to install a Wep Scraping application, which was previously published on this blog and which you can find at the following link:

Web Scraping Tool in Javascript

Installing and Downloading Visual Studio Code

In order for the tutorial to be as simple and accessible as possible, we are going to work with Visual Studio Code, the most popular code editor in the world, you can download and install it at the following link, no greater emphasis is going to be placed on this process due to its simplicity:

https://code.visualstudio.com/

Git Installation and Download

It is recommended to download and install Git, to use the terminal embedded in Visual Studio Code, Git Bash. In the following link you can download the application and install it with all the default parameters:

https://git-scm.com/

Configuring Visual Studio Code for Remote Server Access

From Visual Studio Code, FTP access and SSH access must be enabled from the Git Bash terminal, here is the process to connect to an FTP server from Visual Studio Code:

Connect to FTP/SFTP server using Visual Studio Code and the SFTP extension

Connect to FTP/SFTP server using Visual Studio Code and the SFTP extension

Connect to a server via SSH from Visual Studio Code

In addition to the FTP connection, the SSH connection is necessary to install Node.js and the necessary libraries to upload a Node.js application to a Shared Hosting, below is the connection process by SSH to a shared hosting, in this case Hostinger.

Connect to a server via SSH from Visual Studio Code

Installing Node.js on shared hosting

To carry out the installation of Node.js it is necessary to carry out the previous step by step up to here. If the necessary configuration is carried out as in the tutorial, you will be able to carry out the process from Visual Studio Code, with a few lines of code.

Desde el terminal, cuando hayas accedido a tu servidor con ssh, desde la carpeta public_html donde vas a tener los diferentes proyectos, copia y pega el siguiente código:

wget -qO- https://cdn.rawgit.com/creationix/nvm/master/install.sh | bash

Con el siguiente mandas configurar node a nivel global

export NVM_DIR="$HOME/.nvm"

When this process has been carried out effectively, you must enter the following command:

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Then you put the following command and press enter:

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Por último con el siguiente comando instalas ya node correctamente

nvm install node 
nvm install 16

After the installation of node, the npm commands to install the necessary libraries will work without any problem.

Upload Web Scraping application in Javascript to a Shared Hosting

At this point, almost the same procedures of the Web Scraping application, related in the video below, are due:

How to Build a Web Scraping Tool with Javascript

Below are the necessary codes to deploy the Node.js application to a Hosting, the first thing is to initialize npm, with the following command:

npm init

cheerio installation

npm i cheerio

Express js installation

npm i express

Installation of Axios

npm i axios

Installation of Nodemon

npm i nodemon

Creating the index.js file from ssh

The first thing is to get to the project with the cd command to only install node js in the location where it corresponds, then we must create a file, called index.js with the touch command, as seen in the code below:

touch index.js

Editing the index.js file

After creating the file, from the Visual Studio Code PDF explorer, this file is searched, and if it does not appear at the beginning, the connection is refreshed so that it shows the document.

When viewing the document, we right-click and choose the option Edit in Local then paste the code below:

Web Scraping application code

The application will be somewhat different from the Web Scraping related above, with the code below this blog is fully explored, searching for the keyword, PHP, the application prints in json format, the publications related to this keyword, in the free section and on the blog's premium device.

const PORT = 8000
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
const app = express()

const blogs = [
    {
        nombre: 'premium',
        direccion: 'https://www.configuroweb.com/tag/premium/',
        base: ''
    },
    {
        nombre: 'premium-2',
        direccion: 'https://www.configuroweb.com/tag/premium/page/2/',
        base: ''
    },
    {
        nombre: 'premium-3',
        direccion: 'https://www.configuroweb.com/tag/premium/page/3/',
        base: ''
    },
    {
        nombre: 'premium-4',
        direccion: 'https://www.configuroweb.com/tag/premium/page/4/',
        base: ''
    },
    {
        nombre: 'premium-5',
        direccion: 'https://www.configuroweb.com/tag/premium/page/5/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://www.configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis',
        direccion: 'https://www.configuroweb.com/tag/gratis/',
        base: ''
    },
    {
        nombre: 'gratis-2',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/2/',
        base: ''
    },
    {
        nombre: 'gratis-3',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/3/',
        base: ''
    },
    {
        nombre: 'gratis-4',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/4/',
        base: ''
    },
    {
        nombre: 'gratis-5',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/5/',
        base: ''
    },
    {
        nombre: 'gratis-6',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/6/',
        base: ''
    },
    {
        nombre: 'gratis-7',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/7/',
        base: ''
    },
    {
        nombre: 'gratis-8',
        direccion: 'https://www.configuroweb.com/tag/gratis/page/8/',
        base: ''
    },
    
]

const articles = []

blogs.forEach(blog => {
    axios.get(blog.direccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')

                articles.push({
                    titulo,
                    url: blog.base + url,
                    ruta: blog.nombre
                })
            })

        })
})

app.get('/proyecto-api', (req, res) => {
    res.json('Publicaciones ConfiguroWeb')
})

app.get('/proyecto-api/post', (req, res) => {
    res.json(articles)
})

app.get('/proyecto-api/post/:blogId', (req, res) => {
    const blogId = req.params.blogId

    const blogDireccion = blogs.filter(blog => blog.nombre == blogId)[0].direccion
    const blogBase = blogs.filter(blog => blog.nombre == blogId)[0].base


    axios.get(blogDireccion)
        .then(response => {
            const html = response.data
            const $ = cheerio.load(html)
            const specificArticles = []

            $('a:contains("PHP")', html).each(function () {
                const titulo = $(this).text()
                const url = $(this).attr('href')
                specificArticles.push({
                    titulo,
                    url: blogBase + url,
                    ruta: blogId
                })
            })
            res.json(specificArticles)
        }).catch(err => console.log(err))
})

app.listen(PORT, () => console.log(`Corriendo desde el puertoo ${PORT}`))

At this point, your application should be fully functional, I remain on the lookout for any questions.

Leave a Reply

Your email address will not be published.