Forem: V. Rohan Rao

Deploy NodeJS applications to AWS or HEROKU

V. Rohan Rao — Sun, 22 Nov 2020 15:30:42 +0000

The Premise.

NodeJS revolutionised the back-end architecture worldwide. Ryan Dahl made server side Javascript possible, further strengthening the position of JavaScript as an indelible part of the Web as we know it today.

Starting at the grassroots level, often first-timers have to deploy their code to a production server, say for a Hackathon or some freelance work.

Heroku and AWS are the best choices for deployment right now, with their free plans nicely covering most of the needs for a first timer.

Yet, deployment is a maze of it's own. Procfiles, environment variables, proxy settings, port exposing, it's a dire stretch for a person trying to spin up a server for the first time.

This article aims at helping you out to deploy your NodeJS apps.

But the bigger question is where to deploy?

What exactly are the differences between Heroku and AWS? And what are the benefits of choosing one over the other?

Heroku vs AWS

Heroku is container-base cloud platform offering (PaaS) whereas AWS is a secure cloud services platform providing IaaS, PaaS and SaaS.

(Infrastructure/Platform/Software as a Service)

Heroku is a easy to go solution for deploying if you are a beginner. You don’t have to actually worry about the infrastructure and scalability.

AWS in the beginning can be very complicated but gives you more control on the infrastructure of your site. So if you are beginner it’s better to try Heroku than configuring so many things in the AWS instance when you can get one step deployment solution by using Heroku.

So, let's begin, shall we?

Deploying NodeJS Apps on Heroku

We will use Heroku CLI for deploying.

Download Heroku CLI from here.

After successfully installing the heroku cli run the following command:

heroku login

Change the directory to the project folder.

Specifying a start script

To determine how to start your app, Heroku first looks for a Procfile. If no Procfile exists for a NodeJS app, we will
attempt to start a default web process via the start script in your package.json.

What is a Procfile? More on that below.

The command in a web process type must bind to the port number specified in the PORT environment variable. If
it does not, the dyno will not start.

What is a dyno?

All Heroku applications run in a collection of lightweight Linux containers called dynos.

~ Heroku DEV center

If you hardcode the port in your code, the deployment will fail.

Make sure you use process.env.PORT in your code.

Add a Procfile

What is a Procfile?

Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types

~ The Heroku DEV center

The Procfile, is a list of custom commands which are defined by certain keywords like web or worker.

These are steps and commands which have to be executed each time your app is started. Heroku executes all the processes in your Procfile in different dynos, light-weight linux containers, which connect among each other.

Create file with name Procfile (no extension) and add the line.

web: node index.js

Build your app and run it locally

Run the 'npm install' command in your local app directory to install the dependencies that you declared in your package.json file.

npm install

Start your app locally using the Heroku local command, which is installed as part of the Heroku CLI.

heroku local web

Your app should now be running on http://localhost:5000/.

Deploy your application to Heroku

After you commit your changes to git, you can deploy your app to Heroku.

git add .

git commit -m "Added a Procfile."

heroku login

Enter your Heroku credentials.

...
$ heroku create
Creating arcane-lowlands-8408... done, stack is cedar
http://arcane-lowlands-8408.herokuapp.com/ | git@heroku.com:arcane-lowlands-8408.git
Git remote heroku added

git push heroku master
...
-----> Node.js app detected
...
-----> Launching... done
       http://arcane-lowlands-8408.herokuapp.com deployed to Heroku

To open the app in your browser, type-

heroku open.

Deploy NodeJS on AWS

As a very first step, We need to create a EC2 instance on the AWS, with Amazon Linux 2 as the OS of choice for your server, and ssh into it .

After successful ssh into the EC2 instance , we need to follow the following steps to successfully deploy the NodeJS application.

Install NodeJS and NPM
Install Git and clone the repository with your project files.
Install all the dependencies
Install pm2 to run the server as a background process configure the security group for the Ec2 instance

Step 1 – Install NodeJS and NPM

Install NVM (Node Version Manager) by running the following command.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Activate nvm by typing the following at the command line

. ~/.nvm/nvm.sh

Use nvm to install the latest version of NodeJS by typing the following at the command line.

nvm install node

Installing NodeJS also installs the Node Package Manager (NPM) so you can install additional modules as needed.

Test that NodeJS is installed and running correctly by typing the following at the command line.

node -v

npm -v

Step 2 – Installing Git and cloning the repository

To install Git , run the following command in the terminal

sudo yum install git

