DEV Community: Nikhil Bhutani

8 ways to Handle State in React

Nikhil Bhutani — Thu, 20 Apr 2023 13:11:31 +0000

Introduction

In this blog we will look into 8 techniques used in React to handle state. I will briefly cover each of the method and list down some examples of when a certain state management method can be used.

1) URL
It is the most visible piece of state we can access. URL should be considered as a record; read from it when necessary and update it when needed. It stores the current app location and certain app settings:

Item we are currently viewing, e.g; record id
Filters
Pagination
Sorting

Having state in the URL helps us to share links to certain parts of our application easily. React Router is an excellent third party library to handle URL state and is widely used in production applications.

2) Web Storage
Some native browser technologies such as:

local storage
cookies
IndexedDB are used to handle application state. These are used to persist state between page reloads. Some of it's usage includes storing shopping cart items, partially completed form data, etc.

3) Local State
When the state is not shared across multiple components and hierarchies, and is used only by one component Local State is the best choice for state management. Just like local variables in a function the state is not accessible outside of this component and is deleted when the component is destroyed.
Useful for storing:

Checkbox status
Toggles
Form data and validation status

4) Lifted State
In case we are dealing with multiple similar components that need access to same data, we should consider lifting the state to a common parent and passing state down via props

Use case:-
We have two child components who need to access the same data, then instead of storing the state on them individually we can lift the state to a common parent component that handles it and pass it down via props.

5)Derived State
We can even derive state from existing state instead of creating a new state altogether. This approach has two advantages:

Created in sync state which is bug-free.
Simplifies code for better understading of the state flow.

Examples:-

Instead of storing a separate state of the count of items for an array, we could simply derive it by using .length array method. No need to update a new state when array contents change.
Validate a form: We don't need a separate state to store the from validation status, we can simply derive that from the form.

6) Context
Context is used for global state management. The advantage of using context is that it avoids prop drilling.

Best examples of using Context are:-

User login information.
Role related information.
Global app settings such as Themes.
Internationalization settings.

7) Refs
React does support state management via Refs. Some cases where Refs might be helpful are:

DOM Reference: Uncontrolled form inputs whose values are not controlled by React.
- State that is not displayed: Component is mounted, Hold Timer, Previous state values for features like undo and redo.

8) Third Party Libraries
Now, to handle state via above method is a great starting point, but as the application grows in size we need to have some state management mechanism in place. That's when Third Party libraries which are built over the above state handling approaches, simplify state management for us.

Some of the famous libraries that are currently used in the market are:-

For managing state that involves handling data from API calls there are other great libraries:-

React-Query
SWR
Apollo - For GraphQL -Relay For GraphQL

Conclusion

I hope you found this compilation of some of the best ways to handle state management in React helpful. Adding all the useful resources related to the above state management techniques in the References below, so do check them out. Feel free to reach out in the comments section.

Happy Coding!

References

How to create a PostgreSQL Database on Azure

Nikhil Bhutani — Tue, 18 Apr 2023 10:57:14 +0000

Introduction

In this blog we will learn how to create your own PostgreSQL database on the Azure. We will then generate a SQL script that creates a table on our Azure PostgreSQL Database with dummy data inserted into it.

Pre-requisite

An Azure Account

Pro Tip: If you are a student in college, you can easily get Azure Student Subscription for free without a credit card. With this subscription you get $100 free credit for 12 months as well. Signup here:- https://azure.microsoft.com/en-in/free/students/

Getting started

To follow along this tutorial I hope you have some basic knowledge of what a database is? what is PostgreSQL?, if not do check these resources:

Create the database on Azure

Go to Azure Portal and sign-in using your account.
Once you are on the portal search for a big plus icon that says Create a resource
Search for "postgresql" in the search box and select Create on the Azure Database for PostgreSQL Flexible Server as seen below.
A page will open asking for Basic details for this flexible server. First one being the Project details.
- Select your Subscription
- Select a Resource group or create a new one like below.
Next, we enter the server details. Select the options as seen below. Server name does not have to be the same.
Skip the High Availablity section and move onto Authentication. Select PostgreSQL authentication only and enter the Admin username, password you like. Click on Next: Networking > and move to the next configuration.
In the Networking tab we will allow our computer/laptop to be able to connect to the Azure database. For this we will click on the 'Add current client IP address (YOUR IP ADDRESS) in Firewall Rules section.
Lastly, we will click on Review + Create button and review out details and then click Create button as a final step.
You should see your deployment in progress. It will take some time to create the resource and when it does you should see a screen like below with your connection details.

