DEV Community: Martins Ngene

Getting Started With Express JS: A Beginner's Guide

Martins Ngene — Wed, 03 Jan 2024 19:59:59 +0000

There are so many JavaScript libraries and frameworks that are used for building APIs and servers but Express JS remains one of the best choices, especially for small or medium-scale projects.

Currently, express has a weekly download of over 11 million as shown in the NPM registry which shows that it's neither dying nor going away anytime soon.

Introduction

That said, we'll look at how to get an express server up and running in the least possible time. we will follow a simple project-based approach for which I have set up a repository which you can find here. I have included all of the code for the mini-project which you can find in this article.

We'll build a simple survey form with HTML and style our form with the CSS which we will serve as a static asset.

Project Setup

To create a new project, open your terminal and create a folder. The name of the folder should be the name you want to give the project. Then cd into the folder and initialize a new npm project (Make sure you have Node js installed). The steps are below:

// Step 1
mkdir myExpressServer

// Step 2
cd myExpressServer

// Step 3
npm init -y

Installing Dependencies

We will need a couple of packages for the project so use the command below to install them:

npm install express nodemon cors dotenv body-parser

Dependencies are libraries that give you some utilities and out-of-the-box tools so you don't have to code everything from scratch.

Open the project in your code editor of choice and you will find a file named package.json it should look like this:

Now to structure our project we have to create some files and folders. Use the command below to create them in your terminal:

// Step 1
mkdir public 

// Step 2
touch .env .gitignore index.js public/index.html public/style.css

Open the .gitignore file and add the following names:

node_modules
.env

This prevents the files from being tracked by Git. The .env file is used to add secrets like passwords and API keys to our project; we don't want that on GitHub for everyone to see. While the 'node_modules' folder will take too much space if tracked by git. It may cause a slowdown when pushing to GitHub and it can be added with just a command when the repository is cloned using npm install

Project Set Up

Now open the index.js file and add this code:

require("dotenv").config();
const cors = require("cors");
const express = require("express");
const app = express();
const PORT = 3001;
const bodyParser = require("body-parser");

The first line configures our app to use the .env file so we can access stored secrets. The second line imports the 'cors' library we installed earlier on. This library enables other applications (like a frontend app) to call the routes that we're about to create. The third line imports our express app and the fourth line instantiates it assigning it to a variable named 'app'. As we are about to see PORT is simply a variable that saves the port number where our app will listen. The last line imports the body-parser package which you'll soon see its use.

For us to use Nodemon (which helps us watch for changes in our app and reloads the app automatically), add this code to the scripts properties in your package.json file:
"start": "nodemon index.js 3001"
The result should be this:

Then call the listening method on your app and pass the PORT variable as a parameter:

app.listen(PORT, () => {
  console.log("Server is running on PORT " + PORT);
});

The console.log is just for us to be sure that the server runs as expected.

Now on our terminal, we can start our project with:

npm run start

Our app will start on the port specified in the package.json file (which is port 3001. You can change this if you prefer another port)

Add this route to check if your setup is working and visit http://localhost:3001/ on a browser:

app.get("/", (req, res)=>{
res.send("Hello World")
})

If you see "Hello World", then you did it correctly. Congratulations! 🥳 You just built an express server.

Delete the code below before you start building your app:

app.get("/", (req, res)=>{
res.send("Hello World")
})

Building the App

So building our app, we will first set our static assets, and then we'll learn how to serve them. Open your index.html file in the public folder and add this code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/public/style.css" />
    <title>Codeland</title>
  </head>
  <body>
    <div class="container">
      <h1>Welcome to Codeland Survey</h1>
      <form action="/survey" method="post">
        <!-- Name -->
        <label>Name:</label>
        <input
          type="text"
          name="name"
          placeholder="Enter your name"
          required /><br />

        <!-- Email -->
        <label>Email:</label>
        <input
          type="text"
          name="email"
          placeholder="Enter your email"
          required /><br />

        <!-- Suggestions -->
        <label>How can we improve our services?</label><br />
        <textarea
          placeholder="Enter your suggestions here"
          name="feedback"
          id=""
          cols="30"
          rows="8"
          required></textarea
        ><br />

        <!-- Submit -->
        <input type="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>

