DEV Community: Benjamin Nwokolo

Environment Variables in Node.js

Benjamin Nwokolo — Thu, 03 Nov 2022 07:31:10 +0000

Environment Variables are very useful and helpful in the configuration of applications , in This Article We are going to discussing about Environment Variables and How to work with Environment Variables in Node.js Applications.

Introduction to Environment Variables / What are Environment Variables.
Importance and Use cases of environment variables
Getting started with Environment Variables in Node.js
Uses of Environment Variables in Node.js
Working With Environment Variables in Node.js
Security Practices in an .env file
How To Access environment variables stored in a .env file within a Node.js Application.

Introduction to Environment Variables / What are Environment Variables.

Environment Variables helps in the configuration of applications in different environment in which an application is running on, be it a Production , Development or a Testing environment.
Environment Variables are Variables set by the operating system which helps to create the environment that a computer program runs on , one of the commonly used environment variable is the PATH Environment Variable . As A Developer when building applications you should never store and write sensitive information such as API Keys ,HOSTS, Database Credentials , Database id and Passwords in Your Code which would be pushed to public, with the help of environment variables such sensitive information can be hidden and be protected to avoid any security breach .

Importance and Use cases of environment variables

Environment Variables are useful when separating Programming and configuration settings of an application ,which makes it easier in Deploying an application to different environments. for instance the Database configuration settings of an Application in Development would be different from the settings in Production , and this configuration settings can be stored as environment variables.
Environment Variables Helps in the protection and security of configuration settings for example API Keys and Passwords should not be hardcoded in an application in production instead it should added as an environment Variable .

Getting started with Environment Variables in Node.js

Environment Variables can be used in the configuration of Node.js Applications , We can store sensitive information such as passwords and Credentials as environment variables in Node.js .

Uses of Environment Variables in Node.js

Environment Variables are used in Hiding and Protecting API Keys and Passwords.
Environment Variables are used in setting the PORT of Node applications.
Environment Variables are used in configuring Database Settings.

Working With Environment Variables in Node.js

Environment Variables in Node are accessed using the process object , which is a Global object that is injected during runtime which represents a node process , one of the major property is the env propety ,an env property provides access to all existing environment variables in a Node.js application


//process object
process.env

process.env is a global object in Node.js from which we can access all the environment variables in the environment in which an application is running on , this object returns properties which contains the user environment and form the object we have access to the PATHand PORTamongst other properties .

console.log(process.env);

When it is been logged to the console we would have access to the various properties of the process.env object. the Most Efficient Way to provide environment variables in Node.js is through an .envfile

Using the .env file

.env file is a text file which contains a set of key value pairs of environment variables , we can place the value of an application passwords , API Keys and Database Credentials which we want to keep private in an .env file. .env file generally lets us store values in it , values in which we do not want to embedded / placed inside code which can be accessed or seen by the public.

So lets create a .env file in our application directory

now lets store an example of configuration settings, API keys Database Passwords and Credentials inside this .env file we created:

DB_USERNAME = Benjamin
DB_PASSWORD = Ben102722
API_KEY = DHDJHWRR66
API_PASSWORD = SHD2YWO21093J2Q92Q03

We Have now stored environment variables (in the form of key value pairs )inside the .env file which we can access later on in our application .

Security Practices in an .env file

.env files should be made private and should not be shared with anyone and also should not be made accessible to the public because it contains sensitive informations such as Database Credentials ,API Keys e.t.c . env files should not be visible in the source code when uploading codes to version control services such as Github.
To Be able to prevent and exclude .env files From being pushed to Github and been made accessible to the public
, we create a .gitignore file in the application codebase and exclude the .envfile from being pushed to github , and it is done by typing .env inside the .gitignore file , so that git would ignore the file when it is been pushed

How To Access environment variables stored in a .env file within a Node.js Application.

To make use of the environment variables stored in the .env file , we make use of 3rd Party NPM Package to access the variables and the package is called dotenv .
Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
dotenv is a npm package that loads environment variables and helps read .env files.
To install dotenv , Head over to the command line terminal and execute this command in the directory which contains the application to be able to install it :
npm install dotenv --save

After successfully installing it , to be able to access the environment variables stored in the .env file, head over to file in the which you will making use of the variable in and require dotenv require('dotenv').config(); with this, we can now proceed to access all the environment variables in which we stored in the .env file above. So lets access the DB_PASSWORD stored in the .env file as an a example:

const express = require('express')
const path = require ('path');
require('dotenv').config();

//accessing the DB_PASSWORD from the .env File
console.log(process.env.DB_PASSWORD);

const app = express();
app.listen(process.env.PORT || 3000);

when the code is executed we get the exact value of the DB_PASSWORD as it was stored in the .env file .