Connecting to the database
To connect to your newly created database we will head over to our created resource.

To connect to the database we have two options:

pgAdmin
psql cli

With the given server name and credentials you can connect to it using either of the two options but I will be using psql in powershell.

Open a powershell/commmand prompt and type the below command by replacing the connection details to your server details:
psql --host=<servername> --port=<port> --username=<user> --dbname=<dbname>

SUCCESS! You should see the connection was sucessfull and the psql prompt pointing to postgres database.

Creating a table with dummy data
We will create a SQL script that will create a table named Car and Insert into this table 1000 records.

We can generate this SQL script by simply heading over to Mockaroo

Mockaroo is the best website to generate mock data for your projects. It's highly customizable in terms of the types of fields you want in your data, precision of the data, leaving a certain percentage of data blank and so on. You can just download the mock data in a number of fromats available.

Add in the fields as seen in the below image.
Select the Format as SQL and give the table a name.
Check the option which says inlcude CREATE TABLE and click Download Data.

Open the downloaded car.sql script in an editor.
You will mainly see two SQL commands.

CREATE - This will create a table in our database with the given columns.
INSERT INTO - This will insert data into our table 'Car'.

I will modify this script a bit and add some constraints such as all columns to be NOT NULL and id column should be a PRIMARY KEY. The resultant script should look like this:

Running the script on our Azure PostgreSQL database
Make sure you are connected to the database as we saw in the section above.
In the PLSQL CLI we will type the following command to run the script.
\i 'D:/Tutorial/car.sql'

\i - It means we want to execute the commands from the file path mentioned after this.

After hitting the above command with the correct path to car.sql script you should see multiple INSERT 0 1 in the terminal which means that the records are being inserted into the table. It should take some time as there 1000 records.

Final Result
You should see the data has been inserted into the database by executing the following SQL:
SELECT * FROM car;

IMPORTANT: After you are done with trying out your database make sure to clean up the resource on Azure so that you don't incur charges on your credit card.

Conclusion

We have now created our own PostgreSQL Database hosted on Azure without the need to configuring a server to host the same. We also created a table and inserted dummy data into it using Mockaroo.

I hope you found this blog helpful and feel free to reach out in the comments section for any doubts or suggestions. Thank you for reading.

Happy Coding!

Cover Image Credits: Image by fullvector on Freepik

References

Web Development Beginner's Learning Roadmap- API Development

Nikhil Bhutani — Sun, 16 Apr 2023 04:00:00 +0000

In this blog we will cover technologies a beginner web developer can learn on the API development and also explore some frameworks that support rapid extensive backend development support with feature rich API's. This is part-2 of two part blog, the first blog covered the frontend. If you missed that feel free to check it out- Web Development Beginner's Learning Roadmap- Frontend

Getting started

Backend development is quite different than frontend, while writing code on the client-side we do get instant feedback as to where we are headed with the results in front of our eyes, but developing backend requires some basic understanding of software architecture.

UI of your application gets all its data such user information, login details, application data, etc from a database which stores all this information in various tables. But, the data is not directly fetched from the databse, we need a middleware called API or Application Programming Interface.

API's connect to the database and abstract away the business logic to perform CRUD operations on it. API gets a request of the type GET/PUT/POST/DELETE (which are HTTP verbs for Fetch/Update/Create/Delete) and respond back with the data.

Languages used for backend development

There are many popular languages out there which are used for API development. As a beginner if you have some experience with frontend development then I am guessing you are already familiar with JavaScript already.

JavaScipt is a versatile language, and apart from being used on the frontend it can also be used to write API's on the backend.

Python is yet another language which has become popular for API development. It has some great backend frameworks which can be used to build production ready APIs.

C# was designed by Microsoft. It is high-level programming language and it supports a wide arary of development tools. The .NET framework using C# can be used to build anything ranging from UI, API, IoT apps, Windows application, CLIs etc. It is a multipupose language and highly used within banking software applications.

Java is yet another popular language and had the number one spot among the programming langues from 2004 to 2018. The Spring framework developed in Java is quite popular for API dev, Cloud applications etc.

Frameworks

Here is the list of popular API frameworks/libraries which you can learn as a backend web developer:-

Express.js