Then open your style.css file from the same folder and add this code:


* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  box-sizing: border-box;
  background-color: #a9d6e5;
}

.container {
  background: transparent;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  padding: 50px 0px;
}

form {
  background-color: #61a5c2;
  width: 50%;
  padding: 20px;
  border-radius: 5px;
}

input,
textarea {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 3px;
  outline: none;
}

h1 {
  margin-bottom: 10px;
  font-size: 40px;
}

label {
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 600px) {
  form {
    width: 80%;
  }
}

Now we have our assets ready and can start building up the routes while learning some introductory concepts in Express JS.

Create a .env file in the root directory of your project and add this code:

// To access my credentials from .env file const originUrl = process.env.ORIGIN_URL;
The next step is to configure our cors.

// To allow only a particular origin to access your server, create an object like the one below
// Then add it to the route you want to allow the origin to access
// or pass as an argument to the cors() if you want that origin to have access to all the routes on your server
let corsOptions = {
  origin: originUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};

// To enable cross-origin resource sharing
app.use(cors());

// Body Parser is required to parse payloads coming from the front end.
// Without this, you'll get an error "TypeError: Cannot read properties of undefined (reading 'name')"
// Because the payload won't be parsed.
app.use(bodyParser.urlencoded({ extended: false }));

What Is CORS And Why Is It Important?

CORS stands for Cross-Origin Resource Sharing. This is a mechanism that web applications use to communicate and share resources. For example, for a frontend application to communicate with our server via network requests, we need to tell our server to receive messages from the frontend app.

This helps guard our server against malicious attacks of hackers sending attacks from another origin or web application. If the origin URL of the hackers' web application is not registered on our server, our server will refuse to communicate with it thus mitigating the attack. To learn more about cors you can see the Mozilla Developers Network - MDN

Serving Static Assets

For us to work with our form, we need to see it in our browser. For this to happen, we have to expose the assets in our application so that they can be accessed from the port. Add the code below after the previous codes:

// Serve static assets from the public folder app.use("/public", express.static(__dirname + "/public"));

The above line of code exposes the assets of our file but we still need to serve our HTML form on a particular route so we can see it.

// Serve a HTML file
const serveHTML = __dirname + "/public/index.html";

app.get("/", (req, res) => {
  res.sendFile(serveHTML);
});

The above code exposes our form on the home route. Visit http://localhost:3001/ on a browser to view it.

You will find that the form has two inputs and one textbox. The next question is how do we get the data from the form on our server when a user fills it?

We will create an endpoint for that. First, notice the opening tag of the form element in your index.html file:

<form action="/survey" method="post">

You can see the action attribute already has an endpoint /survey. Let's create that endpoint. Add the code below after the previous ones:

// This endpoint returns a JSON object containing the details entered in the survey form
app.post("/survey", (req, res) => {
  const details = {
    name: req.body.name,
    email: req.body.email,
    feedback: req.body.feedback,
  };
  res.json(details);
});

No need to freak out. Let me explain 🤓 On the app variable, we call a post method which takes in two parameters. The first is the endpoint, the second is a function to perform the tasks and communication associated with that endpoint.

You can see that we've named the endpoint to which we can send the form's data. Let's see what the function does. In simple terms, the req argument the function accepts stands for request. It's an object that any application allowed by the server uses to talk to a route on the server while the res argument stands for response and it's an object that the server uses to respond to the requests of the application.

That said, we can see that the req object contains another object as its property named body which contains the data of our form. We then save it into an object details and convert that object to JSON format then the server sends it as a response: res.json(details);

Now fill out the form and submit it. You will see that the data is returned as a JSON object.

Some More Details About The `req` object

Let's see some other information contained in the req object aside from the body. Add the code below after the previous codes:

// This endpoint shows some information about the machine of the user making a request to your server
app.get("/info", (req, res) => {
  const response = {
    ip: req.ip,
    path: req.path,
    method: req.method,
    message: "These are some info you can get from the request object",
  };
  res.json(response);
});

Now visit the endpoint: http://localhost:3001/info and you'll get a response of an object with the ip and path of the route you visited. And a message property.

Sending Params To The Server Via Endpoints