Conclusion

This Article has explained and shown the Basics and the use cases of environment variables and the .env file in a Node.js Application . I Hope You Found this article Helpful !

Sending an Email With React Without a Backend Server

Benjamin Nwokolo — Sun, 02 Oct 2022 01:34:52 +0000

Introduction

In This Tutorial we are going to learn how to send an email in a React Application Without making use of a backend Language Like PHP , Python , Golang and The Rest of Backend Languages.
For us to be able to send an email in react without a Backend we will be making use of Third party Service Called EmailJS . EmailJS is a service from which we can send Emails Directly From Javascript Without a server Code. EmailJS makes it easily to send an email with javascript and its frameworks

Prerequisities

-Basic Knowledge Of React

-An Email JS Account

-An Email Account

Steps

Step 1

So, To be able to make use of EmailJS in our React App we create a free account on emailjs.com

After Signing up , Verify your Email and Then Proceed to Login into your emailjs account .

Step 2

We have to also add an email service provider on EmailJS from which emails will be sent from , To create a new service , Click On Email services on Your EmailJS Dashboard ,Click on
Add New Service and choose an email service provider of your choice

For the sake of this tutorial , we’ll be making use of Gmail as a service provider , So after Selecting the email service of your choice , You Proceed to Connect it with your Gmail Account , To Do That click on "Connect Account" as displayed on the screen .

After Connecting Your Account Click on "Create Service"

Step 3

Template Creation , to be able to send emails we are to create a Template for our emails , and to do that we ,Click on "Email Templates"in Other to Create an Email template

Then , Click on “Create New Template” and You are Directed to this page which is the default template :

Understanding Variables on The Template

from_name : it Refers to Sender of the email.
to_name : This Refers to the Receiver of the email. in this case it means the person to whom you are sending the mail to.
message : it is the main content of your email.
to_email : Refers to email address which the email message is been sent to that is the receivers email address

Here is an Edited template :

So After editing your template click on “save” in other to save your Template. So we are ready to use this template in our React app.

Step 4

We are Going to Create a Contact Form in React to enable us send an email using template in EmailJS. So Head Over to Your Code Editor and Create a form in react , Here is my code for a Basic contact form :

import { useRef } from "react";

const Email = () => {

    const form = useRef();

return (
    <div class="form">
          <div class="title">Contact Us</div>
     <form  ref={form} >

        <div class="input-container ic1">
          <input id="firstname" className="input" type="text" placeholder="Username "  name="to_name"/>
        </div>

        <div class="input-container ic2">
          <input id="email" className="input" type="text" placeholder="Email Address  "  name="from_name"/>
        </div>

        <div class="input-container ic2">
         <textarea  required placeholder="Message"  name="message"></textarea>
        </div>
        <button type="text" className="submit">Submit Message</button>
     </form>
 </div>
   );
}

export default Email;

And Here is The CSS Style For This Particular Contact Form , But You can Create your own unique CSS style When Creating Yours .

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  align-items: center;

  display: flex;
  justify-content: center;
  height: 100vh;
}

.form {
  background-color: black;
  border-radius: 20px;
  box-sizing: border-box;
  height: 600px;
  padding: 20px;
  width: 400px;
}

.title {
  color: #eee;
 margin-left: 60px;
  font-size: 40px;
  font-weight: 600;
  margin-top: 30px;
}


.input-container {
  height: 50px;
  position: relative;
  width: 100%;
}

.ic1 {
  margin-top: 40px;
}

.ic2 {
  margin-top: 30px;
}

.input {
  background-color:white;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: black;
  font-size: 18px;
  height: 100%;
  outline: 0;
  padding: 4px 20px 0;
  width: 100%;
}
textarea{
  background-color:white;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: black;
  font-size: 18px;
  height: 120px;
  outline: 0;

  width: 100%;
  padding-bottom: 30px;
}

 form label{
     color: white;
     background-color: white;
}

.submit {
  background-color: #08d;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  cursor: pointer;
  font-size: 18px;
  height: 50px;
  margin-top: 100px;
 outline: 0;
  text-align: center;
  width: 100%;
}

.submit:active {
  background-color: #06b;
}
textarea::placeholder{
  padding: 30px;
  font-size: 20px;

}

Here is the Form Displayed in The Browser:

So now, We are to add functionality to this form to enable us send emails using react .

Step 5

Now , Head over to EmailJS Documentation to see how to make use of EmailJs in a React Application by making use of an already made React Code snippets. From the Documentation this is How to make use of EmailJS in A React Application using this function :

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

To make use Of EmailJS in a React App you are to install and import emailjs into your app.

Installing EmailJS

To be able to install emailjs Headover to new terminal window , check directory into the root directory of your project and code:

npm  install @emailjs/browser

After installing EmailJS , Go to The Component which contains your form and Import EmailJS :

import emailjs from '@emailjs/browser';

Step 6

We make use of The function From EmailJS Docs in the component Containing the contact Form

import { useRef } from "react";
import emailjs from '@emailjs/browser';

const Email = () => {

  const form = useRef();
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
    };

return (
    <div class="form">
          <div class="title">Contact Us</div>
     <form  ref={form} onSubmit ={sendEmail}>

        <div class="input-container ic1">
          <input id="firstname" className="input" type="text" placeholder="Username "  name="to_name"/>
        </div>

        <div class="input-container ic2">
          <input id="email" className="input" type="text" placeholder="Email Address  "  name="from_name"/>
        </div>

        <div class="input-container ic2">
         <textarea  required placeholder="Message"  name="message"></textarea>
        </div>
        <button type="text" className="submit">Submit Message</button>
     </form>
 </div>
   );
}

export default Email;

We are calling the sendEmail function when the form is been Submitted(onSubmit). From This Function, The sendFormMethod
in the function has Some parameters which are in our EmailJs Account which is Required To Enable us Send an Email Successfully

emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')

YOUR_SERVICE_ID : To Get Your Service ID Head Over To Email Services on Your EmailJS Account Dashboard

Copy the Service ID and Replace it with the YOUR_SERVICE_ID parameter in the function

YOUR_TEMPLATE_ID : To Get Your Template ID Head Over To Email Templates on Your EmailJs Account Dashboard

Copy the Template ID and Replace it with the YOUR_TEMPLATE_ID parameter in the function.

YOUR_PUBLIC_KEY : To Get Your Public Key Head Over To Account on Your EmailJs Account Dashboard.

Copy the Public Key and Replace it With YOUR_PUBLIC_KEY Parameter in the function.

After Replacing the values with all the necessary parameters from Your Personal EmailJs Account , Here is how the function should be :

import { useRef } from "react"
import emailjs from '@emailjs/browser';

const Email = () => {

const form = useRef();

const sendEmail = (e) => {
  e.preventDefault();

  emailjs.sendForm('service_yta11dh', 'template_2c9a1n9', form.current, 'vnX3YDUTUw7Cj3l_q')
    .then((result) => {
        console.log(result.text);
    }, (error) => {
        console.log(error.text);
    });
    e.target.reset();
};

    return ( 
        <div class="form">
        <div class="title">Contact Us</div>

         <form  ref={form}
         onSubmit ={sendEmail}>

        <div class="input-container ic1">
          <input id="firstname" className="input" type="text" placeholder="Username "  name="to_name"/>

        </div>

        <div class="input-container ic2">
          <input id="email" className="input" type="text" placeholder="Email Address  "  name="from_name"/>
        </div>

        <div class="input-container ic2">
        <textarea  required placeholder="Message"  name="message"></textarea>
        </div>
        <button type="text" className="submit">Submit Message</button>

        </form>
      </div>

     );
}

export default Email;

Note:

e.target.reset() in The function is to Clear the Form after it is been submitted.
The name Attribute in the input element
of the form Must Be The Same With name of The Variable in Your EmailJS Template.

Step 7

Now , We can Now Proceed to Send an email from the Browser Using the Form.

After submitting the form , The Email is sent immediately, Here is my mail sent successfully :

Conclusion

And there you have it , the email has been sent successfully to my Gmail account, So that is how to send an email in ReactJS without a backend Server using EmailJS.

Ways To Make HTTP Request in Javascript

Benjamin Nwokolo — Mon, 12 Sep 2022 05:26:20 +0000

Ways To Make HTTP Request in Javascript

It is Very Crucial To Know How to make HTTP Request to an Endpoint and Being Able to Send or Retrieve or Get Data. Javascript Has Various Ways and methods of Making HTTP Request To Various Server Endpoints and Database.
In This Article, we are Going To Be Discussing the Various Ways to Make HTTP Request In The Javascript Language

1) XMLHttpRequest

XMLHttpRequest is A Built-In Object in Javascript for Making HTTP request From A Web Server. This Was the Only Way and Method Of Making HTTP Request in The Javascript Language Before ES6. We Can Receive and Obtain Data Using HTTP GET Method and We Can Send Data Using HTTP POST Method

In This Example We are Going To Be Making Use of JSON Placeholder API which a free api made for developers for testing
Step 1
We Create a new instance of XMLHttpRequest() Object

//Creating a new instance of XMLHttpRequestObject

const request = new XMLHttpRequest();

Step 2
We Proceed to create a new HTTP Request From a Server Endpoint


