DEV Community: Arifa

Easily upgrade or downgrade your Node.js version

Arifa — Sat, 13 Feb 2021 13:07:04 +0000

Sometimes, when you are working on a project which uses a different version of Node.js than what's installed on your dev machine, you may want to change to the Node.js version required by the project.

All you have to do is install a package called n, which caches node versions on your dev machine.

Install n using npm

npm install -g n

After executing the above command, you may receive a series of npm warnings followed by npm ERR! You can execute these three commands which are also mentioned here.

# make cache folder (if missing) and take ownership
sudo mkdir -p /usr/local/n
sudo chown -R $(whoami) /usr/local/n
# take ownership of node install destination folders
sudo chown -R $(whoami) /usr/local/bin /usr/local/lib /usr/local/include /usr/local/share

Now, you can install any version of Node.js you want.
Executing as n <version> you can download and install a version of Node.js. If the <version> has already been downloaded, n will install from its cache.

To change to the latest version of node

You can also check the versions of node your n package has, by simply executing the following command n

Executing the above command provides the versions cached.

I hope this post helps you switch between different Node.js versions. Please like this post and follow me for more such posts.

References
[1] https://www.npmjs.com/package/n

How to host a full-stack application on Heroku

Arifa — Sat, 12 Dec 2020 12:18:37 +0000

If you have built a full-stack application (using React, Node.js) that is running successfully locally on your dev-machine, you would like to host it on the internet so that you can share it with your friends and family. In this post, I will guide you through simple steps on how you can do that.

You can host your application as a single project on Heroku.

In the front-end part of your project, change baseUrl (or the URL that you use to communicate with backend) to a relative Url like as follows:

const baseUrl = "/api"; //run locally using http://localhost:4000/

If you have created your front-end application using create-react-app a build file of the project can be created with the following command.

npm run build

Let's run this command from the root of the frontend project.

This creates a directory called build which contains the directory static. Minified version of our application's JavaScript code will be generated to the static directory.

Let's move to the backend side of the application.

Heroku uses its own PORT so change the definition of the port your application uses at the bottom of the index.js file like so:

const PORT = process.env.PORT || 3001
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})

Now, copy the build file from the front-end project to the backend project.

To make express serve the front end(ie. static content like index.html and the JavaScript, etc.,), we need a built-in middleware from express called static.

We need to add the following amidst the declarations of middlewares

app.use(express.static('build'))

Whenever express gets an HTTP GET request it will first check if the build directory contains a file corresponding to the request's address. If a correct file is found, express will return it.

In the backend part of your project,
add a file called Procfile to the project's root to tell Heroku how to start the application.

web: npm start

You can also write this in Procfile if index.js is the entry point of your project.

web: node index.js

Make sure you have initialized git and added .gitignore, doing so will ensure that your node_modules and sensitive data of your is not over the internet.

Now, you can create a Heroku project using Heroku CLI or UI provided by Heroku. We will use the Heroku CLI.
To start with Heroku CLI you need to first login into Heroku

$ heroku login

Fill in the email and password.

$ heroku create link_of_the_name_that_you_want_to_host_on

commit your code to the repository

$ git commit -m "message" 

$ git push origin master

$ git push heroku main

You can also check the logs on Heroku using

$ heroku logs -t 
//which prints the logs to Console whenever something happens on the server.

So your application is now hosted on the Heroku. If you wish you can also check if the application works locally as a full-stack application, all you need to do change the Url to http://localhost:4000/

The problem I faced hosting such an application was that If I had to make any changes in the front-end I had to change the build file of the backend.

I hope this helps you host your application with some ease.

Don’t hesitate to clap if you considered this a worthwhile read!

Using WordPress API with React - Parsing Special Characters

Arifa — Tue, 20 Oct 2020 10:05:44 +0000

While I was working with the WordPress REST API, I encountered that the response from the WordPress API contained few undesired things such as HTML tags and special characters such as ’. For example:

<p>Hey there! A young and eager to learn native English speaker
here. I&#8217;m a Materials Science graduate from the University
of Cambridge and have a broad range of experiences in
engineering and education, from saving elephants in 
South Africa to manufacturing design in Cyprus. I&#8217;m happy
to code and develop my skills as an intern.</p>

I wanted to get rid of the <p> tags and replace the special characters with appropriate human-readable characters.

After spending some time on solving this problem, I found a couple of node packages which solve my problem. They are

striptags
he

Let's first start with striptags. Install it using:

npm i striptags

Here's an example usage of striptags:

import striptags from 'striptags';
var html = <p>Functional consultant specialized on financials
 modules of Oracle E-Business Suite.</p>

striptags(html);

You can actually do a lot of things with this package, for example, you can decide which tags you want to keep, and which tags you want to replace.

So the next problem was that I was receiving some special characters like I’m, which was meant to be I'm. To solve this, I made use of a decoder named as he.