Lastly, we will consider how to send parameters from the front end of our application to a route on our server to be used to perform a taste. Paste the code below after the previous codes:

// This endpoint shows how to get the params sent from the client side on the server
// To test the endpoint, visit the route attaching your localhost port.
// Then add a number of day of the week and it gets returned as a JSON object
// E.g localhost:3001/weekdays/1
app.get("/weekdays/:day", (req, res) => {
  const weekDays = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  let day = req.params.day;
  res.json({
    dayOfWeek:
      day > 7
        ? "No such day of the week. There are only 7 days in the week"
        : weekDays[day - 1],
  });
});

In the code above, notice how this endpoint is written:
/weekdays/:day. :day is the variable that is sent to the server as a parameter. : must be included to show it's a parameter the day can be given any name as you see fit.

We can access this parameter on the server from the req object. We find the params object and we get the day variable from it. Now visit this URL to test the endpoint: http://localhost:3001/weekdays/1. Change the number from 1 to 7 to get the names of different days of the week. A number outside this range will give you a message: No such day of the week. There are only 7 days in the week as a safeguard for higher figures.

Conclusion

Get the complete code on Github and don't forget to drop a star to support me 🤓

And there you go. A guide to get you started with Express JS. Of course, there are more things to learn about the framework but the things covered here will give you a great head start to using Express Js for building APIs.

I am Martins Ngene, A Software Developer and Technical Writer. Follow me for more content like this. Let's connect on Linkedin and X - formerly Twitter

If you have any questions or contributions please drop a comment below. Thank you.

How To Organise Your Tailwind CSS Classes in Next js

Martins Ngene — Wed, 09 Aug 2023 10:02:21 +0000

When building projects with Nextjs and Tailwind CSS your components can look rough and untidy 🥲. This is because Tailwind CSS is a utility-first framework whose superpowers include utility classes for almost anything you want to achieve with CSS.

In this article, I'll quickly show you how to set up a simple folder structure to neatly organize your Tailwind CSS classes when working with Nextjs or React 👨‍💻.

I'm Martins Ngene, A Software Engineer 🙂 and my goal is to share as much knowledge as I can to assist you in your daily workflow and learning 🚀.

Setting Up A Tailwind CSS + Nextjs Project

Setting up a Tailwind CSS + Nextjs project has never been easier until Nextjs 13. Follow the installation guide here to get started.

A Component Case Study

Using a NavBar component as a case study below is what it looks like to build a component with Tailwind CSS:

Organising The Tailwind CSS Classes

To organize the classes in the above component, we have to create a file with the extension .module.css. You can name the file whatever you want to but the name should end with a .module.css. This file can be stored in another folder in your project but I'd recommend you store it in the same folder as your component. Below is a picture of the folder structure:

In the above image, you can see that my component is created in a folder called 'navbar' in the index.tsx file and you can see my CSS module file named styles.module.css. In the styles.module.css I'll copy and paste my utility classes as a group and give them a name according to the sections of the component I made before. so my CSS module will look like the picture below:

Notice that the convention is similar to writing regular CSS styles but there are a couple of things to note. First, after declaring your class name, you have to use the @apply before adding your tailwind CSS classes. Also, be sure to end the class names with a semicolon. After adding a semicolon at the end of the classes, you can add regular CSS if you want to and it will work just fine. You can also configure Prettier to automatically add the semicolons for you when you save the file. Checkout the code below to see how to add regular CSS to your tailwind CSS classes:

.container {
  @apply mx-auto lg:mx-0 w-[80%] lg:w-full h-[100vh];
  display: flex;
  align-items: center;
  justify-content: center;
}

Now that we have separated our tailwind classes, we can import our module to our component:

Import the keyword styles from your CSS module (styles.module.css), then add the class names to the respective sections on your component by using the dot notation on the styles object you imported from the CSS module. For example, if you have a class named container in your CSS module, go to the className attribute on the element you want to add it and reference it from the styles object:

<div className={styles.container}> Hello World </div>

If you followed through, you should see your styles apply to your webpage. But if you have any issues or suggestions, drop them in the comment section below, and let's discuss 😎

I hope this article helped you in one way or another. Follow me for more articles on web development and software engineering. I’m also available to connect on LinkedIn.

