Forem: Eranda K.

How to use require() in ECMAScript modules

Eranda K. — Mon, 20 Jun 2022 16:12:14 +0000

ECMAScript modules are now becoming the new way of import/exporting modules in NodeJS ecosystem. This allows you to import and export modules using import statements rather than using require

Example 01

//multiple.js
const multiple = (num1, num2) => {
  return num1 * num2;
};

This can be imported as

import { multiple } from "./multiple.js";

console.log(multiple(10, 50));

Example 02 (Default Export)

Also ECMAScript modules introduces default exports which can be used as

//multiple.js
const multiple = (num1, num2) => {
    return num1 * num2;
};

export default multiple;

Can be imported as

import multiple from "./multiple.js";

console.log(multiple(10, 50));

We can't use ECMAScript modules in a NodeJS app by default. To do this there are two ways.

You need to change the file extension of the files from *.js to *.ejs
You can add "type": "module" in your package.json file

{
  "name": "ECMAScript-modules",
  "version": "1.0.0",
  "description": "",
  "type": "module", 
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Most of the modules in NodeJS now supports ECMAScript module imports. But there may be some occasions that we still want to use require.

🔴If you use require in ECMAScript module. it will throw an error.

import crypto from 'crypto'
const fs = require('fs')

Above code will throw following error.

require is not defined in ES module scope, you can use import instead.

Solution 🎉

you can use createRequire to overcome this issue. Following is a sample code how to use it.

import { createRequire } from "module";
const require = createRequire(import.meta.url);

import crypto from 'crypto'
const fs = require('fs')

You can also define this in a separate file and reuse it afterwards.

import { createRequire } from "module";
const require = createRequire(import.meta.url);

export default require;

Then this can be used as

import require from "./cjs-require.";
const crypto = require("crypto");

Hope you've enjoyed reading.

Please comment if you face any problems. I'm happy to help. Also connect with me on twitter

Hosting a Static Website on AWS S3

Eranda K. — Sat, 18 Jun 2022 23:10:00 +0000

Get Started

First we need to create the react application that we want to host on AWS S3. For the simplicity of this tutorial I'll be using the default template from create-react-app

To do this, I'll be using following command.

npx create-react-app s3-hosting-demo

It will create a simple react application with following folder structure that we can use to deploy

For the simplicity of this tutorial I will edit the App.js file a bit. I'll change the default text in the start page.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <h1>Hello World</h1>
      <h2>Hosted in s3</h2>
      </header>
    </div>
  );
}

export default App;

This will show following output in the localhost

Now Lets See, How we can host this application on S3 bucket

First login to AWS console . If you don't have an AWS account, you can register as a free tier user

After login, navigate to Amazon S3 service. Your dashboard should looks like this.

Create a new S3 bucket

Click on "Create bucket" button top right corner

Then Give a name to your s3 bucket. In this case I'll name my bucket as blog-demo-react-app. Check on AWS recommended s3 bucket naming rules

Then you need to allow public access to your s3 bucket. To do this, you need to uncheck the checkbox under Block Public Access settings for this bucket.

Then you need to acknowledge the setting by checking the following box.

Finally click on Create Bucket button under the form and your s3 bucket is created.

Add bucket policy

Once the bucket is created we need to add a bucket policy so that content inside our bucket is publicly accessible. To do this we need to navigate to the new s3 bucket just created and click on
Permissions tab.

When scrolled down a bit, we can see the place to edit the bucket policy.

Click on edit button and paste the following policy. Replace <<YOUR_BUCKET_NAME>> with the name of the bucket that you've created. Then click on "Save Changes" button on the bottom to save the policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1380877761162",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<<YOUR_BUCKET_NAME>>/*"
        }
    ]
}

Bonus

You can use AWS policy generator to generate policies to your AWS services

Enable Static site hosting

Then you need to enable Static website hosting for your s3 bucket. To do this, navigate to the Properties tab in your s3 bucket.

Then scroll to the bottom. you can see the settings for Static website hosting. Click on Edit button.

In the next screen you need to click on Enable and new set of settings will appear.

Now let's keep this for a while and move back to the react app that we've created. We'll create a production build using the following command.

npm run build

This will create a new build folder in the project root.

index.html will be the entry file for this project. Now let's move back to S3 console and add the necessary configurations.

You can also add an error document if you need. Once all the configurations are made, click on the Save Changes button on the bottom to save the changes.
Once everything is configured properly, you should be able to see the website endpoint under Static website hosting

