DEV Community: Arif Istiak

How to use different environment variables for development and production in Node.js

Arif Istiak — Tue, 28 Feb 2023 17:36:23 +0000

Some information in our project is secret (like API keys, secrets, etc.), so we cannot use them directly, so we store them in a .env file and push the code to .gitignore the file thus keeping our sensitive information safe.
And we might have separate sets of environment variables for development and production. For example, when working with payment gateways, we might have a sandbox or development token for development and another for use in production.

One way to deal with this is to keep separate .env files for development and production environment and load them dynamically.

We will require the dotenv package for loading .env files

yarn add dotenv

Let's say we have .env.dev and .env.prod two different files.

`const dotenv = require('dotenv')

dotenv.config({path : env.${process.env.NODE_ENV}})

const Config = {
NODE_ENV : process.end.NODE_ENV
}
`

and update the script section in package.json and add NODE_ENV environment manually.

"scripts" : { "dev" : "NODE_ENV=dev npx nodemon", "start" : "NODE_ENV=prod node dist/index.js" }

Your scripts section may look different based on your project, you just have to prefix the command with NODE_ENV=dev and NODE_ENV=prod

Remotely controlled SpyCam with nodejs and telegram

Arif Istiak — Sat, 04 Jun 2022 07:27:50 +0000

In this article you are going to see how to create a spy camera with nodejs and telegram that you can use to capture images over the internet , so lets start :)

Create a Telegram Bot

go to telegram and search BotFather

now if you click the menu you are going to see "create new bot" option along with some other options

hit "create new bot"

now you have provide some name the bot and a username for the bot

you will receive token and bot link in return , securely store them for later use and do not share them publicly .

Create a node project

you now have to create a node project , go to the directory you want to store you code in and hit

yarn init -y

now lets install some dependencies

yarn add dotenv node-webcam node-telegram-bot-api

create a .env file in your project root , with TELEGRAM_TOKEN , MY_TELEGRAM_CHAT_ID , ACTIVATION_TEXT variables

put the secret token that you received from BotFther in TELEGRAM_TOKEN , set ACTIVATION_TEXT , MY_TELEGRAM_CHAT_ID is to make things more secure you will see how to find it below
(you can also work without chatId , there is a github link for that at the end of the article)

getting MY_TELEGRAM_CHAT_ID

// main.js 
require('dotenv').config()
const TelegramBot = require('node-telegram-bot-api');
const { TELEGRAM_TOKEN} = process.env

const bot = new TelegramBot(TELEGRAM_TOKEN, { polling: true });

bot.on('message', async (msg) => {
    const chatId = msg.chat.id;
    console.log({chatid})

});

if you run this code with node main.js and send a message in your bot channel ( bot channel can be found with token message from BotFather ) you will get your chatId , you can now set it in MY_TELEGRAM_CHAT_ID in .env file

Taking pic from webcam with node

you are going to use the below code to take pic with node from your webcam

// takePic.js 
var NodeWebcam = require("node-webcam");


const takePic = async () => {
    try {
        return new Promise((resolve, reject) => {

            var fileName = Math.random().toString().slice(2, 8);

            var opts = {
                width: 1280,
                height: 720,
                quality: 100,
                frames: 60,
                delay: 0,
                saveShots: true,
                output: "jpeg",
                device: false,
                callbackReturn: "location",
                verbose: false
            };

            var Webcam = NodeWebcam.create(opts);

            Webcam.capture(`${fileName}`, function (err, data) {
                if(err) reject(err);
                resolve(`${fileName}.jpg`);
            });

        })


    } catch (error) {
        reject(error);
    }

}

module.exports = takePic ;

now that you have everything in your .env set up , you can now modify your main.js like this

var takePic = require("./takePic");
require('dotenv').config()
const TelegramBot = require('node-telegram-bot-api');
const { TELEGRAM_TOKEN, MY_TELEGRAM_CHAT_ID, ACTIVATION_TEXT } = process.env

const bot = new TelegramBot(TELEGRAM_TOKEN, { polling: true });

bot.on('message', async (msg) => {
    const chatId = msg.chat.id;
    const { text } = msg;
    try {
        if (chatId == MY_TELEGRAM_CHAT_ID && text == ACTIVATION_TEXT) {
            bot.sendMessage(chatId, 'wait');
            const filename = await takePic();
            const url = `${__dirname}/${filename}`;
            bot.sendPhoto(chatId, url);
        }
    } catch (error) {
        console.log(error);
        bot.sendMessage(chatId, error);
        bot.sendMessage(chatId, 'an exception occurred');
    }

});