To verify whether Git was installed properly in the system or not run the following command.

git –version

Run the following command to clone the repository

git clone <repository link>

Step 3 – Installing the dependencies

change the directory to the cloned repo folder and run the following command.

npm install

Step 4 – Installing PM2 and starting the server

PM2 is a daemon process manager that will help you manage and keep your application online.

Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.

A daemon (pronounced DEE-muhn) is a program that runs continuously and exists for the purpose of handling periodic service requests that a computer system expects to receive. The daemon program forwards the requests to other programs (or processes) as appropriate.

~ WhatIS.com

A Daemon process is a program which runs as a background process, without the need of user interaction via terminal or a GUI. Running the node app as a daemon process enables you to access and execute other processes from your SSH session on your server, without which your node process will take up your current session's terminal.

To install pm2 run the following command.

sudo npm install pm2 -g

To start the server run:

sudo pm2 start build/index.js

To delete a pm2 process run

sudo pm2 delete <index no of the process>

Step 5 - Configure Security groups

By default, nobody can access the application without configuring the Inbound traffic configurations for the EC2 instance.

Quick explanation

The external IP dedicated to your EC2, only looks for SSH requests by default. Normal webpages, and REST APIs, mostly use the TCP protocol for data transfer. To make sure your server is secure and is not vulnerable to DDoS attacks (Distributed Denial Of Service), and to make sure that your assets and data remains secure.

To make sure that front-end applications can send requests and receive responses from our NodeJS application, we will need to expose the port to incoming TCP connections by changing the security settings for our EC2 instance.

To configure Inbound traffic for the EC2 instance, follow the below steps:

Select the EC2 Instance and click on the security group link in the Description section.
By clicking the security group it will open the Security Group section. Here, we can configure Inbound and Outbound traffic properties. To make our application accessible from anywhere, click on the Inbound tab.
By clicking on the Edit button available in the Inbound tab, it will open Edit Inbound rules popup. By default, it will show SSH configurations.

Since our application is configured for port number as your required port, we need to add a new rule “Custom TCP Rule”.

Enter port range as your required port and select Source as “Anywhere”. After saving the changed rules, it will allow us to access our application from anywhere.

That's it, folks!🎊 You've learnt successfully how to deploy your NodeJS application to production!

We hope you found this insightful.
Do visit our website to know more about us and also follow us on :

Also do not forget to like and comment.

Until then,
stay safe, and May the Source Be With You!

This article was co-written by

V. Rohan RaoFollow

Always looking to learn more.

AND

Ramiz mollahFollow

exploring myself!

OpenSource and Data Privacy.

V. Rohan Rao — Sun, 01 Nov 2020 09:27:27 +0000

Let's face it. Each and everyone of us have heard that Big Tech is "stealing" our data, and misusing it. We've heard of anti-trust lawsuits, hearings, everything. But have we ever wondered what exactly is this "data" which they steal?

And yes, why is it that big of a deal anyway?

Let's see why it is.

A lot of things come under the aegis of valuable data. If you're on your phone right now, and use Google Photos, open it up, there will be a mapping feature, which condenses your memories as heat signatures over a map for you to explore.

Pretty cool, right?

NO.

Not only is this the biggest ad company out there, but it knows the exact time, date, location and the nature of your activity, the people there with you, what sort of a phone you were using, and can use all this data individually and together to build a profile on your food, travel, socialising habits, interests and even financial and political beliefs.

And this is possible because most smartphone cameras store basic metadata about the photograph in your camera roll. There are ways to strip the metadata off of your photos, but by default this is how the system works.

And this is just your gallery.

Whatsapp and Signal.

Whatsapp uses the open-source Signal Protocol for it's messaging end to end encryption. Well, it claims to, anyway. That often gives users the idea that all their data is secure on Whatsapp, as no one, not even Whatsapp, can read your messages. True.

Completely honest? No.

The message's metadata, like the sender's and receiver's mobile numbers, the time of the message, and the IP addresses of the devices involved in the transmission, are still stored and recorded by Whatsapp.

This is still very much power in the hands of a Facebook owned company whose business model is based on completely closed source.

This is again, the same company, which only recently has become transparent on the "off Facebook" activity which it logs. Basically all your other apps which you use on your phone.

A very viable solution to the Whatsapp situation is Signal itself, as it strips all messages of the message metadata, and removes location/time/device metadata from any messages, by default.

We must Onion-ise 🧅

