<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Alexs Ruiz</title>
    <description>The latest articles on DEV Community by Alexs Ruiz (@ralexs0096).</description>
    <link>https://dev.to/ralexs0096</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F863534%2Fba517e4b-a965-4081-929b-60c47dba7af1.jpg</url>
      <title>DEV Community: Alexs Ruiz</title>
      <link>https://dev.to/ralexs0096</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ralexs0096"/>
    <language>en</language>
    <item>
      <title>Nodejs class-based server</title>
      <dc:creator>Alexs Ruiz</dc:creator>
      <pubDate>Wed, 29 Mar 2023 03:58:46 +0000</pubDate>
      <link>https://dev.to/ralexs0096/nodejs-class-based-server-1anb</link>
      <guid>https://dev.to/ralexs0096/nodejs-class-based-server-1anb</guid>
      <description>&lt;p&gt;do you have noted that when you are building a nodejs server (express) and this one starts to grow, the main file (generally index.js) has a bunch of imports, functions, and configurations that make the code not legible or tidy?&lt;/p&gt;

&lt;p&gt;we can take a look at this example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eJ9Qiu4_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvzvgd01jhmn4qy50ixd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eJ9Qiu4_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvzvgd01jhmn4qy50ixd.png" alt="Image description" width="699" height="742"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;a good way to solve this can be to create a server based on classes which will allow us to have a more readable code and will give us the benefit of reusing this server for future projects since it provides us with a structure that will be more readable&lt;/p&gt;

&lt;p&gt;taking this into account we will modify our server&lt;/p&gt;

&lt;p&gt;we'll create a new file called "server.js" and then to create a class:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OnnSEcdj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6k4lctn0zbxvaq76pfq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OnnSEcdj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6k4lctn0zbxvaq76pfq.png" alt="Image description" width="637" height="239"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;let's configure express into our class (also the port)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XE76MX6E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cnx6epfeo0t9g27az9g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XE76MX6E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cnx6epfeo0t9g27az9g.png" alt="Image description" width="703" height="318"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let's remember that everything that is inside the constructor method of our class, will be executed when an instance of the class is created. This is important because we can take advantage of this behavior to create certain methods which are executed once the server instance is created&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IetzU-Mw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo2yi0qc8yfzni3izzz2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IetzU-Mw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo2yi0qc8yfzni3izzz2.png" alt="Image description" width="702" height="379"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We see how in a descriptive way the method encapsulates the logic of what the code inside will do&lt;/p&gt;

&lt;p&gt;methods:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;routes&lt;/li&gt;
&lt;li&gt;getConnection&lt;/li&gt;
&lt;li&gt;middleware&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We are going to execute them when instantiating the class, but the method listen is the one that will allow us to decide from when our server can start listening. Let's see it. First let's make these methods run inside the constructor method:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6FUmRVZA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ukxj9c1fgrzpnb6s5l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6FUmRVZA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ukxj9c1fgrzpnb6s5l.png" alt="Image description" width="702" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;now, let's modify our listen method&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yefjUM8g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spcr5gveljdgmzx34gcm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yefjUM8g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spcr5gveljdgmzx34gcm.png" alt="Image description" width="702" height="404"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We see that the configuration is practically the same since we continue using express, but now making use of "this"&lt;/p&gt;

&lt;p&gt;In this way then we can create our server in a more orderly way separating our server in code blocks&lt;/p&gt;

&lt;p&gt;Let's create now an instance of our server and let's see another important detail. Inside our file "index.js" we are going to require our server class and we are going to create an instance of the class which we will call app, then with app we can execute the listen method and indicate to our server that it can start listening through the port that we have defined&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Oeyr6bH1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcasj9ap7233we3npy2c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Oeyr6bH1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcasj9ap7233we3npy2c.png" alt="Image description" width="703" height="225"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, if we look at our "server.js" file we have made use of "process.env" to require the port because in order to access the environment variables with our server implementation we are going to configure here in the "index.js" file the corresponding module for it&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UgtPp1hr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbpwz9w6gkgwhyk1qjw2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UgtPp1hr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbpwz9w6gkgwhyk1qjw2.png" alt="Image description" width="702" height="254"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We now have a server that provides us with a clearer and easier to follow structure when structuring our server.&lt;/p&gt;

&lt;p&gt;I hope this example has been helpful :)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://gist.github.com/Ralexs0096/fd968e466afebc8fc4be6ac1c43f35a1#file-gistfile1-txt"&gt;Node Server Gist&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>api</category>
    </item>
  </channel>
</rss>