//Creating a new instance an XMLHttpRequest Object
const request = new XMLHttpRequest();
//open the request
request.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
//sending the request 
request.send();

We then Open The Request Using open()method which has Two Parameters which the first Paremeter is the HTTP type / method of request , for this case it is a GET request we are performing.

While the second parameter is the server endpoint from which we want to get data from. We then Send the request using the send()Method

Step 3

We have to track the progress of request to know if the request is successful or not so we add an eventlistener to the request to listen to the readystatechange Event which is been executed when the readyState property of XMLHttpRequest Changes
readyState with the value of 4 Means The request is complete and status of 200 means the request is successful

//Creating a new instance an XMLHttpRequest Object
const request = new XMLHttpRequest();
//open the request
request.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
//sending the request 
request.send();

request.addEventListener('readystatechange', ()=>{
    if(request.readyState == 4 && request.status == 200){
        console.log(request.responseText);
    } else{
        console.log('error in  getting data');
    }
})

So, We performed and if() statement to check if the readyState is equals to 4 and also if the status is 200 which means our request was successful so we console.log() request.responsetext which is the text(data) received from the server endpoint in which we made our request and also an else to log error message in the console if the request was nit successful. In This Example our endpoint is the JSON Placeholder API .
In Our Console You Would See something like this .

{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }

We have finally and successfully Gotten a Fake id from JSON Placeholder API using XMLHttpRequest

2) Using The Fetch API

Fetch API helps us make to make HTTP Request in a similar manner with XMLHttpRequest but Fetch Makes use of the Promise API .When We make a request using fetch API it returns a promise which is asynchronous in nature .
Fetch API Has one mandatory parameter which is the server-side URL

//Fetch Api
fetch('https://jsonplaceholder.typicode.com/todos/1')

//Fetch Api
fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>{
   // it returns a promise
  return response.json();
}).then((response) =>{
    console.log(response);
}).catch((err)=>{
     console.log(err);
})

We tack on the then() method to fetch API which returns our request response and we then log our response to the console. .catch() method helps us catch error in our request if there is a error in our HTTP request.
In Our Browser Console we get an output which is an object :

{userId: 1, id: 1, title: 'delectus aut autem', completed: false}

3) Axois

Axois is a library for making HTTP Requests to various endpoints .Axios is a promise based method of making HTTP Request. A Unique feature of axios is that it returns JSON Data already parsed .Axios makes use of XMLHttpRequest Method under the hood.
Installing Axios
We can make use of axios by installing it ,there are other methods of installing axios but we are going to make use of a CDN in this article

  //Using CDN
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

We place this Script tag in the Head Section of the HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ways To Make HTTP Request with javascript </title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

Now we can now proceed to make HTTP Requests using axios

//axios
axios.get('https://jsonplaceholder.typicode.com/todos/1').then((data)=>{
   console.log(data);
}).catch((err)=>{
  console.log(err);
})

We make a GET Request by calling get Method on axios with URL we want to send a request to get data From. It returns a promise
In the browser console we have an object which contains our data :

{data: {…}, status: 200, statusText: '', headers: {…}, config: {…}, …}

4) Using JQuery

jQuery has several methods to make HTTP Requests But for the sake of this tutorial we would be using $.ajax() method .
$.ajax() method is used to make asynchronous HTTP Requests to a specific URL or Endpoint .
To be able to make use of $.ajax() you include its library source file in the head section of your html page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ways To Make HTTP Request with javascript </title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Below is the syntax of $.ajax()

$.ajax({
  url: url,
  type: type,
  success: success,
  error : error
});

url: it is the URL / endpoint with which we want make a request to using ajax.

type: it defines the type of HTTP Method in the request

success: it is a callback function fired based on response of the request if it is successful

error: it is a callback function fired based on response of the request if there is an error in the request

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  success: (res) =>{
     console.log(res);
  },
  error : (err) =>{
    console.log(err);
  },
});

In the browser console you get response of the request which is shown below:

{userId: 1, id: 1, title: 'delectus aut autem', completed: false}

Conclusion

We have learnt various ways to make HTTP Request in javascript . You can use any of the various methods to make request in your projects.Happy Coding !!

DEV Community: Benjamin Nwokolo

Environment Variables in Node.js

Table Of Contents

Introduction to Environment Variables / What are Environment Variables.

Importance and Use cases of environment variables

Getting started with Environment Variables in Node.js

Uses of Environment Variables in Node.js

Working With Environment Variables in Node.js

Using the .env file

Security Practices in an .env file

How To Access environment variables stored in a .env file within a Node.js Application.

Conclusion

Sending an Email With React Without a Backend Server

Introduction

Prerequisities

Steps

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Conclusion

Ways To Make HTTP Request in Javascript