TOR, The Onion Router, is a name you might have already heard, most probably in the context of the deep/dark web. In the words of the great Wikipedia,

"Tor is a free and open-source software for enabling anonymous communication."

Chrome is also built upon the open-source browser Chromium developed by Google.

chromium / chromium

The official GitHub mirror of the Chromium source

However, it comes with minimal privacy protection measures, and if you think about it, Google being the largest online advertising firm (with Google Ads), it's against their interest to stop websites from collecting your data.

So they don't. Cookies persist on your machine unless you manually clear them, a simple browser scrape will dump every-single info about your local PC configuration( including IPs), its literally an open-for-all data buffet.

This is where TOR differs from Chrome.

The internal workings of TOR are beyond the scope of this article, yet its implications are not.

TOR's data encryption at every step throughout its global network relay keeps your identity hidden, thus making it almost impossible for any meaningful data to be extracted from your online activity.

No IPs, no locations, your online identity remains protected.

And it being open-source drastically reduces the time of the feedback-patch loop, as vulnerabilities are detected and patched super quick. The amount of data collection that occurs even at the smallest of websites when using something like Chrome is almost mind-numbing. Use TOR, get some peace of mind.

Here's the code for it

However, there is a caveat to all this power. Websites can detect when you are using TOR, and may choose to restrict access to some content, or even the site itself. Wikipedia, for example, does not let you edit articles if you are using TOR.

This is where we suggest another, much more robust solution to the online privacy problem.

VPNs

Ah yes, Virtual Private Networks.

The magical thing every single one of your favourite Youtubers seem to be advertising these days.

All your data encrypted, access to location restricted content, it all sounds magical indeed. But it comes at a price, literally.

VPNs, at least the ones you should trust, are usually subscription based services. VPNs are the best solution we have to this online privacy problem.

Popular VPNs include ExpressVPN and NordVPN (yes, I only know two of these, I watch the same Youtubers as you) provide you privacy in exchange for a premium price tag.

However there is a potential catch to this as well. Encryption occurs before data is sent out on the web, but how can you be sure that your VPN itself is not collecting your data prior to encryption?

Again, a classic

"Who shall watch the watchers?"

scenario.

This privacy business really is a pain in the compiler. Well I may still have and option for you.

ProtonVPN

You may have heard of Proton before, they provide the secure email service ProtonMail as well. ProtonVPN is also a premium service, although it does have a free tier.

ProtonVPN is different from the other services owing to the fact that its client applications are all open-source

ProtonVPN / linux-cli

Linux command-line client for ProtonVPN. Written in Python.

Any data collection that may occur has to take place at the client level itself. Having the client source code open source means we can easily go through it and check for shenanigans anytime we want.

This is a huge power move on the part of ProtonVPN to prove their stand on the no-data-collection policy.

Privacy, ground up.

Windows, remains by far, the most popular consumer desktop operating system. As an open-source club, the fact that Windows is completely proprietary, raises a lot of issues, but a few recent developments, have made the case very weak for Team Redmond.

Windows shows ads for various services, directly baked into the Start menu, Lock Screen, Action Center and Notifications even.

This is an operating system, which still sells licenses for it's real, fully-fledged copies. Forget safer networking, if advertisement APIs are baked into the very core of your OS, how can you ever be certain of their intentions?

Add to that DLL hell and Registry hell in Windows, and even third party applications can access sensitive permissions and data on a very trivial basis.

Let's see open source solutions to this.

This is Tails OS. Tails is an operating system which can be run in it's complete form from a thumb-drive, and has default network configuration to use Tor in all it's networking functions. It wipes all files, passwords applications as a part of it's amnesic approach, and doesn't interact with the hard disk of the system you're using as a system for it's Live system.

You can check out their code here.

There a lot of other privacy focused Linux distributions, like Qubes OS, which containerizes all applications to run independently, disallowing Read-Write access and network permissions on a granular level.

QubesOS / qubes-core-agent-linux

Qubes component: core-agent-linux

These are a few of the many, many technologies out there which promise internet anonymity. This might seem like a small deal, but in a world where companies like Cambridge Analytica try to influence global elections with news and counter fake news, wherein activists and journalists are hunted down for telling the truth, small steps, that's all we can take.

Data privacy being an actual issue might seem like some paranoid dystopia,but with us being at cusp of the AR/VR boom, wherein, wearable cameras will become a part of daily lives, it is important to take a step back, and look at where are we heading.

Until then, we must persevere.

We hope you found this insightful.
Do visit our website to know more about us and also follow us on :