Installed the package using:

npm install he

Then, I used the package

import he from 'he';

he.decode('Hey there! A young and eager to learn native English 
speaker here. I&#8217;m a Materials Science graduate from the
University of Cambridge and have a broad range of experiences 
in engineering and education, from saving elephants in South
Africa to manufacturing design in Cyprus. I&#8217;m happy to code
and develop my skills as an intern.');

And the output was

Hey there! A young and eager to learn native English speaker here.
I'm a Materials Science graduate from the University of Cambridge
and have a broad range of experiences in engineering and education, 
from saving elephants in South Africa to manufacturing design
in Cyprus. I'm happy to code and develop my skills as an intern.

I share my learning experience in form of writing blogs, so I write anything new learned. Don’t hesitate to clap if you considered this a worthwhile read!

Create a more personalized Github Profile

Arifa — Fri, 18 Sep 2020 08:29:23 +0000

Are you excited to make your GitHub profile look better than it is now?

Here is an example of how I made mine look better presenting more about me.

So let's get started.

To create a more personalized GitHub README you need to start as follows.

Go to your GitHub account
Create a new repository with the same name as your user name as shown below

Make the repository public and initialize with a README.md
Click the "Create repository" button
Start by making changes in the README.md file through GitHub editor which is the easiest way to do. You can also do it offline based on your preference and push back the changes to the repo when you are done

A few things that a README file should contain

A greeting message
Bio about yourself
Social media profiles
Highlights, what all you are working on right now
- Github Stats
- Profile visitor tracker

Try creating your Github Page and let me know in the comments the fun you had creating it.

Shower your love!!!

Add Google Analytics to a React-based Website

Arifa — Sat, 01 Aug 2020 15:30:08 +0000

Google provides a free web analytics service that can be used to analyze details about the visitors on our website.

Tracking ID

Firstly, we need to have a Google Analytics Account, Go to Google Analytics. Once you have signed in to your Google account, click Access Google Analytics, and click Sign up.
Fill in your account name, website name, website URL, and select an Industry Category and also the Reporting Time Zone.
Under Data Sharing Options, check the boxes next to the options that you want.
Click Get Tracking ID.

Configuring the React Project

In the project where you want to add google analytics follow these steps:

Install react-ga package

npm install react-ga --save

Initializing GA and Tracking Pageviews:
Add the following snippet of code in your Index.js file

import ReactGA from 'react-ga';
ReactGA.initialize('UA-tracking-id'); // add your tracking id here.
ReactGA.pageview(window.location.pathname + window.location.search);

Deploy the changes.
Now you can view the analytics in Google Analytics account.

Using morgan with Express for Backend Logging

Arifa — Sat, 25 Jul 2020 09:53:39 +0000

Logging is an important element of writing software as it helps us to see the software operations, debug and catch errors.

morgan is a logging tool (middleware) that can be used in HTTP servers implemented using Express & Node.js. It can be used to log requests, errors, and more to the console.

Middleware are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next [1].

Getting started with morgan

Installation

$ npm install morgan --save

A basic code snippet using morgan looks like this:

const express = require('express');
const morgan = require('morgan');

const app = express();

app.listen(3000, () => {
     console.log('App listening on port 3000 ...');
});

Output

console.log('App listening on port 3000 ...');

Formatting Logs

Making use of predefined format strings

morgan offers us with a set of predefined format strings, which are plug-and-play. For example, let's look at morgan('tiny'):

const express = require('express');
const morgan = require('morgan');

const app = express();
app.use(morgan('tiny'));

app.get("/", (req, res) => {
  res.send("<h1>Hello world!</h1>");
});

app.listen(3000, () => {
    console.log('App listening on port 3000 ...');
});

Open your web browser and go to http://localhost:3000. You will see the following output in your web server:

App listening on port 3000 ...
GET / 200 24 - 2.868 ms

The output is displayed in the following format:

morgan(':method :url :status :res[content-length] - :response-time ms')

You can find more such predefined formats from here.

Custom Log Formats by Creating Our Own Tokens

We can create our own custom log format strings. Below is an example of how we can create our own custom log format strings.

const express = require('express');
const morgan = require('morgan');

const app = express();

//we are defining a new parameter called host
morgan.token('host', function(req, res) {
    return req.hostname;
});

// we are using the host parameter
app.use(morgan(':method :host :status :res[content-length] - :response-time ms'))

app.get("/", (req, res) => {
  res.send("<h1>Hello world!</h1>");
});

app.listen(3000, () => {
    console.log('App listening on port 3000 ...');
});

Output

App listening on port 3000 ...
GET localhost 200 21 - 2.819 ms

I hope this post has helped you to get started with logging using morgan. Please like this post and follow me for more such posts.

References
[1] http://expressjs.com/en/guide/using-middleware.html#using-middleware