Getting started with Node.js API
Tags: node, javascript, beginners
Published: 2021-09-02 20:46:25

<h2 class="code-line" data-line-start=0 data-line-end=1 ><a id="Nodejs_API_development_powered_by_Express_0"></a>Node.js API development powered by Express</h2>
<h5 class="code-line" data-line-start=2 data-line-end=3 ><a id="Note_this_post_is_not_recomended_for_SSR_or_SR_developers_due_to_its_simplicity_2"></a>Note: this post is not recomended for SSR or SR developers due to its simplicity.</h5>
<h2 class="code-line" data-line-start=4 data-line-end=5 ><a id="Lets_start_with_a_brief_conceptual_review__4"></a>Let’s start with a brief conceptual review 💪</h2>
<p class="has-line-data" data-line-start="6" data-line-end="8">First of all let’s talk a little bit about <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">client-server architecture</a>. This is a strongly used model to define a way to communicate one or more parts that request some services (clients) and one or more service providers (servers). First of them could be a website or in fact a mobile application, second of them could be a SOAP webservice, Rest API, among others.<br>
We are going to explain one specifical server service called <a href="(https://en.wikipedia.org/wiki/Representational_state_transfer)">Rest API</a>, in this opportunity applied with <a href="https://nodejs.org/en/about/">Node.js</a></p>
<h2 class="code-line" data-line-start=9 data-line-end=10 ><a id="Express_at_a_glance__9"></a>Express at a glance 👀</h2>
<p class="has-line-data" data-line-start="10" data-line-end="11">This amazing framework will help you build a robust Node.js Rest API. It’s important to know that there are other options to take into account like <a href="https://sailsjs.com/">Sails</a>, <a href="https://www.meteor.com/">Meteor</a>, <a href="https://hapi.dev/">Happi</a>, among others. In this case we will use Express which is the most used one but it doesn’t limit you to use other one. You can read the whole Express documentation <a href="http://expressjs.com/">here</a></p>
<h3 class="code-line" data-line-start=12 data-line-end=13 ><a id="Requirements__12"></a>Requirements 🛠</h3>
<ul>
<li class="has-line-data" data-line-start="14" data-line-end="15"><a href="https://nodejs.org/en/download/">Node.js</a>.</li>
<li class="has-line-data" data-line-start="15" data-line-end="17"><a href="https://www.npmjs.com/package/nodemon">Nodemon</a> (Optional), used to reload the Rest API when a change is introduced on your code. You can install it with npm globally: <code>npm install -g nodemon</code>, also you can use it with <a href="https://docs.npmjs.com/cli/v7/commands/npx">npx</a>.</li>
</ul>
<h3 class="code-line" data-line-start=17 data-line-end=18 ><a id="Installation__17"></a>Installation ⚙️</h3>
<p class="has-line-data" data-line-start="18" data-line-end="19">Once the repository is cloned you should install npm packages to be able to run it. To achieve this, just open a terminal on root directory and run the following command:</p>
<pre><code class="has-line-data" data-line-start="20" data-line-end="22" class="language-sh">    npm install
</code></pre>
<h2 class="code-line" data-line-start=23 data-line-end=24 ><a id="Lets_start_with_some_code__23"></a>Let’s start with some code 💻</h2>
<p class="has-line-data" data-line-start="24" data-line-end="25">First of all, I will present the folder structure I chose. That’s so simply and I didn’t include some concepts like services or database acceses.</p>
<pre><code class="has-line-data" data-line-start="26" data-line-end="43">.
├── .env
├── .eslintrc.json
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
└── src
    ├── common
    │   └── error.js
    ├── index.js
    ├── middlewares
    │   └── errors.js
    └── routes
        ├── index.js
        └── public.js