Also do not forget to like and comment.

Until then,
stay safe, and May the Source Be With You!

This article was co-written by

.ltag__user__id__431923 .follow-action-button { background-color: #d7dee2 !important; color: #022235 !important; border-color: #d7dee2 !important; }

Anurag Mondal

A student trying to learn as much as humanly possible

AND

.ltag__user__id__445359 .follow-action-button { background-color: #1fe069 !important; color: #000000 !important; border-color: #1fe069 !important; }

V. Rohan Rao

Always looking to learn more.

Framer Motion API for React

V. Rohan Rao — Sun, 13 Sep 2020 14:34:07 +0000

The Exposition.

We've all been there. Looking at those beautiful animations on so many webpages and looking at our own CSS,sighing at the wire-frame we spent hours on, and googling how to center a div. And don't get us wrong. That is, the way you learn, and of course, Codepen.🌚

But front-ends are important. Some would argue as important as the core back-end of your webapp. After all, it's the part everyone sees, everyone watches, looks for mistakes, wows at it's beauty, snorts their derision at it's design. And this brings us to the Framer. The online, free prototyping tool for front-end designing and animation ...

... without writing any code.

Uh, no, thankyou.

The Spells.

Thankfully(?), though, their Motion API for React is open-source as a NPM package, and you can combine it with your CSS to animate various components as you feel the need. (Hey, I said better animations, not lesser work.)

You'll need a React based project for this. So, Vue and Angular gang, there's another cap in Facebook's cap.

Moving ahead, this isn't a Vue vs Angular vs React debate, that has been 'settled for good', multiple times to be even relevant anymore.

So, what exactly is Framer Motion API? Does it accomplish anything CSS can't?

NO.

So, isn't it useless? NO.

It's not what is done, but how quickly and easily it is done, if not the most efficiently is what counts. DO NOT quote us on this, this is how most APIs/frameworks are conceptualised.

And face it, if we went by those definitions, most new JavaScript frameworks will be rendered useless.(Most are.)

Create your react project.

Firstly install the npm package by heading over to terminal and

npm install framer-motion

and press Enter.

Framer Motion API works in a very simple way. You import the motion component from the framer-motion npm package in the page or component file as per your need.

import {motion} from "framer-motion"

And then you can declare motion components instead of classic HTML/JSX components. like,

<motion.div/>

instead of

<div/>

All these alternate components come with a lot of configurable values for animation, transformation, even hard-coded in-line CSS, and even GPU accelerated graphics.

The Magic.

Check this slightly accelerating toggle.

Or this scroll dependent animation...

Or this shape-shifting object for your brand logo.

Pretty neat, huh? The Example.tsx in the last sandbox has only 21 lines of code.

Now, that's concise.

Again, we aren't saying that the Framer online tool is bad. But again, we discuss primarily the coding. If someone can spin up breathtaking visuals with an acute knowledge of classical styling, kudos to them. But the API will allow a lot of developers to create something beautiful. Magical, even.

And at the end of the day, that's what it is all about.

Check it out here:

framer / motion

Open source, production-ready animation and gesture library for React

And the API documentation here.

We hope you found this insightful.
Do visit our website to know more about us and also follow us on :

Also do not forget to like and comment.

Until then,
stay safe, and May the Source Be With You!

sort("NODE") --> DENO

V. Rohan Rao — Fri, 07 Aug 2020 13:02:56 +0000

The first thing to keep in mind while discussing deno is to remember dino would have been a much cooler name. Kidding, what we have to remember, is that it is still in early stages and not perfect for production, yet.As Ryan Dahl has himself pointed out, it is for enthusiasts and if you aren’t one, or looking for support for your production level projects, then use Node.

Now that we are done with the disclaimers, let’s dive straight into deno. It is amazing!

WHAT IS DENO?

Deno is a Javascript framework, which enables server side JavaScript execution, much like NodeJS. They even share the letters making their names. Both of them were conceptualised by Ryan Dahl, although at very different times.

WHY Deno?

As developers, we have one singular dev whose code structure and execution always lets us down. Namely, our past selves. Ryan Dahl is no different. As simple and intuitive and honestly good NodeJS has been, there were very deep rooted issues in it’s very basic structure and execution, which Ryan has since come to regret.

And to remove so many issues with how he had approached Node, it wouldn’t be possible without crashing a lot of projects which use Node for their production servers.Not to mention, Ryan has moved away from NodeJS and Joyent, the once sponsor, but now maintainer of NodeJS.(sort-of?) Joyent was acquired by Samsung later on. NodeJS still remains open-source, but a lot of issues have cropped up in it. Also it's development is governed by the OpenJS Foundation, formed in turn by merging the NodeJS Foundation and the JS Foundation.

So, What’s different?

JavaScript as a language has changed a lot and a few of these changes wouldn’t have been possible in 2009.

CONSTRUCTION

NodeJS is based on C++, which uses the GYP auto build tool. It is important to note that the V8 engine, used for running JS, moved away from GYP to GN, and that just adds unnecessary complexity.

Deno on the other hand, is based on Rust, a relatively new programming language, which allows sandboxing of the code from a very elementary perspective. Rust promises the same efficiency and speed as C++, while giving fundamentally better security.

TYPESCRIPT

Deno introduces native TypeScript support, out of the box. Typescript can be enabled on Node as well, but integrated support breathes a fresh lease of Life, and allows code to be simpler and to be easily debuggable.

WINDOW OBJECT

Goodbye axios, hello fetch.

The heading is one of the few changes which will be possible due to deno keeping the window object, which is traditionally native to web browsers. Since even the document object is an object of window, all native JavaScript window methods and functions have native support in deno. And that is one of the themes which oversee deno’s thinking. I’m of course referring to Deno’s native support for Promises, which were ironically added in NodeJS in 2009, and subsequently revoked in 2010. Promises are the best abstraction for async/await working, and Ryan believes that it would have simplified things to a great extent and made NodeJS even better.

A CENTRALISED PACKAGE MANAGER (or the lack thereof)

NPM or node package manager is the default package manager for NodeJS. NPM is a private entity, and yet an open source framework is dependent on it. So, a open source framework,has it’s primary package manager owned directly by GitHub.(read Microsoft). This risks the entire future of NodeJS projects around the world, in the eventuality that Microsoft decides to shut it. Even if it was an independent organisation, a centralised dependency place wherein projects are interdependent on each other’s existence is not a good idea. And add to that ES6 allows you to use native import statements along with Web CDNs.

In a deno .ts or a .js file,

import { serve } from “https://deno.land/std@0.63.0/http/server.ts";

That’s all that is needed.

Deno caches the dependency in your local storage during the first time and then uses that cache for subsequent operations.

Deno does have a centralized collection of standard modules that do not have external dependencies and are reviewed by the Deno core team; it lives on the deno.land server. The deno_std module collection is a loose port of Go’s standard library.

But these can be thought of more like building blocks.

Insecure file system and network practices (or the lack thereof)

Any time you type

node index.js

In your terminal, it immediately grants filesystem and network access to your index.js file and all the node_modules dependencies the application ‘requires’.

What this means is that if masked properly, an npm package can be configured in a way which compromises the end user’s security, or herein, the servers. Although it is possible to containerise applications, it is still a design flaw.

Deno fixes these basic flaws by simply mandating flags be added during running the application. Without the user explicitly providing access during runtime, the code cannot execute file structure accessing or network commands, in any way.

deno run --allow-net app.ts

This only gives the network permission

deno run --alow-write app.ts

This only gives Filesystem access.

You can choose explicitly what permissions you wish to give your script.

Setting up a basic server on Deno

Open your IDE/Text Editor/Terminal and make a new TypeScript or JavaScript file
Type the following in it:

import { serve } from 'https://deno.land/std/http/server.ts'
const s = serve({ port: 3000 })
for await (const req of s) {
req.respond({ body: 'Hola, DEV.to' })
}

Save and open terminal and type.

deno run {name of file}.extension

You'll get an error like this :

We did not allow deno to use the network in the first place!

Go back and type:

deno run --allow-net {name of file}.extension

Now it will work perfectly, go to your specified localhost port on your browser, annnnnd voila!

This was a fresh look on Deno. The latest release on August 1, 2020 and is v1.2.2

Check it out here

So, folks, that was Deno. A re-thinking of a very popular technology, making it better in almost every way imaginable. Ryan claims that it isn't aimed at replacing Node, but it is really hard not to see the potential here.

However, (*TnC apply)
Deno, contrary to popular belief, is actually like a small bird (which is good, birds came from dinosaurs afterall) and its gonna take time before it becomes the battle tested T-rex we all want it to be.

We hope you found this insightful.
Do visit our website to know more about us and also follow us on :

Also do not forget to like and comment.

Until then,
stay safe, and May the Source Be With You!