Express is a Node.js web application framework that provides a host of features for web and mobile applications. For API development it provides a lot of HTTP utility methods and middleware to creat APIs quickly. It is great for beginners with experience in JavaScript and you can write a basic CRUD API in Express in less than 30 mins. I have published 2 blogs on getting started with Express, feel free to check them out:

Learning resources:-

https://expressjs.com/en/starter/installing.html
https://www.youtube.com/watch?v=Oe421EPjeBE (Video Tutorial)

Django

Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. Django REST Framework is a wrapper over default Django Framework, basically used to create APIs of various kinds. It documentation and community support is quite strong. If you are a Python guy then you can surely check it out.

Learning resources:-

https://www.django-rest-framework.org/
https://www.youtube.com/watch?v=F5mRW0jo-U4 (Video Tutorial)

ASP .NET Core

ASP.NET Core is a free, open-source, and cross-platform framework for building cloud-based applications, such as web apps, IoT apps, and mobile backends. It is designed to run on the cloud as well as on-premises. It supports creating web APIs using controllers or using minimal APIs. Controllers in a web API are classes that derive from ControllerBase. All you need it Visual Studio as .NET Core comes preinstalled with it. This framewok is usually preferred by veterans already having experience with C# and may not be a good starting choice for a beginner backend web developer.

Learning resources:-

Spring

The Spring Framework is an application framework and inversion of control container for the Java platform. The framework's core features can be used by any Java application, but there are extensions for building web applications on top of the Java EE platform. Spring Boot separates the boiler-plate code and configuration settings in an application to highlight focus on REST API development. All the JAVA folks will tend to love Spring Boot as it is easy to implement APIs in.

Learning resources:-

https://spring.io/guides/gs/rest-service
https://www.youtube.com/watch?v=9SGDpanrc8U (Video Tutorial)

Conclusion

I hope you found this blog informative. The resources mentioned above are sufficient enough for you to get started in API development, but you can explore more. Thank you for reading.

Happy Coding!

References

Web Development Beginner's Learning Roadmap- Frontend

Nikhil Bhutani — Thu, 13 Apr 2023 09:21:47 +0000

Web Development is probably the easiest tech stack to start learning as a beginner. When I was in college web development technologies instantly caught my eyes, and I started exploring it right away. The best part about being a web developer is that you get to see your code paint a magic canvas on the screen, which makes you proud of the work done. In this blog I will guide you through what you should learn when starting out as a web developer and all the related technologies you can explore as you become a pro in this journey.

These are my personal opinions and suggestions and can be different for you, the technlogies are limitless and you are free to explore anything that intrigues you.

Getting started

Web devlopment can be broadly classified into three categories:-

Frontend
Backend
Operations(More like DevOps)

All three of them involve creating, building, testing and maintaining of websites and applications that serve on the internet. In this blog we will explore the first cateogry- Frontend

But let's take a pause on that for a minute and let me tell what you should learn before you start to learn any new tech stack.

Git(Version Control)

Version control facilitates coordination, sharing, and collaboration across the entire software development team. It enables teams to work in distributed and asynchronous environments, manage changes and versions of code and artifacts, and resolve merge conflicts and related anomalies.
Reference

Every developer should know how to work with Git(a Version Control Software) and it's terminologies such as push, pull, commit, stage etc.

It is a strong recommendation to create a git repository on GitHub for all of your future projects as it helps you display you work to the world and adds credibility to what you do.

Learning Resources:-

Clean coding principles

Writing clean code is something you learn over time as a developer but atleast we can keep some points in mind while writing code which helps us write better quality code, increase maintainability, makes degugging easy and following standard coding patterns. You can learn more about it in this article

Frontend

To start out you will probably want to learn the technologies that
are forward facing or in other words websites and appliation which we see and interact with as a user.

You should start out by learning the following things in the order below but can shuffle if you like.

HTML

HTML is the language of websites and is used designing documents to be displayed in a web browser. It is fun to learn HTML and invloves knowing a bunch of tags and what their purpose is. It's like formatting a word document using different tools such as bold, list items, paragraphs etc.
Learning Resources:-
One of the best resources out there to learn HTML is W3schools. You would come across this site a lot in your web development journey and is known to be the dictionay of it.

CSS

CSS stands for Cascading-Style-Sheets and it is what makes your websites look and feel amazing. It is used to style your website components such as buttons, input box, logo or anything you see on the website. It is also used to create animations and effects along with making your sites responsive for screens such as mobile devices and tablets.
Learning Resources:-

