Day 4 Introduction to Web Servers

In this journey of our article series, we will dive deeper into one of the key and essential components for the functioning of the internet: web servers. The KISS principle (Keep It Simple, Stupid) is a fundamental concept that should be frequently maintained to keep everything clean and straightforward. For this reason, we will strengthen beginner-level knowledge to understand web servers, which is essential for building and hosting websites or web applications.

Personally, for one of my projects in a real-world scenario, I use Laravel for the backend and Flutter for the mobile app front end. Additionally, I use Vue.js for another project, and for a more ambitious web project, I’m using React.

A web server is a system that should have the sole responsibility for storing, processing, and delivering web pages to users. We are now talking about both the software and hardware aspects that make websites accessible.

this is nuxt config :

require("dotenv").config();
export default {
  env: {
    baseUrl: process.env.BASE_URL,
  },
  generate: {
    /* routes () {
        return axios.get('https://myapisite.com/')
            .then((res) => {
                return res.data.map((user) => {
                    return '/users/' + user.id
                })
            })
    }*/
  },

When we type a URL or even an IP address into a browser, we are making a request to a server, with the URL being the path to the server. The web server receives the request, processes it, and sends back the appropriate response, which could be an HTML page, an image, a video, or other resources.

At its most basic level, a web server has two primary roles:
Handle HTTP Requests: Respond to HTTP or HTTPS requests made by clients (web browsers).
Serve Content: Deliver static or dynamic content like HTML pages, CSS, JavaScript, images, and multimedia files.

Handle HTTP Requests: Respond to HTTP or HTTPS requests made by clients (web browsers).
Serve Content: Deliver static or dynamic content like HTML pages, CSS, JavaScript, images, and multimedia files.

How a Web Server Works

Step by step, a server follows these stages:

Client Request: A client (your browser) sends an HTTP request to the web server. For example, when you type www.mysite.com, the browser sends a request to the server hosting the site.

The Server Processes the Request: The web server receives the request and checks for the requested content. If the content exists, it is prepared for response (such as an HTML file, an image, etc.).

The Web Server Sends the Response: The server sends the response back to the client. If the content is not found, the server returns or should return, as a best practice, an error message like the classic "404 Not Found."

The Client Displays the Content: In the browser, the server's response is processed, and the pages or various resources are rendered or displayed.

Types of Web Servers

Several web servers are available, each with its own strengths and use cases. Here are some of the most popular ones:

1. Apache HTTP Server Overview: Apache is one of the oldest and most widely used web servers. It's open-source and highly configurable, making it a top choice for many web hosting companies and developers. Use Cases: Suitable for small to large-scale websites, offering extensive customization and control over server configurations.
2. Nginx Overview: Nginx (pronounced "Engine-X") is known for its performance, scalability, and efficient resource usage. It's designed to handle high loads and is often used as a reverse proxy or load balancer. Use Cases: Ideal for high-traffic websites, API management, and microservices architecture.
3. Microsoft IIS (Internet Information Services) Overview: IIS is Microsoft's web server, tightly integrated with Windows servers. It supports multiple languages, including ASP.NET, PHP, and others. Use Cases: Preferred for Windows-based environments and enterprise solutions that rely on Microsoft technologies.
4. LiteSpeed Overview: LiteSpeed is a lightweight, high-performance web server that offers compatibility with Apache's configuration files. It’s designed to boost performance while keeping resource consumption low. Use Cases: Suitable for high-performance websites where speed and low server load are critical.
5. Node.js Overview: Node.js is not a traditional web server but a JavaScript runtime that allows you to create web servers using JavaScript. It is highly efficient for real-time applications and services. Use Cases: Perfect for dynamic, real-time applications like chat apps, live video streaming, and APIs.

For a express server as locally :
in my package.json: I have :

{
  "name": "node-hello-world",
  "private": true,
  "version": "0.0.1",
  "description": "Node.js Hello world app on docker",
  "author": "hypriot.com",
  "dependencies": {
    "express": "4.12.0"
  }
}

in same folder :
I have index.js

var express = require('express');
var os = require("os");

var app = express();
var hostname = os.hostname();



app.get('/', function (req, res) {
  const ip = req.headers['x-forwarded-for'];

  res.send('<html><body>Node.js container ' + hostname + ' ' + 'Client IP: ' + ip + '</body></html>');
});

app.listen(80);
console.log('Running on http://localhost');

After I write those files, I need just run npm install and node index.js!

Web Servers can serve both static and dynamic content, depending on the type of website and its configuration, which can vary:

Static Server simply delivers stored files to the client without processing them. Static websites are faster but limited in interactivity. The files are pre-built in HTML, CSS, and JavaScript, and they do not change when the user accesses them.

Example: A portfolio website or a company's homepage.
Dynamic Servers handle more complex requests by generating content progressively. These typically involve a database and a server-side programming language such as PHP, Python, or Node.js.

Example: An online store provides content that is updated based on user interaction.

For efficient operation, a web server contains several components. The primary elements include:

HTTP Software: It handles HTTP requests and responses. This software is responsible for delivering content and communicating with clients.

Operating System: The web server runs on an operating system like Linux, Windows, or macOS, which allows for the management of server resources, files, and processes.

Database (Optional): Many websites with dynamic content require a database, such as MySQL or PostgreSQL, to store or retrieve data in real-time. For example, when we log in, the information is fetched from the database.

Server-Side Language (Optional): Languages such as PHP, Python, or JavaScript (Node.js) control dynamic content and interaction with the database.

There are different ways you can host your website:
Local Hosting: Running a web server on your own computer for development purposes. You can use tools like XAMPP (for Apache) or a Node.js server for testing your applications.
Shared Hosting: A cost-effective solution where multiple websites share the same server resources. It’s commonly offered by web hosting providers.
VPS Hosting: Virtual Private Server (VPS) hosting gives you more control and resources than shared hosting by providing a virtual server dedicated to your needs.
Cloud Hosting: Services like Amazon Web Services (AWS), Google Cloud, or Microsoft Azure offer scalable, pay-as-you-go web hosting options for large-scale applications.
Sunt diferite modalitate a gazdui un website :
Local Hosting : Running a web server on your own computer for development purposes. You can use tools like XAMPP (for Apache) or a Node.js server for testing your applications.
Shared Hosting: A cost-effective solution where multiple websites share the same server resources. It’s commonly offered by web hosting providers.

VPS Hosting: Virtual Private Server (VPS) hosting gives you more control and resources than shared hosting by providing a virtual server dedicated to your needs.

Personally, when it comes to a portfolio, I use a shared hosting solution. A VPS is ideal for solutions that require a custom server. From what I know, it's quite difficult to set up a shared server for Node.js, so a VPS is the best solution.

On DigitalOcean, I have a web server for the API built with Laravel, and for rendering with Nuxt.js, which communicates with interactions from Vue.js, I use a Node.js server that uses half the resources of the API.

For more follow me on more courses