DEV Community: Omkar-Ghodake

Environment Variables in NodeJs app

Omkar-Ghodake — Fri, 24 Jun 2022 16:02:15 +0000

What are Environment Variables?

Environment Variables are variables that are set by the Operating System. They are decoupled from application logic. They can be accessed from applications and programs through various APIs.

Why to use them?

Using environment variables helps the app to behave according to the environment in which the app is to be deployed. Environment variables also help to encapsulate the data.

How to use them in NodeJs application?

At first, we need to install a package named dotenv. We can use npm i dotenv or yarn add dotenv to install the package.

Then we need to create a file named .env. Note that we need to add .env file in .gitignore. This will help us in encapsulation of our data. Now we can define our variables in .env file.

Declare all the variables in .env file in uppercase, i.e, use Snake Case, but all letters should be in uppercase.
For e.g. VARIABLE_NAME = 23.

Once you declare the variables in .env file, then let's see how to access them in our app.
In our app, import the dotenv package where we want to access the environment variables as require('dotenv').config(). There is no need to save it in a variable like we save other packages such as, we import express as const express = require('express')
Now, to access the environment variables, just use the following syntax: process.env.VARIABLE_NAME

Example with code

1. .env file

TEST_VARIABLE = thereIsNoNeedToEncloseStringInQuotes
PORT = 5000

2. index.js file

require('dotenv').config();

const hostname = '127.0.0.1'
const port = process.env.PORT;
const testVariable = process.env.TEST_VARIABLE;
console.log(testVariable);

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Console output

Server running at 5000
thereIsNoNeedToEncloseStringInQuotes

Use Python in your Browser Now!

Omkar-Ghodake — Sat, 04 Jun 2022 05:26:53 +0000

Introduction to py-script

JavaScript was the only language which can be run in browsers. But now we can also run python in browser (client side or at frontend). The developer of https://anaconda.org/ unveiled quite a surprising project — py-script. It is a JavaScript framework which allows users to run python and use its libraries in browsers like JavaScript itself.

Official py-script website: https://pyscript.net/
py-script on GitHub: https://github.com/pyscript/pyscript

We can link py-script to our HTML document in the following two ways:

1. Using CDN links

We can use CDN links to link py-script framework to our HTML document. CDN link consists of following two links:
CSS: <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
JS: <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Copy and paste these link in your HTML documents, and now you can write python directly in your HTML document.

2. Downloading the py-script

Link to download py-script: https://github.com/pyscript/pyscript/archive/refs/heads/main.zip

Download py-script from this link, then unzip it, and place the folder named pyscript-main inside your HTML document's folder and then link it locally inside your HTML document by

<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>

Writing Python code in HTML doc

After linking the files to your HTML document, you just have to write <py-script> </py-script> tag and inside it, you can write the python code.

Code

<!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">

    <!-- py-script CDN links -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <title>py-script</title>
</head>

<body>
    <h1>This text is written in HTML</h1>       <!-- HTML -->

    <py-script>
        print("This text is written in Python")     # Python
    </py-script>
</body>

</html>

As you can see in the above code, we didn't get syntax highlighting for python code because it is written in HTML document. Hence, the code editors will treat python code as HTML plaintext. By using the extensions or other tools provided by the respective code editors, we can get syntax highlighting for py-script.

Output in Browser

Note: All the links and information provided here, are available at py-script official website https://pyscript.net/ . All the information given here is taken from the official py-script sources.

How to Use React Router Dom v6

Omkar-Ghodake — Sat, 04 Jun 2022 04:41:38 +0000

Official Documentation Link: https://reactrouter.com/docs/en/v6/getting-started/overview

Firstly, you have to install react-router-dom by using npm i react-router-dom or yarn add react-router-dom and the import the following.

import {BrowserRouter, Routes, Route} from "react-router-dom".

All the elements/components are wrapped in BrowserRouter tag. All the pages (for e.g. Home, About US, Contact Us, etc.) are then wrapped in Routes tag. They are going to be the routes amongst which we can navigate. Then the layouts (for e.g. Navbar, Footer, etc.) are wrapped inside the BrowserRouter but outside the Routes tag because they are same for all pages or routes. Then all the components/elements inside the Routes tag are written as follows:

<Route element={Home} path="/" />

Unlike react-router-dom v5, there is no need to specify exact path for the element.

Example Code:
Suppose, there are 3 pages: Home, AboutUs, ContactUs
and 2 layouts: Navbar, Footer

1. Creating routes in App.js

<BrowserRouter>
    <Navbar/>
    <Routes>
        <Route element={<Home/>} path="/" />
        <Route element={<AboutUs/>} path="/aboutUs" />
        <Route element={<ContactUs/>} path="/contactUs" />
    <Routes>
    <Footer />
<BrowserRouter/>

2. Links in React

The apps built without react, uses anchor tag to create hyperlinks as shown below.

<a href="">Link text</a>

This method works in react but using anchor tags leads to whole page refresh, which is undesirable. Instead, only some part of the page which is needed to be updated should be changed. react-router-dom helps to achieve this type of routing. In react we use <Link to=""> </Link> instead of <a href=""> </a>. Note that href is replaced by to. In short, if the website uses same layouts such as navbar or footer, then only the body of the pages are re-rendered.

3. Redirecting in react-router-dom v6

There are two ways to redirect in react-router-dom v6. First you can redirect to any path from the routes page where all the routes are written and second one is you can redirect from any component/element.

Redirecting from a path: First:

import {Navigate} from "react-router-dom"

You just have to add following code to the

<Router path="/redirect" element={<Navigate to="/" replace } />

In this case, when you'll hit the path "/redirect" it will automatically redirect to path "/". If you replace path (i.e. "/redirect") by "*", then any it will redirect to "/" on any path excluding the <Routes /> (i.e. "/home", "/aboutUs", "contactUs") we made.

Redirecting from a component/element: This can be achieved by using useNavigation hook. First:

import {useNavigate} from "react-router-dom";

Then initialize the function by:

const navigate = useNavigate();

Then we can use this variable navigate to navigate or redirect to any path.
Now simply just write

navigate("/path")

This will navigate to "/path"