Then navigate to the Objects tab in your S3 bucket and drag and drop the content inside ./build folder to your bucket and upload. Once the content is uploaded it should looks like this.

Then navigate to website endpoint in you web browser. You should be able to see your react application live.

Hope you have enjoyed.

Please comment if you face any problems. I'm happy to help. Also follow me on twitter

Manage Multiple Versions of Node JS using NVM

Eranda K. — Sat, 19 Feb 2022 22:32:26 +0000

If you're a node JS developer who has been working in the industry for a long time, you should have to work with different projects that use different versions of node JS. Every time you are working on such a project, are you going to uninstall and re-install the relevant version of node JS? or are you going to create separate environments for each project.

But there is an easier way now.

NVM to the rescue

Using nvm, you can install multiple node JS versions on your computer without extra effort.
NVM was created to use on Linux systems, but there is an alternative solution for Windows OS.

Linux Setup

Installing nvm on Linux is very easy. You just need to follow the installation steps mentioned in the docs

Run the following command in your Linux terminal

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

This script will automatically export and set the necessary path variables.

After the script runs successfully, open a new terminal session and type nvm . You should be able to see the nvm help page

Windows Setup

To configure nvm on windows, we can use nvm-windows library. This is pretty much similar to nvm but not the exact copy of it.

Download the latest version of nvm-windows from the releases page

After downloading install the nvm by using nvm-setup.exe

If you get a confirmation message like this, accept it. It will allow the already installed versions of node js to be managed by nvm.

Once it is successfully installed, open a new terminal session and type nvm. you should be able to see the nvm help page.

!!! IMPORTANT !!!

It is important to close any already running terminal sessions and open a new terminal to check the installation.

Remember when running nvm install or nvm use, Windows usually requires administrative rights (to create symlinks).

Basic Commands

Now lets see some basic commands that will be helpful in version management.

`nvm current`

This command will show the active node JS version.

`nvm install`

This can be used to install specific version of node JS in your computer.

Windows OS will require administrative rights to perform this action.

Examples

nvm install 17.5.0
this will install version 17.5.0 of node JS in your computer.

nvm install lts
This will install LTS version of node JS.

`nvm list`

This will show the currently installed versions of node JS.

Run nvm list available to list all available node JS versions to install.

`nvm use xx.xx.xx`

This will tell the nvm to use specific version of node JS.

Windows OS will require administrative rights to perform this action.

Example

nvm use 16.14.0
This will use specific version of 16.14.0.

Lot more commands are available in the docs.

Another good tool to manage JavaScript toolchains is volta. Let's see this in my next tutorial

Create Radio Button Group in React-Native

Eranda K. — Tue, 15 Dec 2020 19:58:09 +0000

Hello folks,

Today we're going to create a radio button example from react-native without using any third-party library.

First, create a new react native project using the following command. Please select the default template, if you are prompted to select a template.



create-react-native-app radio-button-demo

Then navigate to the project directory and start the app.



npm run ios

Your newly created app will look similar to the following.

Now Let's start working on the app to add radio buttons.

First, create two files as RadioButton.js and RadioButtonContainer.js in the root of the project directory. Your project structure will be as follows.

Our radio buttons will look like this.

Now let's create the react component for a single radio button.



export default function RadioButton() {

  return (
    <TouchableOpacity style={styles.mainContainer}>
      <View style={[styles.radioButtonIcon]}>
        <View style={[styles.radioButtonIconInnerIcon]} />
      </View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>Option A</Text>
      </View>
    </TouchableOpacity>
  );
}

Also, add the following styles to make it looks better.