W3schools- CSS Tutorials
CSS Tricks - You can find mind blowing css designs here to get some insipiration and also use them in your websites.

JavaScript

JavaScript or JS is a programming language that is used to handle webpage behaviour and interactions that user make such as clicking a button, scrolling, mouse events and much more. It is not only used on the frontend but also used to build backend and API development using Node.js. There is a lot of community support for JavaScript and many third-party libraries developed over it to help you speed up your Web development. It is practically the core and heart of you web application.
Learning Resources:-

Frontend Libraries/Frameworks

After you have mastered HTML, CSS and JavaScript you can pretty much build any web application with them. All the websites you see on the internet use the same HTML, CSS and JavaScript, but there are some frameworks which have now become a must learn when starting out as a frontend developer. These frameworks help you speed up your application development, provide a vast array of tools and come with great community support and documentations.

Let's explore some of the frameworks which are popular and you should learn:-

Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Reference

It has a suite of components used in a website pre-built for you which is responsive out of the box and can be customized to your website's style. It provides support for flexbox and grid based system as well.

There are other CSS frameworks out there which are also preferred and becoming popular such as TailwindCSS. You can surely check them out as well.

React

When it comes to front-end development, you must have heard about React. It is one of the most popular front-end library out there built by Facebook in 2013. It is a JavaScipt library used to front-end in a component based architechture. Every button, text, image, sections, forms you see on a site can be a component. These components have a state which can change based on certain events be it user driven or code behaviour.

React is built on the same principle keeping the component based architechture in mind which is great for testing and reusability in any appliation. There are many high paying jobs for React developers and is must learn library for every front-end developer.
Learning Resources:-
React Documentation - Probably the best resouce out there to learn React
There are many great YouTube vidoes on it as well.

Apart from React there are other great front-end frameworks such as Angular and Vue.js. Angular is different than React as it is a full fledged framework while React is just a JavaScript library.

Final Words

I hope you found this blog helpful in starting out your web development journey as a front-end developer. You are not limited to the technologies mentioned in this blog can can discover many more but I hope this gives you a headstart.

If you have some suggestions or doubts feel free to drop a comment below.

Happy Coding!

References

Exception Handling and Logging Errors in REST API using Javascript & Express

Nikhil Bhutani — Sat, 01 Apr 2023 04:00:00 +0000

Introduction

In this blog we are going to add exception handling to JavaScript REST API by coding our own Exception Middleware. We will also learn how to add multiple exception handlers to our API and build a reusable error module that can be handy to when having multiple repositories in an API. Lastly, we will also see how we can add error logging capabilities to our code which logs errors to a file.

Setup

In this blog I will not be covering how to build a REST API in JavaScript, and I will use the exisiting GroceryAPI that I built in my other blog. It covers all the coding required to build an API from scratch in JavaScript using the Express framework, so do check it out:- Beginner's Guide to REST API in JavaScript using Express

The completed code for this tutorial can be found in the following GitHub Repo in the exception-handling branch.

Code

We'll start by creating a reusable error module.

Create a file named errorHelper.js in the /helpers directory

We will write our first helper method errorBuilder inside of the errorHelpers object which we will export.
errorBuilder will return a custom object to client with status 500 and statusText as "Internal Server Error", the rest of the object will contain tht error message, error number and error syscall. This errorBuilder will accept an error object. We can then use this errorBuilder to build error messages for logging errors to console, logging errors to file etc.



let errorHelpers = {
  errorBuilder: (err) => {
    return {
      status: 500,
      statusText: "Internal Server Error",
      message: err.message,
      error: {
        errno: err.errno,
        call: err.syscall,
        code: "INTERNAL_SERVER_ERROR",
        message: err.message,
      },
    };
  },
};

Now, we create a logErrorsToConsole helper function inside errorHelpers which will use errorBuilder and print the error to the server console whenever it occurs.

In logErrorsToConsole function we simple do a console.error of the error by passing our err object to previously created errorBuilder we simply add * to distinguish the error in the console and then we use the next(err); to move onto the next middleware available.

Now let's configure our middleware in index.js

Simply import the error helper by adding:
let errorHelper = require("./helpers/errorHelpers");

Then, we will add the middleware just after the router configuration.



// Configure router so all routes are prefixed with /api/
app.use("/api/", router);

// Configure exception logger to console
app.use(errorHelper.logErrorsToConsole);

