Your First Backend Project
Tags: javascript, webdev, node, api
Published: 2023-12-07 01:04:49

Are you interested in creating a backend for yourself but has no clue as to how to go about it?😌 Worry less😉, in this article I will hold your hands gradually until you finally build **your first backend project**!

## Let's get started!
Many programming languages will definitely  allow you create a backend project(API). Among them are python(Django),java(spring),php(Laravel), etcetera. However they are all spearheaded by NodeJS according to stack overflow survey 2023 https://survey.stackoverflow.co/2023/#most-popular-technologies-webframe, and then it also beginner friendly!🏹.

## Environment setup
Let's setup our environment! NodeJS is simply a JavaScript runtime. Therefore JavaScript must be part of your environment in order to start hacking! This is JavaScript away from the web browser! click on this link to install https://nodejs.org/en your NodeJS. Advisory: select the **_Recommended For most Users_**.

Set? let's get our hands dirty!

## What at all is an API or Backend?🤷‍♂️😑
**A**pplication **P**rogramming **I**nterface(**API**) is a way for two or more computer programs to communicate with each other.🙄    what?
Simply see an **API** as a _**link**_ or **_URL_** to a particular **resources** or **files**, such as a link to someone's google drive!🌍. So an API is another application that has got **resources**, **functions** or **processes** that you access the **"link/url"** in your own application for a soft life!🥱... skipping all the troubles for building those functions or resources from scratch! With this out of the way let's rock and roll!👨‍💻. Let's create our own API to have people access our  resources too!😎😉

## Backend or API setup
now let's rush into our code editor, preferably Vs code, you can download it via this link https://code.visualstudio.com/. Create a directory(folder) for your project and navigate into it and open a terminal from vs code or mac or  **cmd** on windows. Set up your project by the command below:

![Initializing project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo42dcydoxxrzlifrerh.png)

After you have run the command, you will be asked to answer some few questions about your project, such as package-name, version, description, main etc. I entreat you answer only the package name(_inputs must be in lower case and separated by hyphens or under scot_), the rest skip by clicking on the return key or enter key. Your final response will be like this:

![Package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvs5jq71j0ds4w7qq04o.png)

from my result I answered only the **package name** as **my-first-api.** you could see a file has automatically been generated  called **package.json**. No worries this gives a description of the project. 

Create a file called **index.js** since in our project description(**package.json**) file, since our **main** has a **value index.js** , you could change it to your preference!👨‍💻.

## Installing our framework
NodeJS uses a framework called express to help create our **"API"** or our link to the resources, functions, among others. with ease! In order to incorporate in our application we first have to install it. 
![installing Express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ur0lr2imc01y93cb80a.png)
express is now installed in our application, you could verify from the **package.json** file. Don't be bothered about the two add ups in the directory(**package-lock.json and node_modules**) they are necessary for express to run!😉.. 

## Creating a simple API📲
Just as it has been explained that an API is an application that sits somewhere on a server, but can be accessed through a URL to perform certain operations such as: getting resources, creating resources, deleting resources, updating resources, etc. So an API should basically have a **URL** to access it and some **functions** or **resources**(either for cash payments, movie display, or what have you?). 

we will use the ES6 JavaScript syntax for our application, hence we will have to modify our project description, thus **package.json** as follows:

![package.json modification for es6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8rjln6zvr5wul9yweay.png)

so under the **"main":"index.js"** write another key-value 
**"type":"module"**. Now all is set! open the **index.js** file and let's write our API that performs a function. Let's import our express framework so we can use it.

![Import Express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwzh7hc929myw7obxj5y.png) 
We have successfully imported our express framework and instantiated ready to use the various methods/functions on it. 

**Streaming our API to be accessed** 
just as we said, an API should have the potential to be accessed, that means it should have a URL for accessibility! Let's create our local URL. Let's modify our code in the index.js file.

![Listening on a Port Number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6szirnk9qc2fqv0fyg8m.png)

listen is a method on the app for streaming your API live, it takes the port number and a call back function, modify it to your own preference!. You could **run node index.js** in your terminal to _Deploy and host your API locally for live testing_. go to your address bar of your favorite web browser and type "localhost:**port-number**" as used in the code, in this case we used **3001**. You will realize your browser has responded to the URL but has not returned any function or resource, because we have not created any!

Let's create some functions to access on the URL or our API

![Adding endpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si8iwzu03h6kfnkkujvu.png)   
we modified our code to have three different functions accessed from our application(API), all these functions are called on a unique URL(route or endpoint) on the same base URL of our application **localhost:3001**. The first function is called on the base route **"/"**, which implies **'localhost:3001/'** which will return **"This is your home page"** on the browser.
The second is also accessed on the "/About" route, which also implies **'localhost:3001/About'** which will return **"This is your About page"** on the browser.
The third is also accessed on the "/Contact" route, which also implies **'localhost:3001/Contact'** which will also return **"This is your Contact page"** on the browser...

## **TEST YOUR API**
Run node index.js in a terminal, then check in the terminal for the call back function to log **"My Api is running on Port 300"**. access your API on the browser by using your URL's above.

**Congratulations!!!** you have created your first API that has three different endpoints which returns an information! As said above API could allow you to store resources and access resources and many other functionalities!😍...  However this was an article to bring you to the light of API's. **This is part 1.**  "Stay tuned for the upcoming Part 2 as we continue our journey in Backend Development, guiding you until you become a seasoned pro! Keep an eye out! 😁😎 Keep practicing, and Happy Hacking!"