How To Open A File or Folder ( to GUI ) From The Terminal in Ubuntu

Martins Ngene — Mon, 24 Jul 2023 12:25:54 +0000

While you can use the cd command to navigate into folders and files, sometimes you may want to view the content of a file or a folder graphically without going through the hassle 😤 of using your GUI tools.

Today I will show you how to do that 😎. Hi, I'm Martins Ngene, A Software Engineer. I'm happy to bring you this information 🤓

So, getting started I presume you are at the home directoy in your terminal. Let's say johndoe@johndoe-HP-EliteBook-8460xx:~$ and you want to take a look at the package.json file of a project deeply nested in your projects folder located in your Desktop folder ~/Desktop/projects/blog/package.json

All you need to do is use the xdg-open command which is installed by default in Ubuntu 22.04. You can also use it in Ubuntu 18.04, 20.04 or install it if its not available using
sudo apt-get install xdg-utils. If you encounter any issues maybe you use a different distro, you can refer to this Stack exchange post.

Using the `xdg-open` command

To use the command simply type the code below in your terminal and adjust path url to the file/folder you wish to open:

johndoe@johndoe-HP-EliteBook-8460xx:~$ xdg-open ~/Desktop/projects/blog/package.json

This opens the package.json file in your default text editor.

To open a folder:

johndoe@johndoe-HP-EliteBook-8460xx:~$ xdg-open ~/Desktop/projects/blog

This opens the blog folder with your default file manager.

An Alternative

Maybe for some reason the above tool doesn't work for your distro, you can always use an alternative.

The command below will perform the same operation:

gnome-open ~/Desktop/projects/blog or
gio-open ~/Desktop/projects/blog if you use a more recent
version of ubuntu.

You can download this tool using sudo apt-get install libgnome2-0 in your terminal.

I hope this helps you and feel free to share your thoughts and/or contributions in the comment section 🤗

We can connect on LinkedIn. Follow me here for more contents on proramming and software engineering.

How To Work With The Vi Editor In Linux

Martins Ngene — Wed, 09 Mar 2022 17:58:20 +0000

Most Unix Based Operating Systems has an editor which it is built with. It is very useful for editing text files, building shell scripts and other things which is required of a text editor.

I am Martins Ngene. I am a Software Engineer, Blogger and Technical Writer. I will give you a little content to help you get started using vi editor.

What is vi editor?

This is the default editor that comes with most of the Unix-based operating systems. The name “vi editor” is the short name for visual editor. In 1976 Bill Joy wrote the first code for the vi editor.

The vi editor is a terminal based editor. It is used to manipulate files directory from the command line. This means you do not have to download it as an application.

How To Use The Vi Editor

To use the vi editor, you need to have a Unix-based operating system installed on your machine. You can use git bash if you are on windows or mac.

To Open A File In Vi:

To open a file in vi use the command:
vi filename

To open a file that was open before your computer crashed use the command:
vi -r filename

This is what the editor looks like, it shouldn't be too different on your machine.

Modes In Vi Editor

There are two main modes on the vi editor. The Command mode and the insert mode.

Command Mode:
In this mode every character typed is a command which is executed on the text file being edited. When you open the editor it is in the command mode by default.

Insert Mode:
In this mode, every character entered is added to the text file. To enter this mode click i. Although some commands entered in the command mode can change the editor to insert mode. Use the escape key to leave the insert mode back to the command mode.

Moving Around With Your Cursor

To move your cursor around in vi, use the normal arrow keys to move in their respective directions. To move your cursor with letters, use CTRL + k to move upwards, CTRL + j to move downwards. Change the mode to command mode and use “h” to move left and “l” to go right.

Basic Commands In Vi Editor

Before typing any command on the vi editor, you must first type the “:” colon character. I will list some of the basic commands which you can use to edit a text file on your machine:
Inserting Text Into A File:
Just as we discussed earlier, we can use i to enter the insert mode on the vi editor and this enables us type characters into our text files.

Cutting Text In A Text File:
To cut text in the vi editor use the dd command.

Pasting Text Into A File:
To paste some text or a line of text which you cut from another file or document, use the p command.

Undoing An Action:
To undo an action in the vi editor use the u command. This command reverts your action one step backward.

