DEV Community

Cover image for Your First Backend Project
Daniel
Daniel

Posted on

Your First Backend Project

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?πŸ€·β€β™‚οΈπŸ˜‘

Application Programming Interface(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

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

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
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

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
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

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

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!"

Top comments (2)

Collapse
 
acourage369 profile image
BrainyYawson

πŸ‘Š

Collapse
 
10970871 profile image
InspireCode

Kudos