now run main.js node main.js , if you now send the activation text in your bots channel (hear it is "snap" , set in .env) you will initially receive a reply with "wait" followed by a Picture captured from your webcam 3:D .

you can find the whole code in hear

https://github.com/aistiak/node-telegram-spy-cam

without chatId

https://github.com/aistiak/node-telegram-spy-cam/tree/without-chat-id

Thank You for reading this article , hope you found it useful :)

How does Facebook receive incoming chat data through web socket ?

Arif Istiak — Tue, 03 May 2022 23:42:25 +0000

So I was poking around with Facebook messenger web sockets , a strange thing I noticed that incoming socket event response ( when a message is received ) does not contain the message itself but some sort of JS code like this link , then ok I thought when this code executes then it might call some API to retrieve the actual message but I did not find any follow-up requests that gets the actual message !! . Am I missing something ? where does the actual text message come from ?

Building a simple Rick and morty character app with Graphql and Nextjs

Arif Istiak — Fri, 10 Sep 2021 05:43:47 +0000

In this blog we are going to see how to consume a GraphQL with Next.js by building an app which "Finds out" which Rick and Morty character the user is.
For the graphql api we are going to use Rick and morty graphql api https://rickandmortyapi.com/graphql from https://rickandmortyapi.com
The purpose of this blog is to show how to consume the GraphQL api so we are not going to the detail of how GraphQL works .

First lets create a new nextjs app with

npx create-next-app who-are-you

Now cd into the project directory , to start consuming GraphQL we will need to install graphql and @apollo/client

yarn add @apollo/client graphql

Now goto pages/_app.js file . If there isn't one then create one
the . File is going to look something like this

import "../styles/globals.css";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://rickandmortyapi.com/graphql",
  cache: new InMemoryCache(),
});

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />{" "}
    </ApolloProvider>
  );
}

export default MyApp;

Here we created a new client with the url endpoint and a cache and passed it to the child components through a provider .

Lets create a folder called graphql at the root of the project and create a file called queries.js under this folder
so the folder structure will be like this .

In the queries.js file , there will be the query to fetch a specific character with an id

import { gql } from "@apollo/client";

export const GET_CHARECTER = gql`
  query getCharecter($id: ID!) {
    character(id: $id) {
      name
      image
      episode {
        name
      }
      location {
        name
        dimension
      }
    }
  }
`;

So now as everything is in place it's time to query the api and the successful query would retrieve the character name , image , list of episode name that it appeared in and locations with name and dimension , for this we are going to use the useQuery hook

import { useQuery } from "@apollo/client";
import { GET_CHARECTER } from "../graphql/queries";
const randomId = (_) => parseInt(Math.random() * 671);
const { loading, error, data } = useQuery(GET_CHARECTER, {
   variables: {
     id: characterId,
   },
});

Now when the component mounts , useQuery() hook is going to query the GraphQL api with a random character id ( at the time of writing this blog there are 671 characters ). While the query is running , the loading state is going to be true otherwise false , so we can use it to show loading related stuff . If there is any error it is going to be set on the error state of the hook , and if everything is ok the data state will store the data after the query finishes .

so our component would look something like this

import { useQuery } from "@apollo/client";
import { useEffect, useState } from "react";
import { GET_CHARECTER } from "../graphql/queries";
import styles from "../styles/Home.module.css";

const randomId = (_) => parseInt(Math.random() * 671);

export default function Home() {

  const [characterId, setCharacterId] = useState(randomId());
  const { loading, error, data } = useQuery(GET_CHARECTER, {
    variables: {
      id: characterId,
    },
  });
  const [character, setCharacter] = useState();
  useEffect(() => {
    if (data) {
      console.log(data.character);
      setCharacter(data.character);
    }
  }, [data]);
  if(loading) return  <div className={styles.container}> loading...</div> ;
  return (
    <div className={styles.container}>
      You are
      {character && (
        <>
          <h2> {character.name} </h2>
          <img src={character.image} alt={character.name} />
        </>
      )}
      <button
        className={styles.try__again__btn}
        onClick={() => {
          setCharacterId(randomId());
        }}
      >
        {" "}
        try again
      </button>
    </div>
  );
}

the final product would be

here is the live link https://aistiak.github.io/who-are-you
you can find the source code here https://github.com/aistiak/who-are-you .
A star on Github and your feedback about the article would be much would be much appreciated 💖 .And thank you for reading the article