To Move Cursor To The Beginning of Your Current Line:
To move your cursor to the beginning of the current line you are on, use the number 0

To Exit The Editor:
To exit the vi editor, use the q! command.

To Move Cursor To The End of Your Current Line:
To move your cursor to the end of your current line, use the $ command.

To Save An Edited File:
To save an edited file use the w command.

To Save And Exit A File Simultaneously:
To save and exit a file simultaneously, use the wq command.

There you go, a handful of useful commands to get started using the vi editor. You can check out this link: Corolado State University Helpdocs for more commands in the vi editor.

Follow me for more useful content to give you precise knowledge about various technologies, tools and software in general.

Is Indentation Important ?

Martins Ngene — Wed, 16 Jun 2021 13:54:17 +0000

Some times when we write code we forget to indent our code. Indent simply means to space out the lines and nest the tags and curly braces correctly to show the parent child relationship between the
individuals respectively.

So to answer the question yes! Indentation is important. Some people may not be able to explain why but they'll tell you that it's important though.

I'll attempt to explain why Indentation is very important while writing code and I'll suggest possible solution that can help you indent your code easily.

So one reason I learnt that makes Indentation important is because it improves the readability of your code. If you have worked with a framework like Bootstrap, you'll notice how fast your code grows and if you don't indent your code, it could get a little messy and difficult to debug.

There may also be a case where you put in some code in an inappropriate container. For example, you may paste in the bootstrap template of a component into a div container you created for something else. I personally have had an issue in my bootstrap grid system because of Indentation. It really frustrated me and I spent a lot of time to figure that out. So you see Indentation can also help you eliminate bugs.

One more reason you might want to indent your code is because it helps you write more clean code and improves your collaboration with a team as your colleagues will find it easy to read your code. This is an advantage as it will add value to you as a developer.

A quick solution if you are using Microsoft's Visual Studio Code is to activate the auto indent feature. This indents your code automatically at least to a decent point.

Also try to indent your code as you write them, don't wait till you finish or you may get lazy once the code works.

Okay that's what I have to share and I am grateful for the Grace to share this with you all.

Thank you for reading, please drop a comment about your opinion on this. Don't forget to write more code 😉.

My Journey To Full Stack Web Development From My Side Of The World Teaching Myself.

Martins Ngene — Fri, 04 Jun 2021 23:29:42 +0000

It's been a heck of a journey getting into the Web development Industry.
I'm Martins Ngene from Nigeria. I have come a long way on my journey to become a Full Stack Web Developer. I am going to share with you all what my journey have been like and hopefully we all learn something.

I have been unstable in my learning of Web Development. I started in 2018 but I took off seriously early this year. I have had a bunch of challenges but what some people call luck and I call Divine assistance has been present. From the issue of power supply shortage down to the unavailability of data this has all been a hinderance. My country is still a developing country and its Ecosystem isn't conducive for newbies in Tech or programming. Majority of the people trying to get into the tech industry In Nigeria are either hindered by the high cost of computers and other gadgets, Data unavailability or Power supply shortage.

Sometimes we do pray for help to come from distant lands. But I was Graced to have reached the point where I am now though I just started an Introductory course to computer science as at when I wrote this post but I am sure that against all odds I will achieve my goals someday.

I have acquired some skills such as HTML, CSS, Bootstrap, Git, Netlify, SASS and I still look forward to get my hands dirty with a programming language soon while I practice what I have already learnt.

I am currently looking for any available way for me to get industrial experience and really get to learn more about coding and programming in general.

I lost My Dad in 2014 and My Mum in 2020. I really lost the chance of my parents sending me to college but I believe and I know I'll get a job from Web development and I will finally go to my school of choice and study computer science, even getting a better knowledge of programming.

I see a very bright future in the programming Ecosystem and I believe that someday I will learn enough to fulfill my dreams and also to reduce the stress for people who are interested in Programming by helping them in any possible way.

Since I started this journey, I have learnt to persist and not to give up. I have also learnt how important it is for you to be diligent and consistent in whatever I do.

Finally I say a 'Big Thanks' to the Piper behind the flute, to those who has supported me in any way, to Dev community for a Platform like this to share my story with all you wonderful readers and also to everyone reading this post.

I hope to update you all when I get to my destination.