Now to see our error logger middleware work we will change the spelling of the gorceries.json file in the file name variable in groceryRepo.js by removing the s from the const FILE_NAME = "./assets/grocerie.json";

Finally, when we hit the GET request to fetch all groceries we should see the error logged in our terminal like below:

Adding Error Logging to a log file
So far we setup our own middleware that logs error to console whenever an Internal Server Error occurs.
What if we want the error logged out in a log file that stores all logs of all the errors occured for fututre refernce?

We will achieve this in three steps:
1) Create a logRepo.js file to handle the writes to a log file.
2) Add a helper method to write errors to the log file using the logRepo.
3) Add the helper method as a middleware to our index.js file.

Let's get started!

First step is to create a logRepo.js file in the /repo directory. The code for this will be very similar to the calls to get, update, delete and write data to our grocery store repo.

We create a write function which takes data, req and res as the parameters. On line 7 we create a toWrite variable which will store the information to be logged.

Notice that we have assigned a file to the FILE_NAME field on line 3, make sure to create an empty log.txt file in a logs folder.

We just append all the information that we need to see in our log file such as the Date and Time the error occured, Exception Info and some formatting of the log by appending * at the start and end of the message.

After that we simply use the fs package to write the exception message to the log file on our local file system.

Next, we configure a helper method to log errors to log file in the errorHelpers.js file.

We add the logErrorsToFile method object just after logErrorsToConsole method. The implementation of which is pretty straight-forward. We build the errorObject using our errorBuilder and assign some extra properties to it from the request object. Then we call in the logRepo.write and pass in this errorObject.

NOTE: Don't forget to import the logRepo in errorHelpers.js file at the top.



logErrorsToFile: (err, req, res, next) => {
    let errorObject = errorHelpers.errorBuilder(err);
    errorObject.requestInfo = {
      hostName: req.hostName,
      path: req.path,
      app: req.app,
    };
    logRepo.write(
      errorObject,
      (data) => {
        console.log(data);
      },
      (err) => console.error(err)
    );
    next(err);
  }

Lastly, one final step is to add our middleware to handle this logging functionality in index.js file just after our logErrorsToConsole middleware.



// Configure router so all routes are prefixed with /api/
app.use("/api/", router);

// Configure exception logger to console
app.use(errorHelper.logErrorsToConsole);

// Configure exception logger to console
app.use(errorHelper.logErrorsToFile);

Testing logging to text file
Similar to how we tested our logErrorsToConsole, just remove the appending 's' from the file name in groceryRepo.js and send a GET request to http://localhost:5000/api/

You should see the error logged to console as well as the exception logged to the log.txt file as seen below with Date and Time.

If you have any doubts you can ask in the comments section below, I will be happy to help.

Happy Coding!

References

https://expressjs.com/en/guide/using-middleware.html
https://expressjs.com/en/guide/error-handling.html

Beginner's Guide to REST API in JavaScript using Express

Nikhil Bhutani — Wed, 22 Mar 2023 11:40:26 +0000

Introduction

API is the most used keyword in the IT world, and I would be surprised if you haven't heard of it or used it ever as a coder. Application Programming Interface is a concept that applies everywhere from command-line tools to enterprise code, microservices, and cloud-native architectures. An API is an interface that software developers use to programmatically interact with software components or resources outside of their own code.

In this blog we'll learn to code our own API from scratch in JavaScript using Express. This will be a step-by-step tutorial so rest assured nothing will be skipped.

Project GitHub Repo

Pre-requisites

We will require the folloiwng things before getting started:

NodeJS
Node. js is an open-source, cross-platform JavaScript runtime environment and library for running web applications outside the client's browser. With NodeJS you get npm which is the package manager which we will use to install express and other packages as required.
Download Link

Code Editor
I will be using VS Code as my preferred editor but you can use any code editor of your choice.
Download Link

Rest Client
We will need a REST client to test our API calls. I will be using Insomnia, but you can use any other client as well. Postman is also popular among them.
Download Link- Insomnia
Download Link- Postman

Before we start I would like to introduce Express. It is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy. I'll leave a referrence to its documentation below incase you want to check it out.

Project Setup

API Description: We will be building an API for a Grocery Store. It will help us fetch all gorcery items data, get single grocery item, add an item to the list of groceries available in the store, update any item, such as price or quantity and also delete the item from the store.

