<h2 id="introduction">Introduction</h2>
In this article, we are going to a build simple app to serve static files like HTML files, CSS files, and images using <a rel="nofollow noopener" target="_blank" href="https://nodejs.org/en/">Node.js</a> and <a rel="nofollow noopener" target="_blank" href="https://expressjs.com/">Express</a>.
<h2 id="configuringtheprojectandinstallingexpress">Configuring the Project and Installing Express</h2>
To get started, let's create a new Node.js project by running the <code>init</code> command in a new folder:
<pre><code class="hljs">$ npm init
</code></pre>
Fill the requested information to your requirements or just set the default values by leaving each line blank.
Now we can install the Express framework by running:
<pre><code class="hljs">$ npm install --save express
</code></pre>
We are all set, let's start coding!
<h2 id="servingfileswithexpress">Serving Files with Express</h2>
There are two ways to serve static files using Express:
<ul>
<li>Serving a single file by configuring a path to the resource</li>
<li>Setting a public directory in which all files are accessible</li>
</ul>
We'll go over each of these methods in the next two sections.
<h3 id="servingasinglefile">Serving a Single File</h3>
Consider a scenario when we want to create a simple landing page that consists of 3 HTML documents (<code>home.html</code>, <code>contact.html</code>, and <code>about.html</code>), and we want to serve these files to the user.
Let's assume that the user visits the root path (<code>http://localhost:3000</code>). In that case, we want to serve the <code>home.html</code> file. Similarly, if the user visits the <code>/contacts</code> or <code>/about</code> paths, we want to serve the <code>contact.html</code> and <code>about.html</code> files, respectively.
To implement this, let's create a <code>landing-page.js</code> file and import the Express library:
<pre><code class="hljs">const express = require(&#x27;express&#x27;);
</code></pre>
Then, we'll create the Express app:
<pre><code class="hljs">const app = express();
</code></pre>
Then let's define the port on which our server will be running, which we'll use later when we actually run the server:
<pre><code class="hljs">const port = 3000;
</code></pre>
Since we are sending a single file, we won't include links to any CSS or script files within those HTML files unless they are hosted in a different location, like a <a rel="nofollow noopener" target="_blank" hre="https://en.wikipedia.org/wiki/Content_delivery_network">CDN</a>, for example.
We'll handle serving these files together in the next section, so for now, let's stick with three very simple, bare-bone HTML files:
home.html:
<pre><code class="hljs">&lt;body&gt;
 &lt;h1&gt;Home&lt;/h1&gt;
&lt;/body&gt;
</code></pre>
contact.html:
<pre><code class="hljs">&lt;body&gt;
 &lt;h1&gt;Contact&lt;/h1&gt;
&lt;/body&gt;
</code></pre>
about.html:
<pre><code class="hljs">&lt;body&gt;
 &lt;h1&gt;About Us&lt;/h1&gt;
&lt;/body&gt;
</code></pre>
Now let's go back and edit our <code>landing-page.js</code> file to send files corresponding to the paths the user visits, such as sending the <code>home.html</code> file when the user visits the root path.
We can use the <code>res.sendFile()</code> method to serve a file within a response:
<pre><code class="hljs">app.get(&#x27;/&#x27;, (req, res) =&gt; {
 res.sendFile(&#x27;./landing-page/home.html&#x27;, { root: __dirname });
});
</code></pre>
For security reasons, it's best to use a static path for <code>res.sendFile()</code>, as shown above. If you're ever taking user input that affects the file path, be very careful to prevent the user from being able to manipulate the file path and thus allowing them to retrieve private files.
In our case, we're setting the root for where the relative path is from by passing the <code>root</code> parameter to the method. Note that, we have passed <code>__dirname</code>, which is a Node.js global variable to the path of currently running file.
We can use the same method to serve our other files, <code>contact.html</code> and <code>about.html</code>, as well:
<pre><code class="hljs">app.get(&#x27;/about&#x27;, (req, res) =&gt; {
 res.sendFile(&#x27;./landing-page/about.html&#x27;, { root: __dirname });
});

app.get(&#x27;/contact&#x27;, (req, res) =&gt; {
 res.sendFile(&#x27;./landing-page/contact.html&#x27;, { root: __dirname });
});
</code></pre>
Now that our application is ready to go, let's start the server and listen to the port we set earlier:
<pre><code class="hljs">app.listen(port, () =&gt; console.log(`listening on port ${port}!`));
</code></pre>
And run our app by executing:
<pre><code class="hljs">$ node landing-page.js
</code></pre>
Open your browser and visit any of the mapped paths and you should be greeted with the HTML file(s):
<img src="https://stackabuse.s3.amazonaws.com/media/serving-static-files-with-node-and-express-1.png" alt="serving static html files with node">
<h3 id="settingupapublicdirectory">Setting up a Public Directory</h3>
The second method of serving static files is to set up a public directory. Unlike sending a file through the HTTP response, where only a single file can be served, all files inside our specified folder will be available for users.
Let's create another file, called <code>server.js</code>, and set the folder with our three HTML documents to be a public directory:
<pre><code class="hljs">const express = require(&#x27;express&#x27;);
const app = express();
const port = 3000;

// Setting up the public directory
app.use(express.static(&#x27;landing-page&#x27;));

app.listen(port, () =&gt; console.log(`listening on port ${port}!`));
</code></pre>
Making a directory public is as easy as using the <code>app.use()</code> and <code>express.static()</code> methods.
Let's run our app again and verify that it's working:
<pre><code class="hljs">$ node server.js
</code></pre>
Open your browser and visit any of the mapped paths and you should be greeted with the HTML files, just like last time. Keep in mind that this time, the root path is not mapped to the <code>home.html</code> file, but rather the <code>http://localhost:3000/home.html</code>:
<img src="https://stackabuse.s3.amazonaws.com/media/serving-static-files-with-node-and-express-2.JPG" alt="serving directories with node">
Also, you can set a prefix to the path to access your public directory by passing the prefix as the first parameter:
<pre><code class="hljs">app.use(&#x27;/public&#x27;, express.static(&#x27;landing-page&#x27;));
</code></pre>
Now, the files are situated on another path. For an example, <code>home.html</code> is now located at <code>http://localhost:3000/public/home.html</code>.
Unlike the first method where you'd hit <code>/about</code> and <code>about.html</code> would be served, note that you have to use the full file name in order to retrieve the file here - <code>/about.html</code>, for an example.
This allows us to host other files such as CSS, JavaScript files, and images as well.
For example, if there is a cat image on your public folder called <code>cat.png</code>, the server will be serving it on <code>http://localhost:3000/public/cat.png</code> depending on your configuration and you can easily call it via an HTML page and display it.
If you are planning to host a landing page like this, most probably it could be a combination of both methods that we discussed above. You can use a response to send a single HTML file and a public directory to host other static assets such as CSS files, JS scripts, and images.
<h2 id="conclusion">Conclusion</h2>
The source code of this project is available on <a rel="nofollow noopener" target="_blank" href="https://github.com/jkasun/server-static-files-with-express">GitHub</a> as usual. Use this to compare your code if you ever got stuck along the tutorial.
Happy Coding!

Janith Kasun

In this article, we'll be building a simple app to serve static files like HTML files, CSS files and images using Node.js and Express.

Serving Static Files with Node and Express.js

Dunja Spasić

Shell Sort is an advanced sorting algorithm. It's considered to be a generalization of Insertion Sort and works by comparing elements far apart. In this article, we'll be diving into the theory and implementation of Shell Sort.

Shell Sort in Java

Olivera Popović

MySQL is the most widely used RDDBMS in the world. In this article, we'll guide you through the installation process and set up on Windows.

How to Install and Set Up MySQL Server on Windows

Robley Gori

AWS S3 is a great, low-cost service for file storage. In this article, we'll be using Python and Django to upload files to AWS S3.

Uploading Files to AWS S3 with Python and Django

David Landup

REST APIs are the most common form of APIs nowadays. In this article, we'll be building a simple REST API in JavaScript using Node.js and Express.

Building a REST API with Node and Express

Ali Abdelaal

In a data-driven world - optimizing its size is paramount. Autoencoders automatically encode and decode information for ease of transport. In this article, we'll be using Python and Keras to make an autoencoder using deep learning.

Autoencoders for Image Reconstruction in Python and Keras

In computer science and electronics, there are quite a few ways to represent data, often called encoding schemes. Each has its own purpose, advantages, and disadvantages. In this short article we'll take a look at one-hot encoding and see what it is, how it compares to other similar schemes, and its applications.
<h2 id="whatisonehotencoding">What is One-Hot Encoding?</h2>
One-hot encoding is a sparse way of representing data in a binary string in which only a single bit can be 1, while all others are 0. This contrasts from other encoding schemes, like binary and gray code, which allow multiple multiple bits can be 1 or 0, thus allowing for a more dense representation of data.
A few examples of a one-hot encoding might look like this:
<pre><code class="hljs">000010
001000
100000
000100
</code></pre>
This concept can better be understood by comparing the representation of the numbers 0-4 in binary, gray code, and one-hot:
<table class="table table-striped">
 <thead>
 <tr>
 <th>Decimal</th>
 <th>Binary</th>
 <th>Gray code</th>
 <th>One-hot</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>0</td>
 <td>000</td>
 <td>000</td>
 <td>0000000</td>
 </tr>
 <tr>
 <td>1</td>
 <td>001</td>
 <td>001</td>
 <td>0000001</td>
 </tr>
 <tr>
 <td>2</td>
 <td>010</td>
 <td>011</td>
 <td>0000010</td>
 </tr>
 <tr>
 <td>3</td>
 <td>011</td>
 <td>010</td>
 <td>0000100</td>
 </tr>
 <tr>
 <td>4</td>
 <td>100</td>
 <td>110</td>
 <td>0001000</td>
 </tr>
 <tr>
 <td>5</td>
 <td>101</td>
 <td>111</td>
 <td>0010000</td>
 </tr>
 <tr>
 <td>6</td>
 <td>110</td>
 <td>101</td>
 <td>0100000</td>
 </tr>
 <tr>
 <td>7</td>
 <td>111</td>
 <td>100</td>
 <td>1000000</td>
 </tr>
 </tbody>
</table>
Notice how more digits are needed than in the other two representations. Each digit location can only refer to a single number and can't be used to represent any other numbers. Because of this, a one-hot encoding of n digits can only represent n values. Whereas the binary encoding, for example, with n digits can represent 2n values.
<h2 id="applicationsofonehotencoding">Applications of One-Hot Encoding</h2>
So if one-hot encoding has such a strict limit on the amount of data that can be conveyed in a binary string, what practical uses does it actually have? Quite a few important ones, actually. Its importance is explained well by <a rel="nofollow" target="_blank" href="https://en.wikipedia.org/wiki/One-hot">Wikipedia</a>:
<blockquote>
One-hot encoding is often used for indicating the state of a state machine. When using binary or Gray code, a decoder is needed to determine the state. A one-hot state machine, however, does not need a decoder as the state machine is in the nth state if and only if the nth bit is high.
</blockquote>
<h3 id="machinelearning">Machine Learning</h3>
<a rel="nofollow" target="_blank" href="https://en.wikipedia.org/wiki/Artificial_neural_network">Neural networks</a> and <a rel="nofollow" target="_blank" href="https://en.wikipedia.org/wiki/Deep_learning">deep learning</a> have become the fastest growing discipline in the field of computer science, and for good reason. These machine learning methods have provided a solution to historically difficult, or even impossible, problems in computer science. And, maybe surprisingly, one-hot encoding has an important part in it.
Neural networks, and thus deep learning, are inspired by the neural networks that compose our brains. They consist of simple neurons and connections between the neurons. The output from each neuron usually represents a number, which is used throughout the network for computation. While this number can theoretically have any value, it is usually cast to a 1 or 0 in order to represent categorical data.
For example, let's say we have a neural network that can tell us if an input image is of a cat or a dog. Since the neural network only uses numbers, it can't output the words &quot;cat&quot; or &quot;dog&quot;. Instead, it uses one-hot encoding to represent is prediction:
<img class="img-responsive" src="https://stackabuse.s3.amazonaws.com/media/one-hot-encoding-1.png">
In this example, the output of the top neuron in the image above might represent the prediction of &quot;cat&quot; and the bottom neuron's output might represent the prediction of &quot;dog&quot;. Whichever output is a 1 would indicate the prediction.
<h3 id="electronics">Electronics</h3>
In electronics, many of the times one-hot encoding is used for very similar scenarios as in machine learning. An analog or digital output line can represent a value using voltage.
For example, logic gate circuits are much like neural networks in that they are composed of a large network of interconnected &quot;nodes&quot;, with digital inputs creating some corresponding digital output. While binary representation is common in electronics, one-hot can be a better alternative to represent a an output state without the need for any decoding.
<img class="img-responsive" src="https://stackabuse.s3.amazonaws.com/media/one-hot-encoding-2.png">

Scott Robinson

One-hot encoding is a sparse way of representing data in a binary string in which only a single bit can be 1, while all others are 0.

One-Hot Encoding

Usman Malik

The seq2seq architecture is a type of many-to-many sequence modeling. In this article, we'll create a machine translation model in Python with Keras.

Python for NLP: Neural Machine Translation with Seq2Seq in Keras

Muhammad Junaid Khalid

The PyAutoGUI library provides cross-platform support for managing mouse and keyboard operations through code to enable automation of tasks.