</code></pre>
<ul>
<li class="has-line-data" data-line-start="44" data-line-end="45"><code>.env</code> file contains environment variables and you must add this file because it won’t be pushed due to <code>.gitigonore</code> file. We will use <code>API_PORT</code> variable, then you need to add it just like <code>API_PORT=20000</code> where <code>20000</code> is your desired port.</li>
<li class="has-line-data" data-line-start="45" data-line-end="46"><code>.eslintrc.json</code> is used to follow some basic coding rules. You can use it or just ignore it.</li>
<li class="has-line-data" data-line-start="46" data-line-end="47"><code>.gitignore</code> to defined everything you don’t want to push to git repository. Here is so import to add node_modules.</li>
<li class="has-line-data" data-line-start="47" data-line-end="48"><code>README.md</code> just to show some information about the project.</li>
<li class="has-line-data" data-line-start="48" data-line-end="49"><code>package-lock.json</code> keeps the packages dependencies tree tracked.</li>
<li class="has-line-data" data-line-start="49" data-line-end="50"><code>package.json</code> has every needed dependency for this project.</li>
<li class="has-line-data" data-line-start="50" data-line-end="58"><code>src</code> folder where will leave our core code.
<ul>
<li class="has-line-data" data-line-start="51" data-line-end="52"><code>common</code> folder to define common functions used along whole project.</li>
<li class="has-line-data" data-line-start="52" data-line-end="53"><code>index.js</code> that contains main API configuration.</li>
<li class="has-line-data" data-line-start="53" data-line-end="54"><code>middlewares</code> as the name says, contains every API middleware. In this case we only will use just one for error handling.</li>
<li class="has-line-data" data-line-start="54" data-line-end="58"><code>routes</code> folder where the API routing is defined. Here you can find every endpoint of the API.
<ul>
<li class="has-line-data" data-line-start="55" data-line-end="56"><code>index.js</code> works like a routes mixer, just that.</li>
<li class="has-line-data" data-line-start="56" data-line-end="58"><code>public.js</code> contains the unique endpoint we have.</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 class="code-line" data-line-start=58 data-line-end=59 ><a id="Running__58"></a>Running ▶️</h3>
<p class="has-line-data" data-line-start="59" data-line-end="60">Once npm packages are installed you will be able to run the API. If you have installed <code>nodemon</code> you can run it with:</p>
<pre><code class="has-line-data" data-line-start="61" data-line-end="63" class="language-shell">    nodemon ./src/index.js
</code></pre>
<p class="has-line-data" data-line-start="63" data-line-end="64">Otherwise:</p>
<pre><code class="has-line-data" data-line-start="65" data-line-end="67" class="language-shell">    node ./src/index.js
</code></pre>
<p class="has-line-data" data-line-start="67" data-line-end="68">After this you should show a message like this on your terminal:</p>
<pre><code class="has-line-data" data-line-start="69" data-line-end="71">Node.js API listening on port: {Your port defined on .env}
</code></pre>
<p class="has-line-data" data-line-start="72" data-line-end="73">At this point, you can go to your favourite browser, put <a href="http://localhost">http://localhost</a>:{yourDesiderPort}/api/v1/en and check that the response will be:</p>
<pre><code class="has-line-data" data-line-start="74" data-line-end="79">{
    &quot;success&quot;: true,
    &quot;message&quot;: &quot;Node.js API - Hello world&quot;
}
</code></pre>
<h3 class="code-line" data-line-start=80 data-line-end=81 ><a id="Available_endpoints__80"></a>Available endpoints ✔️</h3>
<ul>
<li class="has-line-data" data-line-start="82" data-line-end="84"><code>GET /api/v1/:lang</code> where lang is related to a language code. The possible values are <code>['en','es', 'it', 'fr']</code>. This endpoint will return a specific message depending on the language code sent.</li>
</ul>
<h3 class="code-line" data-line-start=84 data-line-end=85 ><a id="Github_repository_link_84"></a>Github repository link</h3>
<p class="has-line-data" data-line-start="85" data-line-end="86">You can access to the full code in this <a href="https://github.com/renacargnelutti/conceptual-nodejs-express-api">Github link</a></p>
<h1 class="code-line" data-line-start=87 data-line-end=88 ><a id="Thanks_for_reading__87"></a>Thanks for reading! 🙌</h1>