Firstly, we'll start by creating an empty directory where our project will live. Next open the terminal on the project's root and type in the following command(I am assuming you have nodeJs installed by this point): npm init

This command will initailize our poject with a pacakage.json file which will have all our project pacakages, scripts etc.

After you hit enter you will be asked some questions, most of them need to be left on default, but you can add to some fields as seen below.

I am using VS Code's inbuilt terminal.

After the package.json file is created we will install some packages using the commands below.

npm install express: Express pacakge which we will use to develop API's quickly.

npm install nodemon: Nodemon will save us some time by compiling the code every time we hit save and publish the chages automatically, instead of re-running the API everytime we make some change.

With these two commands completed we shall see our packages with their version in the package.json file in the dependecies section.

Generating Mock data for our API

To work with CRUD functionalities we will need mock data for our Grocery Store. We can generate mock data from Mockaroo. It generates mock data for all types of fields and number of records. You can generate the dummy data yourself by modifying or copying the fields like the image below and saving it under an assets directory in the project's root directory, or you can find it in the code's git repository under assets/groceries.json.

Let's code!

Now that we have all the setup in place, we can gets our hands dirty with some JavaScript coding.

Create a file called index.js in the root of your project and add in the code as seen below.

Code explanation
The first line imports express and the second line will initialize the express server app.

Next, we use the express.Router() to configure our router which will hold our API endpoints and configuration to each call. On Line 11, we are configuring our router to prefix all routes with a /api/ so that all API endpoints will have a /api/ before them.

Lastly, we setup the server to listen on port 5000.

We'll now add code for our CRUD functionality.

GET/ Read All Items from Grocery Store

Create a directory called repo under the root of the project and a file called groceryRepo.js under it.
Your folder structure should look something like this:

The gorceryRepo.js will contain the logic to get/update/delete the data from filesystem(in real world apps it will be a database) and we will use the fs package to work with the filesystem. Our first call will be to get the list of grocery items.

Code explanation
We are importing the fs package on line 1. We create a variable called FILE_NAME which points to the groceries.js file containing our mock JSON data.
The groceryRepo object contains a function object called get which accepts two parameters resolve and reject. These two will handle the data fetch success and failure conditions and return either the data or error.

On line 7, we read the file by passing the FILE_NAME and an arrow function as a second paramter, which inturn takes two parameters err and data. If there occurs an error in fetching from the file we call the reject(err) function passing the error occured to it, else we return the JSON data by parsing it and sending it to resolve(JSON.parse(data))

Next, we make changes to index.js file.

Code explanation
We use the router.get() function and specify the endpoint at which we would get the list of grocery items returned to us. The second parameter is again an arrow function which has three parameters:
req: It will contain the request object that the client send.
res: The response we want to send back to the client i.e; data requested.
next: The next method will chain the function call to a middleware which will handle errors. (I will leave this for now in this blog)

We use the res.status().json() to send the result back to client with a 200 status and the JSON data and other info we want the client to know. To know more about what status codes are and how many are there you can follow this resource here. A status of 200 means the request was responded with success "OK" and all is good.

Next, to test out our first API we need to add a script in the package.json file under the scripts.

The start script will run nodemon and run our express app
To run this script, simply type npm start in the command line. You app should now be runnning on http://localhost:5000/api/

Let's test our GET API in Insomnia:

SUCCESS! You just created an API that fetches data.

GET By ID/ Read one single Item from Grocery Store

Now that you can fetch all the items, we can write a code to get a single item from the list of items by its id.
To do that the code will not change much as we saw above, only thing extra will be to get an id from the user in request from client.

Code changes in index.js

Code changes in groceryRepo.js

Code explanation
The code is almost similar to GET All, the things that need explanation are the endpoint /:id and req.params.id.

The endpoint here is /:id which will be read by API as the grocery id like http://localhost:5000/api/2.
The req.params.id is the grocery id used to pass to the groceryRepo.getById call which we receive from the request parameters above.

In groceryRepo.js we define another function getById. The code remains same as get function only change is the return data. We use the array.find() method to find the item by matching id from the list of groceries and return the match.

POST/ Add item to the list

Before we add codes for POST/PUT add this line just after line number 7 in index.js. It will allow us to send JSON data from Client to API

// Use the express router object
let router = express.Router();

// Middle ware to support JSON data passing to API
app.use(express.json());

Performing an insert involves the following steps on the groceryRepo.js side:
1) First read all the data array.
2) Push the newData to that array.
3) Write the new items list back to the file using fs.writeFile.