const styles = StyleSheet.create({
  mainContainer: {
    height: 50,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 0.5,
    borderColor: "red",
    flexDirection: "row",
    alignItems: "center",
  },
  radioButtonIcon: {
    backgroundColor: "white",
    borderWidth: 3,
    borderColor: "red",
    height: 30,
    width: 30,
    borderRadius: 30 / 2,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIconInnerIcon: {
    height: 25,
    width: 25,
    backgroundColor: "red",
    borderRadius: 25 / 2,
    borderWidth: 3,
    borderColor: "white",
  },
  radioButtonTextContainer: {
    flex: 5,
    height: 50,
    justifyContent: "center",
    paddingLeft: 10,
  },
  radioButtonText: {
    fontSize: 18,
  },
});

Now we have a better UI for our radio button. But we need to have multiple radio buttons.

Now let's create multiple radio buttons with some dynamic data which should look exactly as follows.

For this, we need to change the code in our RadioButtonContainer.js, App.js, RadioButton.js files. Let's make those changes.

Inside your RadioButtonContainer.js file, paste the following code. I will go for a detailed explanation later on.



import React, { useState, useEffect } from "react";
import { View, Text } from "react-native";
import RadioButton from "./RadioButton";

export default function RadioButtonContainer({ values, onPress }) {
  const [currentSelectedItem, setCurrentSelectedItem] = useState(0);

  const _onPress = (idx) => {
    onPress(idx);
    setCurrentSelectedItem(idx);
  };

  const _renderRadioButtons = () => {
    return (values || []).map((listItem, idx) => {
      let isChecked = currentSelectedItem === idx ? true : false;
      return (
        <RadioButton
          key={idx}
          onRadioButtonPress={() => _onPress(idx)}
          isChecked={isChecked}
          text={listItem.text}
        />
      );
    });
  };
  return <View>{_renderRadioButtons()}</View>;
}

Now you will wonder what this {values, onPress } refers to. These will be the props passed from the parent component to this RadiobuttonContainer component. values will contain a data list for radio buttons and onPress will have a function to be called on click of each the radio button.



const [currentSelectedItem, setCurrentSelectedItem] = useState(0);

by using the above line we make sure that 1st value in the data list is checked by default.

Then we use the JS array map function to render multiple components of RadioButton.



  const _renderRadioButtons = () => {
    return (values || []).map((listItem, idx) => {
      let isChecked = currentSelectedItem === idx ? true : false;
      return (
        <RadioButton
          key={idx}
          onRadioButtonPress={() => _onPress(idx)}
          isChecked={isChecked}
          text={listItem.text}
        />
      );
    });
  };

Now you can see there are multiple props passed into the RadioButton component. Let's have a look at it.

onRadioButtonPress will be called on the press of the relevant radio button and gives the index in the data list.
isChecked will determine whether each radio button is checked or not.
text will be responsible for the text shown in the body of the radio button.



const _onPress = (idx) => {
    onPress(idx);
    setCurrentSelectedItem(idx);
  };

The above function is responsible for changing the UI in the selected radio button.onPress is the function passed from the parent component. setCurrentSelectedItem will update what is the currently checked radio button.

Now we need to pass props into our RadioButtonContainer. Let's find out how it is done.

Remove all the content in the App.js file and paste the following code.



import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";
import RadioButtonContainer from "./RadioButtonContainer";

export default function App() {
  const data = [
    {
      text: "Option A",
    },
    {
      text: "Option B",
    },
    {
      text: "Option C",
    },
    {
      text: "Option E",
    },
    {
      text: "Option F",
    },
    {
      text: "Option G",
    },
  ];

  const onRadioButtonPress = (itemIdx) => {
    console.log("Clicked", itemIdx);
  };

  return (
    <SafeAreaView>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Radio Button Demo</Text>
      </View>

      <RadioButtonContainer values={data} onPress={onRadioButtonPress} />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
  },
  text: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

data is an object array, which is used to pass options for radio buttons. but you can use any array here which includes the text property in each object.
onRadioButtonPress will be called on each click of the radio button with the selected index as a parameter.

Next, We need to make some changes in our RadioButton.js file in order to align with the latest changes.
First of all, we need to catch all the props from the parent component.



export default function RadioButton()

change the above line to



export default function RadioButton({ isChecked, text, onRadioButtonPress })

in order to catch props from the parent component. Also, change the return code in the RadioButton from



  return (
    <TouchableOpacity style={styles.mainContainer}>
      <View style={[styles.radioButtonIcon]}>
        <View style={[styles.radioButtonIconInnerIcon]} />
      </View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>Option A</Text>
      </View>
    </TouchableOpacity>
  );

to this



  const _renderCheckedView = () => {
    return isChecked ? (
      <View style={[styles.radioButtonIconInnerIcon]} />
    ) : null;
  };

  return (
    <TouchableOpacity style={styles.mainContainer} onPress={onRadioButtonPress}>
      <View style={[styles.radioButtonIcon]}>{_renderCheckedView()}</View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>{text}</Text>
      </View>
    </TouchableOpacity>
  );

After doing all those changes, Your RadioButton.js file looks like this.



import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

export default function RadioButton({ isChecked, text, onRadioButtonPress }) {
  const _renderCheckedView = () => {
    return isChecked ? (
      <View style={[styles.radioButtonIconInnerIcon]} />
    ) : null;
  };

  return (
    <TouchableOpacity style={styles.mainContainer} onPress={onRadioButtonPress}>
      <View style={[styles.radioButtonIcon]}>{_renderCheckedView()}</View>
      <View style={[styles.radioButtonTextContainer]}>
        <Text style={styles.radioButtonText}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    height: 50,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    borderWidth: 0.5,
    borderColor: "red",
    flexDirection: "row",
    alignItems: "center",
  },
  radioButtonIcon: {
    backgroundColor: "white",
    borderWidth: 3,
    borderColor: "red",
    height: 30,
    width: 30,
    borderRadius: 30 / 2,
    marginRight: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIconInnerIcon: {
    height: 25,
    width: 25,
    backgroundColor: "red",
    borderRadius: 25 / 2,
    borderWidth: 3,
    borderColor: "white",
  },
  radioButtonTextContainer: {
    flex: 5,
    height: 50,
    justifyContent: "center",
    paddingLeft: 10,
  },
  radioButtonText: {
    fontSize: 18,
  },
});

After following all the above steps, you should have a nice looking radio button group.

Create Routing App Coverage file for apple app store submission

Eranda K. — Tue, 08 Dec 2020 21:34:52 +0000

If you're an iOS developer who loves creating apps, Somewhere in your development career, you might have developed apps that need to restrict the areas that your app is supporting.

According to apple's AppStore guidelines,
If your app uses location to provide routing information, you must supply a geographic coverage file before submitting your app to App Review.

Now let's find out how to create a Routing App Coverage file. For this, we have to use this awesome tool called http://geojson.io

Step 01

When you first navigate to it, it will look similar to this.

Step 02

Then select an area that you want your app to support.

After selecting the area it should look like this.

Generated JSON should look likes this.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              79.508056640625,
              5.8127569137510084
            ],
            [
              82.0458984375,
              5.8127569137510084
            ],
            [
              82.0458984375,
              10.077037154404719
            ],
            [
              79.508056640625,
              10.077037154404719
            ],
            [
              79.508056640625,
              5.8127569137510084
            ]
          ]
        ]
      }
    }
  ]
}

