Introduction
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
In this guide, we’ll explain how to install an Node, Apache web server and MySql on your Ubuntu 16.04 server.
Prerequisites
Before you begin this guide, you should have a regular, non-root user with sudo privileges configured on your server. Additionally, you will need to enable a basic firewall to block non-essential ports.
When you have an account available, log in as your non-root user to begin.
Step 1 — Installing Node
In order to choose a Node.js version to work with depends totally on your audience and the environment that you have at your disposition. You should always target the stable version of Node that is quite mature and dependable as it has proven stability and commitment to keep that version as it is.
There are different ways to install Node.js in your Ubuntu 16.04 desktop and server version.
A. Install using the Node Version Manager (recommended)
The recommended way to proceed with the installation of Node.js is to use the NVM tool (Node Version Manager). This tool is a fully POSIX-compliant bash script to manage multiple active Node.js versions in your system. As probably, you will end up with compatibility problems with some of the projects you may want to host on your server, you should be able to switch between versions.
In order to use NVM, you should run this sh file that will do the trick. If you agree with the content of the script and what’s going to do, you may simply download and run it directly in the terminal with the following command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
This will initialize NVM as well on the command line, however, you need first to obtain the .bashrc file with the following command:
source ~/.bashrc
And that’s it, you should be able to use the NVM tool now. You may want to verify the available versions of Node.js with the following command:
nvm list-remote
This will list absolutely all the versions available of Node.js, from the 0.1.14 to the latest version
…
v14.12.0
v14.13.0
v14.13.1
v14.14.0
v15.0.1
v15.1.0
v15.2.0
v15.2.1
v15.3.0
v15.4.0
Now your task is to choose one of the versions that you need. For example, if i want to install a specific version (the 10.24.1) i would run the following command:
nvm install v10.24.1
And wait until the installation finishes. The command should generate an output similar to:
`Downloading and installing node v10.24.1…
Downloading https://nodejs.org/dist/v10.24.1/node-v10.24.1-linux-x64.tar.xz...
################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v10.24.1 (npm v6.14.12)
Creating default alias: default -> v10.24.1
`
Printing the version of node with the following command:
node -vWould generate the following output:
v10.24.1
Since you installed node use nvm , it also install NPM. So you won’t need to install it manually.
Printing the version of npm with the following command:
npm -v
Would generate the following output:
v6.14.12
How To Install the Apache Web Server on Ubuntu 16.04
Step 1 — Installing Apache
Apache is available within Ubuntu’s default software repositories, making it possible to install it using conventional package management tools.
Let’s begin by updating the local package index to reflect the latest upstream changes:
Let’s begin by updating the local package index to reflect the latest upstream changes:
$ sudo apt update
Then, install the apache2 package:
$ sudo apt install apache2
After confirming the installation, apt will install Apache and all required dependencies.
Step 2 — Adjusting the Firewall
Before testing Apache, it’s necessary to modify the firewall settings to allow outside access to the default web ports. Assuming that you followed the instructions in the prerequisites, you should have a UFW firewall configured to restrict access to your server.
During installation, Apache registers itself with UFW to provide a few application profiles that can be used to enable or disable access to Apache through the firewall.
List the ufw application profiles by typing:
$ sudo ufw app list
You will receive a list of the application profiles:
Output
Available applications:
Apache
Apache Full
Apache Secure
CUPS
OpenSSH
As indicated by the output, there are three profiles available for Apache:
Apache: This profile opens only port 80 (normal, unencrypted web traffic)
Apache Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
Apache Secure: This profile opens only port 443 (TLS/SSL encrypted traffic)
It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Since we haven’t configured SSL for our server yet in this guide, we will only need to allow traffic on port 80:
$ sudo ufw allow 'Apache'
You can verify the change by typing:
$ sudo ufw status
The output will provide a list of allowed HTTP traffic:
Output
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Apache ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Apache (v6) ALLOW Anywhere (v6)
As indicated by the output, the profile has been activated to allow access to the Apache web server.
If sudo ufw status return ‘inactive’
sudo ufw enable
sudo ufw default deny
And I then do:
sudo iptables -L
Step 3 — Checking your Web Server
At the end of the installation process, Ubuntu 16.04 starts Apache. The web server should already be up and running.
Check with the systemd init system to make sure the service is running by typing:
$ sudo systemctl status apache2
Output
● apache2.service - The Apache HTTP Server
Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
Active: active (running) since Thu 2020-04-23 22:36:30 UTC; 20h ago
Docs: https://httpd.apache.org/docs/2.4/
Main PID: 29435 (apache2)
Tasks: 55 (limit: 1137)
Memory: 8.0M
CGroup: /system.slice/apache2.service
├─29435 /usr/sbin/apache2 -k start
├─29437 /usr/sbin/apache2 -k start
└─29438 /usr/sbin/apache2 -k start
As confirmed by this output, the service has started successfully. However, the best way to test this is to request a page from Apache.
You can access the default Apache landing page to confirm that the software is running properly through your IP address. If you do not know your server’s IP address, you can get it a few different ways from the command line.
Try typing this at your server’s command prompt:
hostname -I
You will get back a few addresses separated by spaces. You can try each in your web browser to determine if they work.
Another option is to use the Icanhazip tool, which should give you your public IP address as read from another location on the internet:
curl -4 icanhazip.com
When you have your server’s IP address, enter it into your browser’s address bar:
http://your_server_ip
You should see the default Ubuntu 16.04 Apache web page:
This page indicates that Apache is working correctly. It also includes some basic information about important Apache files and directory locations.
Step 4 — Managing the Apache Process
Now that you have your web server up and running, let’s go over some basic management commands using systemctl.
To stop your web server, type:
$ sudo systemctl stop apache2
To start the web server when it is stopped, type:
$ sudo systemctl start apache2
To stop and then start the service again, type:
$ sudo systemctl restart apache2
If you are simply making configuration changes, Apache can often reload without dropping connections. To do this, use this command:
$ sudo systemctl reload apache2
By default, Apache is configured to start automatically when the server boots. If this is not what you want, disable this behavior by typing:
$ sudo systemctl disable apache2
To re-enable the service to start up at boot, type:
$ sudo systemctl enable apache2
Apache should now start automatically when the server boots again.
Step 5 — Setting Up Virtual Hosts (Recommended)
When using the Apache web server, you can use virtual hosts (similar to server blocks in Nginx) to encapsulate configuration details and host more than one domain from a single server. We will set up a domain called your_domain, but you should replace this with your own domain name.
Apache on Ubuntu 16.04 has one server block enabled by default that is configured to serve documents from the /var/www/html directory. While this works well for a single site, it can become unwieldy if you are hosting multiple sites. Instead of modifying /var/www/html, let’s create a directory structure within /var/www for a your_domain site, leaving /var/www/html in place as the default directory to be served if a client request doesn’t match any other sites.
Create the directory for your_domain as follows:
$ sudo mkdir /var/www/your_domain
Next, assign ownership of the directory with the $USER environment variable:
$ sudo chown -R $USER:$USER /var/www/your_domain
The permissions of your web roots should be correct if you haven’t modified your umask value, which sets default file permissions. To ensure that your permissions are correct and allow the owner to read, write, and execute the files while granting only read and execute permissions to groups and others, you can input the following command:
$ sudo chmod -R 755 /var/www/your_domain
Next, create a sample index.html page using nano or your favorite editor:
$ sudo nano /var/www/your_domain/index.html
Inside, add the following sample HTML:
/var/www/your_domain/index.html
Welcome to Your_domain!
Success! The your_domain virtual host is working!
Save and close the file when you are finished.
In order for Apache to serve this content, it’s necessary to create a virtual host file with the correct directives. Instead of modifying the default configuration file located at /etc/apache2/sites-available/000-default.conf directly, let’s make a new one at /etc/apache2/sites-available/your_domain.conf:
$ sudo nano /etc/apache2/sites-available/your_domain.conf
Paste in the following configuration block, which is similar to the default, but updated for our new directory and domain name:
/etc/apache2/sites-available/your_domain.conf
ServerAdmin webmaster@localhost
ServerName your_domain
ServerAlias www.your_domain
DocumentRoot /var/www/your_domain
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
Notice that we’ve updated the DocumentRoot to our new directory and ServerAdmin to an email that the your_domain site administrator can access. We’ve also added two directives: ServerName, which establishes the base domain that should match for this virtual host definition, and ServerAlias, which defines further names that should match as if they were the base name.
Save and close the file when you are finished.
Let’s enable the file with the a2ensite tool:
$ sudo a2ensite your_domain.conf
Disable the default site defined in 000-default.conf:
$ sudo a2dissite 000-default.conf
Next, let’s test for configuration errors:
$ sudo apache2ctl configtest
You should receive the following output:
Output
Syntax OK
Restart Apache to implement your changes:
$ sudo systemctl restart apache2
Apache should now be serving your domain name. You can test this by navigating to http://your_domain, where you should see something like this:
Step 6 — Getting Familiar with Important Apache Files and Directories
Now that you know how to manage the Apache service itself, you should take a few minutes to familiarize yourself with a few important directories and files.
Content
/var/www/html: The actual web content, which by default only consists of the default Apache page you saw earlier, is served out of the /var/www/html directory. This can be changed by altering Apache configuration files.
Server Configuration
/etc/apache2: The Apache configuration directory. All of the Apache configuration files reside here.
/etc/apache2/apache2.conf: The main Apache configuration file. This can be modified to make changes to the Apache global configuration. This file is responsible for loading many of the other files in the configuration directory.
/etc/apache2/ports.conf: This file specifies the ports that Apache will listen on. By default, Apache listens on port 80 and additionally listens on port 443 when a module providing SSL capabilities is enabled.
/etc/apache2/sites-available/: The directory where per-site virtual hosts can be stored. Apache will not use the configuration files found in this directory unless they are linked to the sites-enabled directory. Typically, all server block configuration is done in this directory, and then enabled by linking to the other directory with the a2ensite command.
/etc/apache2/sites-enabled/: The directory where enabled per-site virtual hosts are stored. Typically, these are created by linking to configuration files found in the sites-available directory with the a2ensite. Apache reads the configuration files and links found in this directory when it starts or reloads to compile a complete configuration.
/etc/apache2/conf-available/, /etc/apache2/conf-enabled/: These directories have the same relationship as the sites-available and sites-enabled directories, but are used to store configuration fragments that do not belong in a virtual host. Files in the conf-available directory can be enabled with the a2enconf command and disabled with the a2disconf command.
/etc/apache2/mods-available/, /etc/apache2/mods-enabled/: These directories contain the available and enabled modules, respectively. Files ending in .load contain fragments to load specific modules, while files ending in .conf contain the configuration for those modules. Modules can be enabled and disabled using the a2enmod and a2dismod command.
Server Logs
/var/log/apache2/access.log: By default, every request to your web server is recorded in this log file unless Apache is configured to do otherwise.
/var/log/apache2/error.log: By default, all errors are recorded in this file. The LogLevel directive in the Apache configuration specifies how much detail the error logs will contain.
Installing MySQL
Now that we have our web server up and running, it is time to install MySQL. MySQL is a database management system. Basically, it will organize and provide access to databases where our site can store information.
Again, we can use apt to acquire and install our software. This time, we’ll also install some other “helper” packages that will assist us in getting our components to communicate with each other:
$ sudo apt-get install mysql-server
Again, you will be shown a list of the packages that will be installed, along with the amount of disk space they’ll take up. Enter Y to continue
How To Add PHP and PhpMyAdmin on Ubuntu 16.04
Installing PHP
PHP is the component of our setup that will process code to display dynamic content. It can run scripts, connect to our MySQL databases to get information, and hand the processed content over to our web server to display.
$ sudo apt-get install php libapache2-mod-php php-mcrypt php-mysql
This should install PHP without any problems. We’ll test this in a moment.
Install phpMyAdmin
To get started, we will install phpMyAdmin from the default Ubuntu repositories.
We can do this by updating our local package index and then using the apt packaging system to pull down the files and install them on our system:
$ sudo apt-get update
$ sudo apt-get install phpmyadmin php-mbstring php-gettext
This will ask you a few questions in order to configure your installation correctly.
The installation process actually adds the phpMyAdmin Apache configuration file into the /etc/apache2/conf-enabled/ directory, where it is automatically read.
The only thing we need to do is explicitly enable the PHP mcrypt and mbstring extensions, which we can do by typing:
$ sudo phpenmod mcrypt
$ sudo phpenmod mbstring
Afterwards, you’ll need to restart Apache for your changes to be recognized:
$ sudo systemctl restart apache2
You can now access the web interface by visiting your server’s domain name or public IP address followed by /phpmyadmin:
https://domain_name_or_IP/phpmyadmin
Deploy Angular application
On your development machine, build your application in prod mode using command ng build --prod. This command shall create dist folder in Angular source code folder.
Now we need to transfer dist folder content to appache /var/www/html
Starting Node application
Start the node application by using the command
node app.js
For running the node application in background even after terminal closes:
pm2 tart app.js
After successful file transfer, go back to web browser and hit url
http://.
You should see your Angular application running!
Issues Occurred and Solutions
a)
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! node-sass@4.14.1 install: node scripts/install.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
Solution:
npm i --unsafe-perm node-sass
b)
404 error occur when refresh through the browser
Solution:
Apache
ServerName my-app
DocumentRoot /path/to/app
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow HTML5 state links
RewriteRule ^ index.html [L]
Cheers!
Top comments (0)