Addition in the index.js file are minimal

The call to insert from groceryRepo on line 58 accepts the item to be added to the database. The item to be added will be passed from the client in the body of the request, hence, we use req.body.

The status that we return in our response is 201 instead of 200, sice we are inserting an item and 201 is the appropriate status to send, but you can also send 200 and not face any error.

Once you hit the API with the body as seen above you get a 201 Created response, which means the item was added successfully. We can then check if it was really added by calling either the GET All call and scrolling to the bottom of the result or just call our GET By ID call with the ID 51.

PUT/ Update an existing item

To update an exisiting item we need the id and the object with updated values. The code needed in index.js will be similar to getById, only change would be to call the groceryRepo.update with req.body and req.params.id

groceryRepo.js

Code Explanation

The code is pretty similar to the other operations we did. We need to understand line 48.
items = items.map((p) => (p.id == id ? { ...p, ...newData } : p));

I am using array map() function here to update the item from the array of items. map() performs a condition check on each element in the array. We check if the id passed as request params match the item in the grocery list, if it is true then we are replacing that item with the updated newData. We are using Object destructuring to replace the existing object with newData. You can read more about object destructuring from the link in references at the end of this blog.

DELETE an item from the grocery list

The code for delete is also similar to the update code and I am confident enough that by now you would be able to code it by yourself, but I am adding the code for both index.js and groceryRepo.js below.

Code explanation

We use the HTTP Delete verb to delete an item from the DB. In our case to achieve the same on a file system I am using the array.filter() function. It returns an array that match the given condition. In our case I wrote the condition to check if the requested id does not match the id in the array. If it does then do not include that in the resultant array.

Voila! You just created your own REST API that performs CRUD operations in JavaScript.

Here is the Github repo of the project: Project Repo

Thank you for reading this detailed blog. Happy Coding!💻

References

What is an API?
Express documentation
HTTP Status codes
Object Destructuring
JavaScript's map() and filter()

How to use Ubuntu on Windows without any setup using Docker

Nikhil Bhutani — Thu, 16 Mar 2023 11:04:23 +0000

Docker has revolutionized the way developers build, ship, and run applications. It's an open-source platform that provides a containerization solution, enabling developers to create portable and efficient environments for their applications to run on any system, regardless of the underlying infrastructure. In this blog we will learn how to run Ubuntu on Windows.

Scenario

Let's say you are new to Linux and want to try it out or follow some tutorial to learn some commands on CLI, you will have to install Ubuntu on a separate machine, dual boot your machine with Ubuntu or use WSL (Windows Subsytem for Linux). All options are valid but require a lot of setup and configuration to make it work(WSL is still easy to install and use as compared to others). To solve this problem we can use Ubuntu as a container using Docker. We don't need much setup or the know-how of installation to run Ubuntu on Windows using Docker.

Pre-requisites

Before we get started, You will need to make sure that you have Docker installed on your Windows machine. You can download Docker from the official website, https://www.docker.com/, and follow the installation instructions.

Once, it's installed, you need to launch the Docker Desktop application from the system tray.

Get Ubuntu Image

We need to get the ubuntu image from docker hub on our local machine. To do this you need to open Powershell/Terminal and type the following command:

docker pull ubuntu

It will take some time based on your connection speed.

Run Ubuntu as a container

Once the image is pulled you can check it by using the command docker images which will list all the images available on your machine. You can also check the same on Docker Desktop.

Now we need run this Ubuntu image as a container. For this we will type in the following command:

docker run -t -d --name myubuntu ubuntu

-t - Tells the container to run in a TTY mode. Reference
-d - Specifies the image to run in a detached mode.
--name - We specify the name of the conatiner we want, which can be anything.
And, lastly the image name, which is ubuntu.

After this command is executed, it will return the container ID, which tells us that the container is up and running successfully. You can verify the same by typing docker ps

Linux bash in action

Finally to work with the Linux CLI, we type in the following command:

docker exec -it myubuntu bash

-it - Will open an interative bash terminal

NOTE: The linux will be minified version and thus you will need to install the packages and dependencies you require using apt install <pacakage-name>.

Mission acomplished! We can now play around with linux and do a lot of cool stuff with it. For beginners you can learn basic navigation commands, admin tasks such as newtwork administartion, securing linux servers, user and groups managements, etc.

Happy Coding!

References

Docker Documentation