But we don't want all of these. You just need the data inside the geometry object. Extract the geometry object so that your JSON should look as follows.

{
  "type": "Polygon",
  "coordinates": [
    [
      [
        79.508056640625,
        5.8127569137510084
      ],
      [
        82.0458984375,
        5.8127569137510084
      ],
      [
        82.0458984375,
        10.077037154404719
      ],
      [
        79.508056640625,
        10.077037154404719
      ],
      [
        79.508056640625,
        5.8127569137510084
      ]
    ]
  ]
}

Below you can find apple's guidelines for creating a Routing App Coverage file.

Define as specific a region as possible. For example, if your app provides subway route information only for New York, you don’t want it to receive requests to provide directions in London. The more specific the region you define, the more likely your app will appear in the search results.

Keep your regions simple and don’t try to trace precise routes around a given geographic area. It’s recommended that each polygon contain no more than 20 points. Using more coordinates to define a region is possible but is inefficient and usually unnecessary. The system has to determine whether a given point is inside one of your polygons, and it’s cheaper to make that determination against a rectangle or other simple shape than it is against a shape with hundreds of points.

Limit the number of child polygons in your MultiPolygon shape to 20 or fewer.
Use only MultiPolygon shapes in your app’s coverage file. Although the GeoJSON specification supports other types of shapes, only MultiPolygon shapes are supported for routing apps.

Don’t include comments in your coverage file.
Specify all coordinates as a longitude value followed by a latitude value.
Don’t include holes in the polygons in your coverage files. Although holes are supported by the GeoJSON specification, they are not supported in Apple’s map implementation.

According to the above guidelines, we can only have MultiPolygon elements inside our .geojson file. So we need to change the Polygon to MultiPolygon. This allows for multiple geographical areas to support our app.
When we change from Polygon to MultiPolygon, We need to modify our data too.

Our coordinates should be changed as follows,

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [Polygon 1 data],
        [Polygon 2 data],
        ................
        [Polygon N data]
      ]
    ]
  ]
}

After we modify our data as above, we should have something as follows,

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [
          79.508056640625,
          5.8127569137510084
        ],
        [
          82.0458984375,
          5.8127569137510084
        ],
        [
          82.0458984375,
          10.077037154404719
        ],
        [
          79.508056640625,
          10.077037154404719
        ],
        [
          79.508056640625,
          5.8127569137510084
        ]
      ]
    ]
  ]
}

Note: The start point and the ending point of the polygon needs to be the same.

Voila!

Now you can copy this JSON and create a file with the extension .geojson and upload it to the apple app store review.

This was originally published here