DEV Community: SilvenLEAF

RSA Encryption Decryption

SilvenLEAF — Fri, 20 Oct 2023 08:41:43 +0000

RSA Encryption Decryption

How does this work?

[x] generate SECRET_KEY and PUBLIC_KEY key pair to encrypt decrypt files
[x] share this PUBLIC_KEY of your SECRET_KEY to the decrypter machine
[x] encrypt the data on encrypter machine using the given PUBLIC_KEY of the decrypter
[x] send this encrypted file to the decrypter machine
[x] decrypt the file using the SECRET_KEY of your given PUBLIC_KEY on decrypter machine

Decrypter Machine

[x] generate SECRET_KEY and PUBLIC_KEY key pair using this function

const  fs  =  require("fs");
const  crypto  =  require("crypto");

const  keyPair  =  crypto.generateKeyPairSync("rsa", {
modulusLength: 4096, // bits - standard for RSA keys
publicKeyEncoding: {
type: 'pkcs1', // "public key cryptography standards 1"
format: 'pem'  // most common formatting choice
},
privateKeyEncoding: {
type: 'pkcs1', // "public key cryptography standards 1"
format: 'pem'  // most common formatting choice
}
});

fs.writeFileSync(publicKeyLoc, keyPair.publicKey);
fs.writeFileSync(privateKeyLoc, keyPair.privateKey);

[x] share the PUBLIC_KEY to the encrypter machine

Encrypter Machine

[x] encrypt the data using the given PUBLIC_KEY of the decrypter machine

const  fs  =  require("fs");
const  crypto  =  require("crypto");

const  publicKey  =  fs.readFileSync(publicKeyFileLocation, "utf8");
const  encryptedBuffer  =  crypto.publicEncrypt(publicKey, Buffer.from(fileBuffer));

share this encrypted file to your decrypter machine

Decrypter Machine

[x] decrypt the file

const  fs  =  require("fs");
const  crypto  =  require("crypto");

const  privateKey  =  fs.readFileSync(privateKeyFileLocation, "utf8");
const  keyOptions  =  { key: privateKey  };
const  decryptedBuffer  =  crypto.privateDecrypt(keyOptions, Buffer.from(fileBuffer));
const decryptedText =  decryptedBuffer.toString("utf8");

yippie banzai we did it!

GPG/PGP Encryption Decryption

SilvenLEAF — Tue, 26 Sep 2023 12:24:54 +0000

GPG Encryption Decryption

How does this work?

[x] generate SECRET_KEY to encrypt files
[x] share this SECRET_KEY to decrypter machine
[x] import this SECRET_KEY on encrypter machine
[x] encrypt file using this SECRET_KEY
[x] send this encrypted file to the decrypter machine
[x] decrypt the file using the SECRET_KEY on decrypter machine

Decrypter Machine

[x] generate gpg key using this command

gpg --gen-key

or use this command

gpg --full-gen-key

[x] list out your keys using this command

gpg --list-keys

[x] export your key using this command (to send to encrypter)

gpg --export -a YOUR_KEY_ID > YOUR_FILE_NAME.asc

This will generate a file. You can share this file to the Encrypter Machine. They'll import this key and encrypt the file using this key which you can later on decrypt on your machine.

Encrypter Machine

[x] import the SECRET_KEY of the decrypter

gpg --import YOUR_SECRET_KEY_FILE_NAME.asc

[x] list out your keys using this command

gpg --list-keys

[x] encrypt the pgp file

gpg --encrypt --recipient SECRET_KEY_ID --output ENCRYPTED_FILE FILE_TO_ENCRYPT

share this encrypted file to your decrypter machine

Decrypter Machine

[x] decrypt the file

 gpg --decrypt --recipient SECRET_KEY_ID --passphrase YOUR_PASSWORD --output DECRYPTED_FILE ENCRYPTED_FILE

yippie banzai we did it!

Async Storage in PURE React Native

SilvenLEAF — Fri, 06 May 2022 01:41:43 +0000

Let's learn how to integrate Async Storage with PURE React Native.

Step 1: Install async storage

First let's install async storage with the following command

npm i @react-native-async-storage/async-storage

Async storage is similar to Local storage but it is meant for the apps whereas Local storage is for the web.

Step 2: CRUD with async storage

Async Store (Helper file)

import AsyncStorage from "@react-native-async-storage/async-storage";

// Storing Data
const storeData = async (storageKey: string, value: any) => {
  try {
    const jsonValue = typeof value === 'string' ? value : JSON.stringify(value);
    await AsyncStorage.setItem(storageKey, jsonValue);

    return { msg: `Saving successful` };
  } catch (error) {
    // saving error
    console.log(error);
    return { error: true, msg: `Saving failed` };
  }
}

// Getting Data
const getStringValue = async (storageKey: string) => {
  try {
    const value = await AsyncStorage.getItem(storageKey)
    return value
  } catch (error) {
    // error reading value
    console.log(error);
  }
}
const getObjectValue = async (storageKey: string) => {
  try {
    const jsonValue = await AsyncStorage.getItem(storageKey)
    return jsonValue !== null ? JSON.parse(jsonValue) : null;
  } catch (error) {
    // error reading value
    console.log(error);
  }
}

// Updating Data
const updateObjectData = async (storageKey: string, value: any) => {
  try {
    const jsonValue = typeof value === 'string' ? value : JSON.stringify(value);
    await AsyncStorage.mergeItem!(storageKey, jsonValue);

    const newData = typeof value === 'string' ? await getStringValue(storageKey) : await getObjectValue(storageKey);

    return { msg: `Updating successful`, data: newData };
  } catch (error) {
    // updating error
    console.log(error);
    return { error: true, msg: `Updating failed` };
  }
}
const upsertObjectData = async (storageKey: string, value: any) => {
  try {
    const jsonValue = typeof value === 'string' ? value : JSON.stringify(value);
    const oldValue = await AsyncStorage.getItem(storageKey);

    if (oldValue === null) {
      await storeData(storageKey, value);
    } else {
      await AsyncStorage.mergeItem!(storageKey, jsonValue);
    }

    const newData = typeof value === 'string' ? await getStringValue(storageKey) : await getObjectValue(storageKey);

    return { msg: `Updating successful`, data: newData };
  } catch (error) {
    // upserting error
    console.log(error);
    return { error: true, msg: `Updating failed` };
  }
}

// Remove Data
const removeData = async (storageKey: string) => {
  try {

    await AsyncStorage.removeItem(storageKey);
    return { msg: `Removing successful` };

  } catch (error) {
    // removing error
    console.log(error);
    return { error: true, msg: `Removing failed` };
  }
}


// MUTLI FUNCS
const multiGetData = async (storageKeys: string[]) => {
  try {

    const valuesArray = await AsyncStorage.multiGet(storageKeys)
    return valuesArray;

  } catch (error) {
    // multi getting error
    console.log(error)
  }
}
const multiSetData = async (keyValueArray: [string,string][]) => {
  try {
    /*
      keyValueAray: [
       ["@MyApp_user", "value_1"],
       ["@MyApp_user", "value_1"]
     ]
    */
    const valuesArray = await AsyncStorage.multiSet(keyValueArray)
    return valuesArray;

  } catch (error) {
    console.log(error)
  }
}
const multiUpdateData = async (keyValueArray: [string,string][], value: any) => {
  try {
    /*
      keyValueAray: [
       ["@MyApp_user", "value_1"],
       ["@MyApp_user", "value_1"]
     ]
    */

    await AsyncStorage.multiMerge!(keyValueArray);
    const keys = keyValueArray.map(item => item[0]);
    const newMultiData = await multiGetData(keys);

    return { msg: `Updating successful`, data: newMultiData };
  } catch (error) {
    // multi updating error
    console.log(error);
    return { error: true, msg: `Updating failed` };
  }
}
const multiRemoveData = async (storageKeys: string[]) => {
  try {

    await AsyncStorage.multiRemove(storageKeys)
    return { msg: `Removing successful` };

  } catch (error) {
    // multi removing error
    console.log(error);
    return { error: true, msg: `Removing failed` };
  }
}

// SPECIALS
const getAllStorageKeys = async () => {
  try {

    const keys = await AsyncStorage.getAllKeys()
    return keys;

  } catch (error) {
    // read key error
    console.log(error)
  }
}
const clearStore = async () => {
  try {
    await AsyncStorage.clear();
    return { msg: `Store clearing successful` };
  } catch (error) {
    // clearing error
    console.log(error);
    return { error: true, msg: `Store clearing failed` };
  }
}

export const AsyncStoreKeyMap = {
  appSettings: 'appSettings',
  userProfile: 'userProfile',
  userProgress: 'userProgress',
}

const AsyncStore = {
  storeData,
  getStringValue, getObjectValue,
  updateObjectData, upsertObjectData,
  removeData,

  multiSetData,
  multiGetData,
  multiUpdateData,
  multiRemoveData,

  getAllStorageKeys,
  clearStore,
};

export default AsyncStore;

Step 3: How to use?

import AsyncStore, { AsyncStoreKeyMap } from '../../../utils/AsyncStore';

AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { themeColor: color });
AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { isDarkTheme: !props.isDarkTheme });
AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { isSoundOn: !props.isSoundOn });

How to use with Redux in a React Native Component?

// ___________________ root
import React from 'react';
import { connect } from 'react-redux';
import { NavigationProp } from '@react-navigation/native';

// ___________________ helpers
import Toast from 'react-native-toast-message';
import { rootVariables } from '../../rootStyles/variables';

// ___________________ async store
import AsyncStore, { AsyncStoreKeyMap } from '../../../utils/AsyncStore';

// ___________________ redux store
import { IRootState } from '../../store/store';
import { IAppSettingState } from '../../store/reducers/appSettingsReducer';

import appSettingsActions from '../../store/actions/appSettingsAction';
import userProgressActions from '../../store/actions/userProgressAction';



interface propsInterface extends IAppSettingState {
  navigation: NavigationProp<any>,
  app: {
    updateThemeColor: typeof appSettingsActions.updateThemeColor,
    updateIsDarkTheme: typeof appSettingsActions.updateIsDarkTheme,
    updateIsVibrationOn: typeof appSettingsActions.updateIsVibrationOn,
    updateIsSoundOn: typeof appSettingsActions.updateIsSoundOn,
    resetDefault: typeof appSettingsActions.resetDefault,
  },
  progress: {
    updateRank: typeof userProgressActions.updateRank,
    updateLevel: typeof userProgressActions.updateLevel,
    updateXP: typeof userProgressActions.updateXP,
    resetDefault: typeof userProgressActions.resetDefault,
  },
}



function SettingScreen(props: propsInterface) {
  const updateThemeColor = async (color: string) => {
    props.app.updateThemeColor(color);
    AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { themeColor: color });
  }

  const updateIsDarkTheme = async () => {
    props.app.updateIsDarkTheme(!props.isDarkTheme);
    AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { isDarkTheme: !props.isDarkTheme });
  }

  const updateIsSoundOn = async () => {
    props.app.updateIsSoundOn(!props.isSoundOn);
    AsyncStore.upsertObjectData(AsyncStoreKeyMap.appSettings, { isSoundOn: !props.isSoundOn });
  }


  const handleResetDefault = () => {
    props.app.resetDefault();
    AsyncStore.removeData(AsyncStoreKeyMap.appSettings);

    Toast.show({
      type: 'success',
      text1: 'Restore Default Successful',
      text2: 'Restore all default settings',
      topOffset: rootVariables.toastTopOffset,

    })
  }

  const handleResetProgress = () => {
    props.progress.resetDefault();
    AsyncStore.removeData(AsyncStoreKeyMap.userProgress);

    Toast.show({
      type: 'success',
      text1: 'Reset Progress Successful',
      text2: 'Reset all of your progress',
      topOffset: rootVariables.toastTopOffset,
    })
  }

  return (
    <SettingScreen/>
  );
}


const mapStateToProps = (state: IRootState) => {
  return {
    ...state.app,
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    app: {
      updateThemeColor: (color: string) => dispatch(appSettingsActions.updateThemeColor(color)),
      updateIsDarkTheme: (isDarkTheme: boolean) => dispatch(appSettingsActions.updateIsDarkTheme(isDarkTheme)),
      updateIsVibrationOn: (isVibrationOn: boolean) => dispatch(appSettingsActions.updateIsVibrationOn(isVibrationOn)),
      updateIsSoundOn: (isSoundOn: boolean) => dispatch(appSettingsActions.updateIsSoundOn(isSoundOn)),
      resetDefault: () => dispatch(appSettingsActions.resetDefault()),
    },

    progress: {
      updateRank: (rank: string) => dispatch(userProgressActions.updateRank(rank)),
      updateLevel: (level: number) => dispatch(userProgressActions.updateLevel(level)),
      updateXP: (xp: number) => dispatch(userProgressActions.updateXP(xp)),
      resetDefault: () => dispatch(userProgressActions.resetDefault()),
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SettingScreen)

NEXT blog is coming by May 27th

What's NEXT?

1. Scrolling with PURE React Native

2. Project with Pure React Native

3. More on App Development

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Redux in PURE React Native

SilvenLEAF — Thu, 05 May 2022 15:33:46 +0000

Let's learn how to integrate Redux with PURE React Native!!

TL;DR

[x] Create store (from reducers)
[x] Use store (on our lovely app)
[x] Create actions
[x] Map state to props
[x] Map action to props

Tales of Redux: Legends untold

Before we dive in depth, let's learn the main concept with a sweet analogy. Store is a storehouse or a warehouse and it is a really big shed, we can keep rice, corns, maize etc. Reducers are like robots that act to manage this store. They are the caretakers of this place. If we want to retrieve or put or remove some stuff from or to this place they'll help us out. We write some commands in a letter and optionally pass the stuff as well. They will read this letter and get the stuff that we pass and will act accordingly to our letter. This letter is called actions. Now let's say, we write a letter saying, please put these 7 maizes on the store as well. Putting these maizes is the action and the 7 maizes that we passed along with this letter are called payload. Now to remember, state is the stuff we store, action is the letter of command that we dispatch a.k.a send to the bots to act upon. Hope this helps. Now let's get to the fun stuff :)

Install the packages

First let's install all the required packages

npm i redux react-redux @reduxjs/toolkit

CHAPTER 1: Create store

We'll keep everything Redux related in a single folder to keep everything organized. So let's start.

First let's create the store. A store is a collection of reducers, the bots, who manage their own part of the warehouse. Each contain a storage also known as state (or initState) and action handler.

In simple words, reducer is a collection of if statements based on actions performing on initState. Whatever we return from the reducer function (normally based on if statements) becomes the new/updated state of that reducer.

Create Store

/* ----------------------
.       method 1
---------------------- */
import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {
    app: appSettingsReducer,
    progress: userProgressReducer,
    user: userProfileReducer,
  }
})

export interface IRootState {
  app: IAppSettingState,
  progress: IUserProgressState,
  user: IUserProfileState,
}




/* ----------------------
.       method 2
---------------------- */
import { combineReducers, createStore } from "redux";

const rootReducer = combineReducers({
  app: appSettingsReducer,
  progress: userProgressReducer,
  user: userProfileReducer,
});

export const store = createStore(rootReducer)

export interface IRootState {
  app: IAppSettingState,
  progress: IUserProgressState,
  user: IUserProfileState,
}

Create Reducer

export interface IAppSettingState {
  themeColor: string,
  isSoundOn: boolean,
  isVibrationOn: boolean,
  isDarkTheme: boolean,
  isTutorialShown: boolean,
}

const initState: IAppSettingState = {
  themeColor: 'red',
  isSoundOn: true,
  isVibrationOn: true,
  isDarkTheme: false,
  isTutorialShown: true,
}

export const appSettingsReducerTypes = {
  updateThemeColor: 'UPDATE_THEME_COLOR',
  updateIsDarkTheme: 'UPDATE_IS_DARK_THEME',
}

interface IAction {
  type: string,
  payload?: any,
}

const appSettingsReducer = (state = initState, action: IAction) => {
  switch (action.type) {
    case appSettingsReducerTypes.updateThemeColor:
      return {
        ...state,
        themeColor: action.payload,
      };

    case appSettingsReducerTypes.updateIsDarkTheme:
      return {
        ...state,
        isDarkTheme: action.payload,
      };
    default:
      return state;
  }
}

export default appSettingsReducer;

CHAPTER 2: Use store

Import this store that we created on your entry file and use it

import React from 'react';

import { Provider } from 'react-redux';
import { store } from './app/store/store';

export default function App() {
  return (
    <Provider store={store}>
      <RootDrawer />
    </Provider>
  );
}

CHAPTER 3: Create actions

Action is nothing but a function that returns an object containing "type" and "payload" properties. Reducers do their if statements on this object. This object is the action for that reducer.

Action functions optionally take payload as an argument and return it in the payload.

import { appSettingsReducerTypes } from "../reducers/appSettingsReducer";

export const updateThemeColor = (color: string)=>{
  return {
    type: appSettingsReducerTypes.updateThemeColor,
    payload: color,
  }
}

export const updateIsDarkTheme = (isDarkTheme: boolean)=>{
  return {
    type: appSettingsReducerTypes.updateIsDarkTheme,
    payload: isDarkTheme,
  }
}

const appSettingsActions = {
  updateThemeColor,
  updateIsDarkTheme,
}

export default appSettingsActions;

CHAPTER 4: Map state and action to props

import React from 'react'

import { NavigationProp } from '@react-navigation/native';
import { connect } from 'react-redux';

import { IRootState } from '../../../store/store';
import { IAppSettingState } from '../../../store/reducers/appSettingsReducer';
import { IUserProgressState } from '../../../store/reducers/userProgressReducer';
import userProgressActions from '../../../store/actions/userProgressAction';

interface propsInterface extends IAppSettingState, IUserProgressState {
  navigation: NavigationProp<any>,

  progress: {
    updateRank: typeof userProgressActions.updateRank,
    updateLevel: typeof userProgressActions.updateLevel,
    updateXP: typeof userProgressActions.updateXP,
  },
}


function ActionScreen(props: propsInterface) {
  return (
    <HomeScreen/>
  );
}

const mapStateToProps = (state: IRootState) => {
  return {
    ...state.app,
    ...state.progress,
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    progress: {
      updateRank: (rank: string) => dispatch(userProgressActions.updateRank(rank)),
      updateLevel: (level: number) => dispatch(userProgressActions.updateLevel(level)),
      updateXP: (xp: number) => dispatch(userProgressActions.updateXP(xp)),
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ActionScreen)

Chapter 5: Integrating Async Storage

Stay tuned for the VERY NEXT Blog :) It's gonna be a BLAST

What's NEXT?

1. Async Storage with Pure React Native

2. Project with Pure React Native

3. More on App Development

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Navigation in PURE React Native

SilvenLEAF — Thu, 05 May 2022 09:15:31 +0000

Let's learn Navigation in PURE React Native System!!

CHAPTER I: Root set up

Let's set up our core configurations for react native navigation

Step 1: Install "@react-navigation/native"

First of all, install the core package of react navigation

npm install @react-navigation/native

Now what?

Step 2: Install core utility packages

We will now install the core two utility packages for react native navigation. These are "react-native-screens" and "react-native-safe-area-context"

(If expo, install them using expo, if not, install them using npm)

npm install react-native-screens react-native-safe-area-context

Now for pure react native apps, "react-native-screens" package requires one additional configuration step to properly work on Android devices. This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts. What and How?

(For PURE React Native)
Edit "MainActivity.java" file which is located in "android/app/src/main/java/{Your_package_name}/MainActivity.java". Add the following code to the body of the "MainActivity" class

@Override  
protected void onCreate(Bundle savedInstanceState) {  
super.onCreate(null);  
}

And make sure to add an "import" statement at the top of this file

import android.os.Bundle;

Step 3: Wrapping our App in NavigationContainer

Finally, let's wrap our app in NavigationContainer

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './NeiXin/screens/HomeScreen';

const App = () => {
  return (
    <NavigationContainer>
      <HomeScreen/>
    </NavigationContainer>
  );
};

export default App;

CHAPTER II: Utility set up

Let's learn how to set up drawer and/or stack navigator.

Step 1: Install utility packages

You need to install "react-native-gesture-handler" and "react-native-reanimated" utility packages. It's same for all (drawer, stack and tab) navigators! Let's install them
(If expo, install them using expo, if not, install them using npm)

npm install react-native-gesture-handler react-native-reanimated

Now for PURE React Native Apps, we need to put this following line at the extreme top of our entry file (for me it is App.tsx file). We have to make sure it's at the top and there's nothing else before it

import 'react-native-gesture-handler';

Great we finished the utility set up. Let's now install the core packages depending on our Navigators :)

Step 2: Reanimated 2 configuration

For PURE React Native app, you might get an error related to "Reanimated 2" . For this we need to configure it properly. How? Let's tag along!

(for more info check this one out reanimated 2 configuration)

Part 1:

In babel.config.js add this
(NOTE: Reanimated plugin has to be listed last)

  module.exports = {
      ...
      presets: [...],
      plugins: [
          ...
          'react-native-reanimated/plugin' //make sure this is always the last line
      ],
  };

Part 2: Turn on Hermes engine

Turn on Hermes engine by editing "android/app/build.gradle"

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

Part 3: Update MainApplication.java

Update the "android/app/main/java/{Your_package_name}/MainApplication.java"

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override //find these four lines, these already exist, we need to add the next 4 lines after these four lines
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override //add these four lines after the above four lines
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage();
      }
    };
  ...

You can refer to this diff that presents the set of the above changes made to a fresh React Native project.

Part 4: Try running

Try running your app, if still get the error, remove the cache using this command

npx react-native start --reset-cache

It'll restart your app removing the cache. Now optionally you can stop it and restart your app with this command

npm run android

Hope it helps :)

CHAPTER III: Specific Navigators

Let's learn how to use Drawer, Stack and Tab navigators. We'll install our specific navigators with this command

(If Drawer Navigation)

npm install @react-navigation/drawer

(If Stack Navigation)

I prefer this because it is said to be significantly more customizable

npm install @react-navigation/stack

[OR]
I don't prefer it much because it is said to be inpractible to impossible to customize a lot of things

npm install @react-navigation/native-stack

(If Bottom Tab Navigation)

npm install @react-navigation/bottom-tabs

Drawer Navigation

const Drawer = createDrawerNavigator();
function RootDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home Page" component={HomeScreen}/>
      <Drawer.Screen name="About Page" component={AboutScreen}/>
    </Drawer.Navigator>
  )
}

Stack Navigation

const Stack = createStackNavigator();
function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home Page" component={HomeScreen}/>
      <Stack.Screen name="About Page" component={AboutScreen}/>
    </Stack.Navigator>
  )
}

Bottom Tabs Navigation

const Tab = createBottomTabNavigator();
function RootBottomTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home Page" component={HomeScreen}/>
      <Tab.Screen name="About Page" component={AboutScreen}/>
    </Tab.Navigator>
  )
}

What's NEXT?

1. Async Storage with Pure React Native

2. Project with Pure React Native

3. More on App Development

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Generate apk for PURE React Native

SilvenLEAF — Sat, 23 Apr 2022 14:22:28 +0000

When building apps with Expo, it takes most of the hardwork out for you. So to create an apk for your app it is just a one line command

expo build:android -t apk

But for PURE React Native App it's a little bit more fun than just that. How? Let's find it out together!!

(Refer to this link it is the BEST)
https://instamobile.io/android-development/generate-react-native-release-build-android/

Step 1: generating .keystore file

Run this following command to create a ".keystore" file for your build

keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

I normally prefer to have my key name same as my app name but you can name it anything whatever you prefer :)

After running the above command you will be prompted with lots of questions from your beloved terminal. Answer each of the carefully and REMEMBER the password, you'll need it later (esp the last one but we'll keep them all same so we'll consider it all one password)

As a result of the previous command, it generates a key-store file on your project directory named "youre_key_name.keystore" valid for 10000 days. Most importantly, back up this keystore file and its credentials (store password, alias, and alias password) which will be required later.

Step 2: adding the .keystore file to your project

Firstly, you need to copy the file your_key_name.keystore and paste it under the "android/app" directory in your React Native project folder.

You can use the following command from your terminal

mv my-release-key.keystore /android/app

Now open your "android/app/build.gradle" file and add the following keystore configuration.

android {
  ....
    signingConfigs {
      release {
        storeFile file('your_key_name.keystore')
        storePassword System.console().readLine("\nKeystore password:")
        keyAlias System.console().readLine("\nAlias: ")
        keyPassword System.console().readLine("\Alias password: ")
      }
    }
    buildTypes {
      release {
        ....
        signingConfig signingConfigs.release
      }
    }
}

With this you'll get prompted for passwords when you run the apk build command. Make sure the "signingConfigs" block appears before "buildTypes" block to avoid unnecessary errors. Moreover, before going any further, make sure you have an assets folder under "android/app/src/main/assets". If it’s not there, create one. Now we are ready to generate the apk

Step 3: generate apk

First run this following command to build the bundle

react-native  bundle  --platform  android  --dev  false  --entry-file  index.js  --bundle-output  android/app/src/main/assets/index.android.bundle  --assets-dest  android/app/src/main/res/

Note: If you have a different entry file name, like "index.android.js", change it within the command.

Now go inside "android" folder with this command

cd android

Then run the following command to generate the apk
(for Windows)

gradlew assembleRelease

(for Linux or Mac)

./gradlew assembleRelease

OR run this single command from root

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/release/ && rm -rf android/app/src/main/res/drawable-* && rm -rf android/app/src/main/res/raw/* && cd android && ./gradlew assembleRelease && cd ..

As a result, the APK creation process is done. You can find the generated APK at "android/app/build/outputs/apk/app-release.apk". This is the actual app, which you can send to your phone or upload to the Google Play Store. Congratulations, you’ve just generated a React Native Release Build APK for Android.

What's NEXT?

1. Project with Pure React Native

2. More on App Development

3. How to generate apk with pure React Native

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Create app with PURE React Native

SilvenLEAF — Sat, 23 Apr 2022 02:30:25 +0000

Let's embark on the beautiful adventure of App Development!! Did you have enough of Expo and dying desperately for Pure React Native!! Then let's leap off!! The first and biggest challenge I've been facing while transitioning from Expo is to set up the environment for Pure React Native! So fear you not!! This time we'll kill it together!! For Pure React Native project based blogs and more stay tuned!! Coming soon!! This is a NEVER ENDING SERIES :)

Set up React Native Environment

We have to do this only one time on our machine. We need to set up our development environment.

(Refer to this link it's the BEST)
ReactNative.dev/docs/environment-setup

[x] Install NodeJs and Java SDK
[x] Install Android Studio
[x] Configure ANDROID_HOME env variable
[x] Add platform-tools to path
[x] Create React Native App and ENJOY :)

Step 1: Install NodeJs and Java SDK

Considering you already have NodeJs installed because well we are NodeJs maniacs right? Just make sure you are using version 14 or above. I'd recommend having nvm :). Anyway, so the only thing we need to install now is the Java SDK or JDK for short.

We'll be doing it using "Chocolatey". How to install it? Refer to above link. Once done, open your powershell or cmd as an administrator and let's install JDK with this following command

choco install -y openjdk11

Once done let's install Android studio from the above mentioned link. Why? Because if installed from the above link, it'll have all our desired configurations as default.

Step 2: Adding Env and Path variables

Username=SilvenLEAF

ANDROID_HOME=C:\Users\{Username}\AppData\Local\Android\Sdk
PATH=C:\Users\{Username}\AppData\Local\Android\Sdk\platform-tools

Open Windows Control Panel > User Accounts > User Accounts > Change my environment variables

Now for ANDROID_HOME click on New and add this above mentioned key value pair

Now for PATH, click the Path variable, then click edit and then click New and add the above value.

Great now we are ready to create React Native Apps and enjoy the delicacy of developing apps :)

Step 3: Create React Native App

Type this following command to create React Native App

npx react-native init YOUR_APP_NAME --template react-native-template-typescript

It'll create your typescript react native app. Open the created app in VS Code or Android Studio (which is more or less VS Code) and enjoy developing (from here it's all like react, know the basics, google, use react-native-paper, etc etc the same old lovely loop)

Now to start the app

npm run android

react-native run-android

BONUS STEP: How to run it on your physical phone

(Only for the first time) Open your phone settings and go to about phone and find the Build number section. (If not sure, google it for your model). For Realme It is in Settings > About Phone > Version > Build number.

Click on it 7 times (or keep clicking until you get the prompt) and it'll make the Developer options appear.

Go there. For real me it will appear on Settings > Additional Settings > Developer options.

After opening it select USB debugging toggle on. This will allow you to let your app hosted on your localhost of your Developing Machine (your PC or Laptop) connect to your phone.

(Whenever you want to connect your phone) Connect your phone to your Developing Machine with an USB and start your react native app

npm run android

react-native run-android

It will open your app on your phone :)
Enjoy!!!

SUPER BONUS: React Native Paper

If using pure react native, first install these

npm i react-native-vector-icons

If using typescript, add this type as well

npm install -D @types/react-native-vector-icons

And then use this command

react-native link react-native-vector-icons

Install react native paper

npm install react-native-paper

Meta BONU: Toast

Install "react-native-toast-message" package

npm i react-native-toast-message

Now use its component in your App.tsx file so that we can use it in our app. So your App.tsx file will look something like this

import 'react-native-gesture-handler'; // this must be on extreme top of this file

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './NeiXin/store/store';

import RootDrawer from './NeiXin/navigation/RootDrawer';
import Toast from 'react-native-toast-message';

const App = () => {
  return (
    <Provider store={store}>
      <RootDrawer />
      <Toast />
    </Provider>
  );
};

export default App;

Giga BONUS: JSON TREE

Install this package for displaying your storage with a JSON tree

npm i react-native-json-tree

Tera BONUS: Vibration

Now import components and enjoy using :)

How to use Vibration API? First we need to allow permission for that by adding this following line to the "AndroidManifest.xml" file

<uses-permission android:name="android.permission.VIBRATE"/>

Now to use it on your app, simply import it from "react-native" and call it like this

...
import { Vibration} from 'react-native';
...
onPress = ()=>{ Vibration.vibrate(); }
...

What's NEXT?

1. Project with Pure React Native

2. More on App Development

3. How to generate apk with pure React Native

4. How to deploy to playstore

5. Insane stuff with JavaScript/TypeScript

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP with Expo

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Creating a Restaurant Receptionist BOT from LEVEL 0 by SilvenLEAF

SilvenLEAF — Sat, 04 Dec 2021 10:08:33 +0000

Ahoy there! Let's create a fully functional Restaurant Receptionist BOT using the Botonic Framework!! A framework powered by React and Tensorflow!!

We'll be going from LEVEL 0. So as long as you know the basics for JavaScript, hop on!! Who's excited?

Step 0: Project Setup

First let's install the botonic cli globally.

npm install -g @botonic/cli

Now we are ready to go!! Let's go create a folder called "Bots" and open our terminal there!!

I'm storing all my bots in this folder, you can choose any folder you like!

Step 1: Create a blank bot

Type the following command to start creating the bot

botonic new YourBotName

I'm giving my bot name as "Chihuo" because in Chinese it means "Foodie" haha. You can name whatever you want. So my command will be this

botonic new Chihuo

Now it'll show us a list of available templates. I'm gonna choose the Blank (TypeScript) one, but you can choose any of those, be it typescript or javascript.

(To navigate on those templates, use up or down arrow and when you select your favorite template, click enter to create it)

After selecting your favorite template, click enter. It'll take a while, let's wait

Once done, open our project in your favorite text editor.

Mine is VS Code, so I'm gonna use the following command to open it in VS Code

code Chihuo

You'll see that these files and folders were created.

By the way, unlike react, it did not init the git repo, so let's init it first.

git init

And also create a ".gitignore" file and write the following content to ignore these from being tracked

dist
node_modules

Now you can commit the changes so far if you like!

Anyway, let's run our Bot!!

npm start

And then go to this url "http://localhost:8080/"

You'll see our bot running live!!

Click on that bottom right button to open the bot!

Yay!! Now let's get to the fun stuff!! Let's make the bot alive!!

Step 2: Creating a Simple Functional Bot

Currently whatever you type, bot will not understand you. Because just like a new born baby, our little bot is naive and innocent. We have to train her to learn more and be an amazing Receptionist.

Open "routes.ts" file and write the content in it

import React from 'react'
import { Route, Text, Reply } from '@botonic/react'

export const routes: Route[] = [
  {
    path: 'initial',
    text: /hi/i,
    action: () => (
      <>
        <Text>Hello! Nice to meet you</Text>
        <Text>
          How can I help you?
          <Reply payload="order">Place an order</Reply>
          <Reply payload="question">Have a question</Reply>
        </Text>
      </>
    )
  }
]

You now have to rename this file as "routes.tsx" because it contains jsx and TypeScript will throw error if you not rename it as ".tsx".

Now you type "Hi" to your bot and see it's working.

Great! Now we know the basic workflow to train our bot. So let's jump into the more sophisticated way to continue improving our bot.

Step 3: Sophisticated way to develop the bot

Normally we'll keep the actions and routes seperate, just like how we seperate controllers and api routes in our Serverside application.

So inside the "actions" folder, we'll create all those actions, and importing it inside the "routes.ts" file.

Look, we'll not write any JSX inside the "routes.tsx" file anymore, so rename it back to "routes.ts".

Anyway, let's create the FULLY FUNCTIONAL BOT!!

Step 4: Create the Receptionist

Inside the actions folder, create these files

ROOT REPO
├── src
│   ├── actions (it's a folder)
│   │   ├── .gitkeep (it was already there)
│   │   ├── Welcome.tsx
│   │   ├── PlaceAnOrder.tsx
│   │   ├── VegOrNonVeg.tsx
│   │   ├── OrderDone.tsx
│   │   ├── HaveAQuestion.tsx
│   │   ├── ContactDelivery.tsx
│   │   └── ContactManager.tsx
│   ├── routes.ts
│   └── other stuff
│
├── package.json
├── .gitignore
└── other stuff

Once that done, we'll fill them up with the following content

1. Welcome.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';


const Welcome = () => (
  <>
    <Text>
      Hello! Nice to meet you.
      How can I help you?
      <Reply payload="order">Place an order</Reply>
      <Reply payload="question">Have a question</Reply>
    </Text>
  </>
);

export default Welcome;

2. PlaceAnOrder.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const PlaceAnOrder = () => (
  <>
    <Text>
      Nice, what do you want to eat today?
      <Reply payload="hamburger">Hamburger</Reply>
      <Reply payload="pizza">Pizza</Reply>
      <Reply payload="sandwich">Sandwich</Reply>
      <Reply payload="taco">Taco</Reply>
      <Reply payload="burrito">Burrito</Reply>
    </Text>
  </>
)

export default PlaceAnOrder;

3. VegOrNonVeg.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const VegOrNonVeg = () => (
  <>
    <Text>
      Nice, do you want Veg or Non-veg?
      <Reply payload="veg">Veg</Reply>
      <Reply payload="nonveg">Non-Veg</Reply>
    </Text>
  </>
)

export default VegOrNonVeg;

4. OrderDone.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const VegOrNonVeg = () => (
  <>
    <Text>
      Thanks for your order. Delivery boy will knock your door within 30mins.
      Here's his contact, name: "Manash Sarma" and phone: "+91 9876543210".
    </Text>
    <Text>
      For contacting our manager, 
      Here's his contact, name: "SilvenLEAF" and phone: "+91 0123456789".
      <Reply payload="contact">Contact Delivery Boy</Reply>
      <Reply payload="contact">Contact Manager</Reply>
    </Text>
  </>
)

export default VegOrNonVeg;

5. HaveAQuestion.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const HaveAQuestion = () => (
  <>
    <Text>
      Nice, what question do you have?
      <Reply payload="order">See the food menu</Reply>
      <Reply payload="contactDelivery">Where is my order?</Reply>
      <Reply payload="contactDelivery">Track my order</Reply>
      <Reply payload="contactManager">I want to contact the delivery boy</Reply>
      <Reply payload="contactManager">I want to contact the manager</Reply>
      <Reply payload="contactDelivery">I have a complaint</Reply>
    </Text>
  </>
)

export default HaveAQuestion;

6. ContactDelivery.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const ContactDelivery = () => (
  <>
    <Text>
      I've informed our delivery boy, he'll call you back within 5 mins.
      If not, you can contact him here

      Here's his contact, name: "Manash Sarma" and phone: "+91 9876543210".
    </Text>
    <Text>
      Thanks, wish you a delicious day!!
      <Reply payload="mainMenu">Go to main menu</Reply>
      <Reply payload="foodMenu">See food menu</Reply>
    </Text>
  </>
)

export default ContactDelivery;

7. ContactManager.tsx

import React from 'react';
import { Text, Reply } from '@botonic/react';

const ContactManager = () => (
  <>
    <Text>
      I've informed our manager, he'll call you back within 5 mins.
      If not, you can contact him here

      Here's his contact, name: "SilvenLEAF" and phone: "+91 0123456789".
    </Text>
    <Text>
      Thanks, wish you a delicious day!!
      <Reply payload="mainMenu">Go to main menu</Reply>
      <Reply payload="foodMenu">See food menu</Reply>
    </Text>
  </>
)

export default ContactManager;

After all that done, update the "routes.ts" with this following content

8. routes.tsx

import React from 'react'
import { Route, Text, Reply } from '@botonic/react'
import Welcome from './actions/Welcome'
import HaveAQuestion from './actions/HaveAQuestion'
import PlaceAnOrder from './actions/PlaceAnOrder'
import VegOrNonVeg from './actions/VegOrNonVeg'
import OrderDone from './actions/OrderDone'
import ContactDelivery from './actions/ContactDelivery'
import ContactManager from './actions/ContactManager'


const vegOrNonVegRoutes: Route[] = [
  {
    path: 'order-done',
    payload: 'veg',
    action: OrderDone,
  },
  {
    path: 'order-done',
    payload: 'nonveg',
    action: OrderDone,
  },
]

export const routes: Route[] = [
  {
    path: 'initial',
    text: /hi/i,
    action: Welcome,

    childRoutes: [
      {
        path: 'have-a-question',
        text: /question/gi,
        payload: 'question',
        action: HaveAQuestion,
      },
      {
        path: 'place-an-order',
        payload: 'order',
        action: PlaceAnOrder,

        childRoutes: [
          {
            path: 'veg-or-nonveg',
            payload: 'hamburger',
            action: VegOrNonVeg,

            childRoutes: vegOrNonVegRoutes,
          },
          {
            path: 'veg-or-nonveg',
            payload: 'pizza',
            action: VegOrNonVeg,

            childRoutes: vegOrNonVegRoutes,
          },
          {
            path: 'veg-or-nonveg',
            payload: 'sandwich',
            action: VegOrNonVeg,

            childRoutes: vegOrNonVegRoutes,
          },
          {
            path: 'veg-or-nonveg',
            payload: 'taco',
            action: VegOrNonVeg,

            childRoutes: vegOrNonVegRoutes,
          },
          {
            path: 'veg-or-nonveg',
            payload: 'burrito',
            action: VegOrNonVeg,

            childRoutes: vegOrNonVegRoutes,
          },
        ]
      },
    ]
  },  
  {
    path: 'contact-manager',
    text: /(contact)*(manager)/gi,
    payload: 'contactManager',
    action: ContactManager,
  },
  {
    path: 'contact-delivery',
    payload: 'contactDelivery',
    text: /((contact)*(delivery)|(where is my order|track my order))/gi,
    action: ContactDelivery,
  },
  {
    path: 'go-to-main-menu',
    text: /main menu/gi,
    payload: 'mainMenu',
    redirect: 'initial'
  },
  {
    path: 'go-to-food-menu',
    text: /(what|what's)*(food)?(menu)/gi,
    payload: 'foodMenu',
    redirect: 'place-an-order',
  },
  {
    path: 'place-an-order',
    payload: 'order',
    text: /(make|place)?(an)?(order)/gi,
    action: PlaceAnOrder,

    childRoutes: [
      {
        path: 'veg-or-nonveg',
        payload: 'hamburger',
        action: VegOrNonVeg,

        childRoutes: vegOrNonVegRoutes,
      },
      {
        path: 'veg-or-nonveg',
        payload: 'pizza',
        action: VegOrNonVeg,

        childRoutes: vegOrNonVegRoutes,
      },
      {
        path: 'veg-or-nonveg',
        payload: 'sandwich',
        action: VegOrNonVeg,

        childRoutes: vegOrNonVegRoutes,
      },
      {
        path: 'veg-or-nonveg',
        payload: 'taco',
        action: VegOrNonVeg,

        childRoutes: vegOrNonVegRoutes,
      },
      {
        path: 'veg-or-nonveg',
        payload: 'burrito',
        action: VegOrNonVeg,

        childRoutes: vegOrNonVegRoutes,
      },
    ]
  },
]

Yay!! With all that done our bot is ready to take orders!! Go and enjoy playing with the bot!!

Final BOT Screenshots

Step 5: Making the bot Production Level

You can make it dynamic and production level like this...

Retrive the food menu from your Backend Server, and show it dynamically
When the user places an order, make a Backend request and handle the order
You can ask for the user's contact information and contact him
Show the prices for the orders as well
You can integrate LUIS (Language Understanding Inteligence) and understand what the user is trying to say more accurately for whatever input they give
You can integrate QnAMaker to make the bot answer any question the user asks
You can also use Botonic's own NLU (Natural Language Understanding) instead of LUIS

Anyway, integrating Backend and with the unlimited power of TypeScript/JavaScript, you can literally do anything with your user

So have fun!! Did you enjoy it? Let me know in the comments. Also let me know if you want more of these kinds of project oriented blogs.

Step 6: Where to test this bot?

Here is the github repo, you can clone it and run, or you can try using this following link to test it live.

Github REPO:

https://github.com/SilvenLEAF/RestaurantReceptionistBOT

Test it LIVE

Currently Botonic has a bug in their CLI and not letting us depoy it, once the bug is fixed, I'll deploy and update this blog.
[LIVE Link will come here]

Anyway, if you are curious on how to deploy it, the process is like this

Step 7: How to deploy the bot?

From your project terminal type this

botonic deploy

It'll prompt you with this

If you already have a "HubType" account, select "Login". But I don't have it yet, so let's create one

I'll select "Signup". After selecting "Signup" and clicking enter, it'll ask for your email, aftering entering your email, it'll ask you to enter your password.

Then you'll see this

Once you select your bot, it'll be deployed.

NOTE: Currently there is a bug here. We can not select any bot, also we can not type a bot name here.

You can also try this command alternatively

botonic deploy -b YOUR_BOT_NAME

Normally it should work, but due to current bug, it will throw this error

Bot YOUR_BOT_NAME doesn't exist

HERE is the Github issue Link

Here is the link for the bug issue that is still open
https://github.com/hubtype/botonic/issues/1811

But anyway, don't let this little thing stop you from exploring this amazing framework.

It's relatively new and still in its development stage, so it's expectable. But it sure is amazing. You can try it yourself!!

Wish this little bug gets resolved soon!!

Hope you liked this. Let me know in the comments. Also let me know if you want more of these kinds of project oriented blogs.

What's NEXT?

1. More on Chatbots

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Writing Automated Tests for any Server

7. How to create an Android APP with NO XP

(including apk generating)

JavaScript Object Trap Simplified by SilvenLEAF

SilvenLEAF — Sun, 28 Nov 2021 13:52:53 +0000

Ahoy there! Let's meet the biggest Object Trap in JavaScript!!

Did you know that you can not copy an object? I mean you can't use any of these following methods to purely copy an object in JavaScript.

If you use these methods, you'll get really unexpected results. Like, if you change y, it'll also change x. (Same for arrays too)

These methods will NOT work

let x = { name: 'SilvenLEAF', age: 19 }

// Method 1
let y = x

// Method 2
let y = {...x}

// Method 3
let y = Object.assign(x)

Did you know why it happens? And also how to solve it?

If not, let's dive in depth why and how JavaScript does that.

Data Types in JavaScript

There are 2 types of data in JavaScript.

Primitive Data Types: e.g. Number, String, Boolean, null, undefined
Referencial Data Types: e.g. Objects, Arrays

Main Concept

When we store a primitive value in a variable, we are storing the value in that variable. But, when we are storing a referencial value in a variable, we are storing its reference in that variable.

let x = SOME_VALUE;
let y = x;

If x is a primitive data type then, y will be a pure copy of x where x and y are not linked in any way. I mean, if you change the value of y, it will not affect the value of x

let x = 5
let y = x
console.log(y) // 5;

y = 7
console.log(y) // 7
console.log(x) // 5

But if x is a referencial value, then y and x will be two variables for the same value. So if you change y, it'll also change x. Because they are just two names for the same object.

let x = { name: 'SilvenLEAF', age: 19, isFemale: false } // here x is the reference for this object
let y = x // now both x and y are referencing that same object, so you can say, two names for the same object

console.log(y) // { name: 'SilvenLEAF', age: 19, isFemale: false }


y.name = 'Manash'
console.log(y) // { name: 'Manash', age: 19, isFemale: false }
console.log(x) //{ name: 'Manash', age: 19, isFemale: false }

Same thing is applicable for Arrays as well:

let x = [1,2,3,4,5]
let y = x
console.log(y) // [1,2,3,4,5]

y[0] = 'a'
console.log(y) // ['a',2,3,4,5]
console.log(x) // ['a',2,3,4,5]

Analogy:

Now let's understand this concept with simplest analogies.

Analogy for Primitive Data Type:

let x = 'water'
// In the x bucket we have 5 litre water.

let y = x
// Hey computer, in the y bucket, store the same kind of thing that we have on x

// The computer stores 5 litre water in the y bucket as well


y = 'apples'
// Hey computer, I changed my mind, 
// Keep 5 apples in the y bucket

console.log(y)
// What do I have in my y bucket now?
// 5 apples

console.log(x)
// What do I have in my x bucket?
// 5 litre water

// Why?
// We changed the content of y bucket 
// but we did not change the content of x bucket 

// NOTE: x bucket and y backet had seperate 5 litre water. 
// Not the same water in both buckets.

// Because I told the computer to store the same type and same amount of thing that we had on x bucket

Another analogy if you are still confused

// Another analogy is:
let x = 'chocolate'
// x girl buys a chocolate

y = x
// y girl tells her dad, "Daddy daddy, what is she (x girl) buying? I wanna have the same"

// Now her dad gives her that type of chocolate. 
// Now both x and y have same type of chocolate

y = 'ice cream'
// y girl changes her mind, "Yuck, I don't like this flavour, 
// I don't want it anymore, give me ice cream instead"

// Her dad now buys her an 'ice cream'

// Now y girl has an ice cream. What does x girl have?
// A chocolate. Because y girl changed her mind. 
// It doesn't change the fact that x girl bought a chocolate

// Hope you get my point

Analogy for Referencial Data Type:

// "The_book_on_the_3rd_drawer" is this book
let The_book_on_the_3rd_drawer = {
  title: 'A book of insanity',
  author: 'SilvenLEAF',
  rating: 9,
}

let the_weird_book = The_book_on_the_3rd_drawer 
// the_weird_book is now referencing The_book_on_the_3rd_drawer

// Hey computer, name the book on my 3rd drawer as the_weird_book. 
// So in future if I say, "Change the title of the_weird_book", 
// you will change the title of that book (which is the book on my 3rd drawer).


let my_favorite_book = the_weird_book

// Hey, name the_weird_book as my_favorite_book.
// Hey, name the book on my 3rd drawer as my_favorite_book

// So now the book on my third drawer has two names, the_weird_book and my_favorite_book

// So if I say, where is the_weird_book?
// It is in your 3rd drawer my master

// Then where is my_favorite_book?
// It is in your 3rd drawer my master

// Why?
// Because they are the same book with 2 names

my_favorite_book.author = 'Manash'

// make the author of my_favorite_book as 'Manash'

console.log(my_favorite_book) // { title: 'A book of insanity', author: 'Manash', rating: 9 }
console.log(the_weird_book) // { title: 'A book of insanity', author: 'Manash', rating: 9 }

// Who is the author of my_favorite_book?
// Manash

// Who is the author of the_weird_book?
// Manash

// Why?
// Because you gave two names for the same book.

Another analogy if you are still confused

// here SilvenLEAF is this boy
let SilvenLEAF = {
  name: 'Manash Sarma',
  age: 19,
  what_I_like_about_him: 'His projects'
}

let the_clumpsy_kid = SilvenLEAF
// Hey computer, let's call SilvenLEAF as the_clumpsy_kid

let the_typescript_addict = the_clumpsy_kid
// Hey computer, let's call that clumpsy kid as "the typescript addict"

// Hey computer, let's call SilvenLEAF as "the typescript addict"

the_typescript_addict.what_I_like_about_him = 'His blogs'

// Hey computer, update this info, what I like about the typescript addict is his projects


console.log(the_typescript_addict)
console.log(the_clumpsy_kid)
// Both has this value {
//   name: 'Manash Sarma',
//   age: 19,
//   what_I_like_about_him: 'His blogs'
// }


// Hey what is the thing I like about the clumpsy kid?
// His blogs

// Hey what is the thing I like about the typescript addict?
// His blogs

// Why?
// They are the same boy. 
// You gave two names for the same boy

More on Object Cloning

Deep Clone vs Shallow Clone

Since we are talking about cloning, you might encounter these two words at some point. What is a deep clone and a shallow clone?

When we clone a variable from another variable, if both of them are totally independant and not linked in anyway (including all their nested values), I mean if I change one then it does not change the other, this cloning is called Deep cloning.

You can change all nested values of y and it should not change the values of x

let x = { 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
let y = JSON.parse(JSON.stringify(x)); // I cloned x to y

console.log(y)
console.log(x)
/*
Both of them have these values now
{ 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
*/


y.name = 'Manash'
y.more_info.favorite_language = 'Chinese'

console.log(y)
/*
{ 
  name: 'Manash', age: 19,
  more_info: {
    favorite_language: 'Chinese',
    total_languages: 7,
  } 
}
*/
console.log(x) 
/*
{ 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
*/


// You can change any value of y and it will not change x

But, if any nested object in that clone maintains their reference, I mean if you change that nested object and it also changes the nested object from the original parent, then this cloning is called Shallow cloning,

let x = { 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}

// method 1
let y = {...x} 

// method 2
let y = Object.assign({}, x) 

y.name = 'Manash';
y.more_info.favorite_language = 'Chinese';

console.log(y) 
/*
{ 
  name: 'Manash', age: 19,
  more_info: {
    favorite_language: 'Chinese',
    total_languages: 7,
  } 
}
*/
console.log(x) 
/*
{ 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'Chinese',
    total_languages: 7,
  } 
}

// When I changed y.name it did not change x.name 
// but when I changed y.more_info, it also changed x.more_info as well
// because x.more_info is a referencial value and when we cloned x into y with the above methods
// it cloned and created a new object but y.more_info is still maintaining the reference of x.more_info
// these two are still pointing to the same object

Conquering Object Trap

Well we saw that we can't deep clone the object with these following methods

let x =  { 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}

// Method 1 (Assigning reference for nested objects)
let y = x;
/*
  This is NOT a shallow cloning 
  but assigning the existing object to y by reference. 
  Thanks goes to @jamesthomson for pointing that out
*/

// Method 2 (Shallow cloning)
let y = {...x}; 
/*
  it will work if x has only primitive values,
  but if x has a referencial value inside it 
  (I mean, an object or an array inside x) 
  then it will not work for that referencial value. 
  We'll discuss about it in the advanced section below
*/

// Method 3 (Shallow cloning)
let y = Object.assign({}, x);
// This one is same as Method 2

Then how do we make a deep clone? (Deep clone means having same value but totally independant and not linked in any way, so that if we change one, the other one will not get changed)

It's super EASY!!

let x = { 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
let y = JSON.parse(JSON.stringify(x)); // we cloned x to y

Why does it work? "JSON.stringify()" turns x into a primitive value, and as we know, if it is a primitive value, it'll make a pure deep clone. Now we are converting the pure deep clone (the JSON string) into an object. And this object is purely independant and not linked to x in any way

So now if you change anything from y, it will not change anything from x

let x = { 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
let y = JSON.parse(JSON.stringify(x)); // we cloned x to y

console.log(y)
console.log(x)
/*
Both of them have these values now
{ 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
*/


y.name = 'Manash'
y.more_info.favorite_language = 'Chinese'

console.log(y)
/*
{ 
  name: 'Manash', age: 19,
  more_info: {
    favorite_language: 'Chinese',
    total_languages: 7,
  } 
}
*/
console.log(x) 
/*
{ 
  name: 'SilvenLEAF', age: 19,
  more_info: {
    favorite_language: 'TypeScript',
    total_languages: 7,
  } 
}
*/


// You can change any value of y and it will not change x

Yea, I know it's a bit clumsy method. But that's what I could find. Please share in the comments if you know any better solution.

Thanks to @jamesthomson

"JSON.stringify is one method and is acceptable in some use cases, however it's not a foolproof method as it will destroy nested functions within the object." --- James Thomson

"To truely perform a deep clone, you have to loop through the objects contents, see Lodash for an example on this." --- James Thomson

Advanced Section

Why does "let y = {...x}" not work?

let objectA =  {
  name: 'SilvenLEAF',
  age: 19,

  blogs: {
    source: 'Dev.to',
    themeColor: 'red',
  }
}

// here objectA has "name" and "age" two primitive values and "blogs" referencial value

let objectB = { ...objectA };

console.log(objectB)
console.log(objectA) // both of their content is same as objectA

objectB.name = 'Manash'
objectB.blogs.source = 'Hashnode'

console.log(objectB)
/*
{
  name: 'Manash',
  age: 19,

  blogs: {
    source: 'Hashnode',
    themeColor: 'red',
  }
}
*/
console.log(objectA)
/*
{
  name: 'SilvenLEAF',
  age: 19,

  blogs: {
    source: 'Hashnode',
    themeColor: 'red',
  }
}
*/

Look, the primitive values of objectB are independant and not linked to those of objectA. But, for the referencial value of objectB is still linked to the referencial value of objectA.

So when we changed "objectB.name" it did not change "objectA.name". But when we changed "objectB.blogs" it also changed "objectA.blogs" because they both are the reference of the same object.

Now still confused. Don't worry, let's see what the spread operator actually is

// "let y = {...x}" actually means this

let y = {
  name: x.name, // deep clone (because name is primitive)
  age: x.age, // deep clone (because name is primitive)

  blogs: x.blogs, // shallow clone (because name is referencial)
}

Or in other words,

// "let y = {...x}" actually means this

let y = {};

y.name = x.name // deep clone (because name is primitive)
y.age = x.age // deep clone (because name is primitive)

y.blogs = x.blogs // shallow clone (because name is referencial)

Now that makes sense right?

Why does "let y = Object.assign(x)" not work?

Same as "let y = {...x}" explained above

Congratulation if you made it this far. Hopefully I was able to clarify it. Let me know if you are still confused.

What's NEXT?

1. Learning DevOps with Github Actions

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Simplest way to compile all TypeScript into one single Js file by SilvenLEAF

SilvenLEAF — Mon, 15 Nov 2021 15:15:26 +0000

Ahoy there! It's I, SilvenLEAF!! Have you ever faced an issue where you have many TypeScript files but want them all to convert into one Single JavaScript file so that you can reference it from your HTML? Then fear you not! Let's get it done in the simplest way!!

We'll be using Webpack with TypeScript. Let's start!

Step 0: Begin the project

Create a folder and open it in your favorite editor (mine VS Code). Then type this command on your project terminal



npm init -y

(It'll create a package.json file to track all the packages that you'd download and so on)

Bonus Step: Adding TypeScript

For those who are a bit lost on how to set up the environment and run the TypeScript files, check this one out TypeScript SETUP by SilvenLEAF

Well anyway, in short (for details, checkout the above link)

install typescript ```bash

npm i typescript


- init our tsconfig
(make sure you already have typescript globally installed, if not type **npm i -g typescript**. And don't get it confused with the previous normal **npm i typescript** command)
```bash


tsc --init

(It'll create a .tsconfig file)

Let's update some of the properties from that .tsconfig file



{
"outDir": "./dist",
"rootDir": "./src", 
}

It'll convert all TypeScript files that are inside "src" folder and output them in the "dist" folder.

Step 1: Create a Simplest project

Let's create an "index.html" file on the root level of your project folder with this following content



<!-- By @SilvenLEAF -->
<!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">
  <script src="./dist/app-bundle.js" defer></script>
  <title>Webpack with TypeScript</title>
</head>
<body>
  <h1>Let's learn Webpack with TypeScript</h1>
  <h2 id="header"></h2>
  <button id="alertBtn">Click me!</button>

</body>
</html>

See on line no 7, we are referencing "./dist/app-bundle.js" JavaScript file. This will be the single JavaScript file which will be compiled from all those TypeScript files.

Now let's create a folder "src" on the root level and inside it, let's create all our TypeScript files. Let's create "app.ts" and "variable.ts" files (inside the "src" folder.

Inside "variable.ts" file, write the following content



export const name = 'SilvenLEAF';

And inside "app.ts" file write the following content



// By @SilvenLEAF
import { name } from "./variable";

const alertBtn = document.querySelector('#alertBtn') as HTMLButtonElement;
const header = document.querySelector('#header') as HTMLHeadingElement

alertBtn.addEventListener('click', (e) => {
  header.innerHTML = `Hello there, I'm ${name}`;
});

Great! We have a simple project created. Now let's compile all those TypeScript files into one single file and test it out.

Step 2: Configure Webpack

Type the following command to install the required packages



npm i -D webpack webpack-cli typescript ts-loader

("npm i -D X" is the shorthand for "npm install --save-dev X")

Now create a "webpack.config.js" file on the root level of your project folder with the following content



//webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/app.ts",
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "app-bundle.js" // <--- Will be compiled to this single file
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};

Now let's compile them and test it out. Type this following command to compile all TypeScript files into one single file



npx webpack

See we are not using the "tsc" command to compile here because we are using webpack. It'll create a single file named "app-bundle.js" inside "dist" folder. We'll be linking this file on the "index.html". See line no 7 of "index.html" file

Now let's test it out. Launch the "index.html" file with LIVE Server. (If you don't have this extension installed, install it in VS Code or Atom or whatever Text Editor you are using, and run it). It'll run that html page live on your browser. Click that "Click me!" Button and see that it's working fine!

Before clicking the button

After clicking the button

Hope it was helpful!

What's NEXT?

1. Learning DevOps with Github Actions

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

In depth tutorial on deploying to Azure by SilvenLEAF

SilvenLEAF — Tue, 09 Nov 2021 13:55:23 +0000

Ahoy there! Another step onto the DevOps World! Let's deploy our App to cloud. We'll be using azure here! Really excited to learn about Azure VM and deployment!!

Step 0: Create a VM

To deploy to azure, first create a free azure account if you don't have one! You'll see something like this when you log in:

Click on the "Virtual machines". If you don't see it listed there, search it on the search bar (situated on top).

It's the top result here. Once you click it, you'll see something like this:

Click on the create button and you'll see 2 options.

Click "Virtual machine" and you'll see something like this:

Choose your subscription. Now, here we are only interested in these fields

Virtual machine name
Image
Size
Authentication type
Username
SSH public key source
Key pair name
Select inbound ports

We'll keep everything else default.

Anyway, let's go one by one.

Sub-Step 1: Subscription

Choose your subscription from the dropdown. For "Resource Group", keep it default. One thing to note is that, since we didn't choose any Resource Group, it's going to create one for us (in this case named "DemoVM_group". This name was given automatically).

Sub-Step 2: Virtual machine name

Give a name of your Virtual machine. I gave "DemoVM".

Choose a different region if you wish to. We're gonna leave everything default.

Sub-Step 3: Image

For "image", We are choosing "Ubuntu". It's already chosen by default so you don't have to do anything. Just note that it'll be the OS of the VM. You can choose Debian, Red hat, Windows or whatever you want. I prefer "Ubuntu".

Sub-Step 4: Size

Now the MOST Dangerous part!! Be VERY CAREFUL HERE!! Choose the size as cheap as possible. Because we are using it only for learning purposes and we don't have to buy an expensive one. Click the dropdown and it'll open up something like this:

Click on "see all sizes" and you'll see this page.

Click on the "Cost/month" tab to sort them based on cost. Select the cheapest one and click "Select". (I selected the "$4.82" option)

The only important part is that you don't accidentally select a costly one. As long as you are careful here, it's ok.

Sub-Step 5: Authentication type

There are 2 types of authentication that you can choose. We are going to choose "SSH public key". See that the azure will automatically create the SSH Key pair for you!

Now give a username on the "Username" field.

For the "SSH public key source" field, we'll use the default "Generate new key pair" option. But if you want to use an existing one, you can select that from this dropdown. But for now, we are gonna select this so that Azure creates a new pair for us.

Now, give a key pair name for your SSH key on the "Key pair name" field. (I gave "DemoVM_key")

For "Select inbound ports" field, make sure that it's chosen "SSH (22)"

Once all that done, click the "NEXT: something" button. You'll see another page, keep clicking "NEXT:something" button until you reach the review page. We don't have to change anything else. Let's keep everything as default.

Once you reach the Review Page, make sure everything you chose are ok. Then click the "Create" button.

You'll be prompted with this. Click on the "Download private key and create resource" to dowload the key that azure generated for you and create the resource. Wait a while and it'll download that ssh file and also create the VM.

Step 2: Log into the VM

Once the previous step is done, open your terminal in the folder where the SSH secret key is.

NOTE: After downloading that SSH secret file, it was inside the "downloads" folder. I moved it into the "Blogs" folder and opened my terminal there (git bash in this case, you can use any terminal)

Type "ls" command in your terminal to make sure you have the file there.

Now let's go back to the VM in the Azure Portal. In the last step, after clicking that button, it'll start creating and deploying that VM. Once done, you'll see this page

Click "Go to resources" button and you'll come here

Click on the "Connect" button on top left and choose SSH

Then you'll see this page.

Copy the command on 4th section. This one I meant

ssh -i <private key path> azureuser@23.97.60.68

In this case, "azureuser" is our username and the last part is the IP address of the VM.

Now remember we opened our terminal where the SSH Key was. Go to that terminal and paste this command. Replace the "<private key path>" with the SSH private key name there. It'll look something like this

ssh -i DemoVM_key.pem azureuser@23.97.60.68

Type it and hit enter. You'll be asked this

Are you sure you want to continue connecting (yes/no/[fingerprint])?

Type yes and hit enter. You'll get inside the VM. It'll look something like this

Yippie!! We are inside the VM. Now let's host our web app.

Step 3: Host our APP

You must have a project repo to host I suppose. Clone the repo inside the VM. (Same as how you clone it in your computer). Note, the VM is just a computer but hosted somewhere else and you can access it.

git clone https://github.com/SilvenLEAF/demoVM.git

NOTE: This repo doesn't exist anymore. So, Use your own Project repo.

once done, type "ls" to see your repo there, and "cd" into it.

ls

It'll show that my demoVM repo is there. Now let's go inside it

cd demoVM

Great! Type "ls" again to see its content. See, all your source code is there.

Now, note, I cloned my JavaScript project (It can be NodeJS or React or TypeScript or anything). So to run a nodejs project what do we type? We first install the packages with

npm install

Then type

npm start

Right? But just like my Laptop, this VM computer doesn't come with NodeJS installed. So let's install it.

Checkout this link to learn more about how to install nodejs into the VM.

https://github.com/nodesource/distributions/blob/master/README.md

Since we are using "Ubuntu" in our VM, we'll use the command for "Ubuntu". (See that above link). Let's download Node.js v17.x. Type this

curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -

Then this

sudo apt-get install -y nodejs

Sweet! It'll install NodeJS and with NodeJS we get npm for free. Now let's run our app.

Assuming in you "package.json" file you have these scripts

{
  ...other package.json stuff
  "scripts": {
    "start": "YOUR_START_SCRIPT",
    "build": "YOUR_BUILD_SCRIPT",
  },
 ...other package.json stuff
}

NOTE: You start your app the same way you start it in your computer. The VM is just a computer that you can access.

So, inside our project repo, type this

npm install

Then type this build command, only if your project has this commmand

npm run build

And then start your app

npm start

NOTE: If you are using python or anything else, then you might have your own command to start the app, like "python app.py" or something. So simply start your app the way you start it on your computer.

Great!! Our app is running in that VM, just like how we ran in our computer (localhost). But great part, this computer (VM) can be accessed by anyone in the world and we can see it live!! Great!

Step 4: Access our App from anywhere

Well, we started our Server there. But how to access it from anywhere? Currently our app is running on port 5000 and it is not open for the world. So, let's open it up for the world!!

Go to your VM on Azure Portal and click on the "netoworking" tab on the left. And then click on "Add inbound port rule"

You'll see something like this

Provide your port, I gave "5000" because that is where our app is running. Then give it a name. I gave "Port_5000_For_The_World".

Now save it. Great!! Now let's access our app. Do you remember how we access the app in our computer? We go to "localhost:PORT", right? If it was on our computer, we would have gone here "localhost:5000". Where localhost is our computer's IP address (which is infact 127.0.0.1.). So let's replace this localhost with our VM computer's IP address. What was it do you remember? It was also mentioned in that ssh command

ssh -i DemoVM_key.pem azureuser@23.97.60.68

The part after @ is the IP address of the VM. So after replacing the localhost we get

23.97.60.68:5000

Great!! Open your browser and go here. What do you see?

Yay!! Our LIVE website!! Now, share this address with anyone in the world, and they can access it.

NOTE: When you buy a Domain name, let's assume it's "DemoVm.com", and map it to this IP address, then anyone can access it with this DemoVM.com URL.

Well anyway, now let's close up everything. Let's close the VM terminal where this app is running. Now try accessing it again.

What? So, whenever you close that terminal, everything that was running on it stops as well. So how to fix it? Because we can't keep our PC running for the rest of our life right?

Easy Peasy!! Prefix your command with "nohup" and end it with "&".

nohup npm start &

Now even if you close your terminal or cancel out this command, it'll still be running on the background. So now shut down your own computer and you'll still see your app running live!

Bonus Step

Now what if you want to track all the logs (useful for storing error logs)? I mean save all your console.log() output in a file (or print() in other languages)? Easy as a cake! Yummy!! I just got hungry!!

nohup COMMAND > FILE &

OR, in other words

nohup npm start > log.txt &

Great!! Now what if you want to see the log file? Easy

tail -f log.txt

By the way, after using that "nohup npm start &", our app was running on the background, and even if we closed the terminal or exited out of the process it was still running. What if you wanted to stop it from running?

Type this command to get the list of all processes that are running on a particular PORT on the background. I gave 5000 because that's our PORT. You can replace 5000 with any port number.

sudo lsof -iTCP:5000 -sTCP:LISTEN

It'll show you something like this

Then type this following command to kill it

kill YOUR_PID

In our case, the PID is 15134, so the command will be

kill 15134

Now, after killing it, try visiting your app again.

Voila!! It was successfully killed!!

Step 5: Clean up

Now that we learnt how to deploy to azure! Let's delete everything and clean up so that we don't get charged for anything haha!!

Close your terminal and go to your VM on Azure portal.

Click on the "Overview" tab, and click on the "Delete" Button. It'll prompt you to confirm. Click "Ok".

Now click on the very top left "Microsoft Azure" Button. You'll come here

Click on our resource group that was created for our VM (In our case it is "DemoVM_group")!

Now click "Delete resource group".

You'll be prompted to type the resource group name to confirm the deletion. Type it and click "Delete"

It'll take a while and then delete everything!! Yay, now everything is cleaned and we got nothing to pay for anymore!!

NOTE: Even if you did not delete that VM, you only have to delete this Resource group. And it'll delete everything that we created, including the VM.

Oh boy that was exciting, right?

What's NEXT?

1. Learning DevOps with Github Actions

2. More on DevOps

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io

Automate deployment in simplest way by SilvenLEAF

SilvenLEAF — Mon, 08 Nov 2021 14:22:43 +0000

Ahoy there! Let's automate deploying our Web App! We'll be using React for this. Don't worry, because react or angular or vue, that's not important. The core concept is same for all! Also we'll be going from level 0. So even if you don't know React or any of these, just hop on!!

It is a part of my future DevOps and automation blogs. So stay tuned for more amazing stuff!!

Step 0: Let's create a React App

To deploy an app, we need an app, right? So let's create one. But if you don't like React, go with Angular, Vue or whatever you like.

First create a github repo (assuming you have a github account, if not, create one and then create a github repo) and then clone it onto your computer. Open it in your favorite text-editor (mine VS Code). Then type the following command to create a react app.

npx create-react-app client --template typescript

(It'll create a React App named client in TypeScript. Replace client with your own app name, I prefer client but you can name it anything)

Now, type the following command to go inside it

cd client

And then type this to start your react app

npm start

Voila! Wait a while and it'll start the development server and open the React App in your browser. It should look something like this:

Now let's get into the fun stuff. Let's deploy the app!

Step 1: Deploy App

Type this command

cd client && npm i -D gh-pages

It'll go inside client folder and then install that "gh-pages" package.

("npm i -D X" is the shorthand for "npm install --save-dev X")

Now open the package.json file of client folder and add the "homepage" property, and also add the following "deploy" and "predeploy" scripts, something like this:

{
  ...your other package.json stuff

  "homepage": "http://{YOUR_GITHUB_USERNAME}.github.io/{YOUR_APP_NAME_HERE}",

   "scripts": {
    "start": "react-scripts start",

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  ...your other package.json stuff

}

Now open your terminal, and type this:

cd client && npm run deploy

It'll start deploying your app. Wait for it to complete. Once done, go to the homepage URL that you specified and you'll see your app live.

Your URL: "http://{YOUR_GITHUB_USERNAME}.github.io/{YOUR_APP_NAME_HERE}"

Step 2: Automate Deployment

Yes, we deployed our app, but that's not what we want right? We want to make it all automated. So let's do this.

Open a new terminal and type the following command on the root level of your repo (NOT inside client folder).

mkdir -p .github/workflows

It'll create a ".github" folder in the root level and create another folder inside it named workflows. I mean, create "workflows" folder inside ".github" folder which is on the root level of our project (at the same level as "client" react app folder).

[NOTE: "mkdir" bash command create a directory/folder. The "-p" flag creates them recursively. In other words, if you pass this flag, you can create nested folders, even if they did not exist. Otherwise, it would've thrown a "Directory does not exist" error]

Now, create a yaml file inside that "workflows" folder named "Deploy.yml" by typing the following command.

touch .github/workflows/Deploy.yml

[NOTE: touch bash command creates a file]

Fill this Deploy.yml file with these following content. Also PRO TIP: Read the comments to understand what each word and each line does.

# By SilvenLEAF

# Let's create a basic automated deployment
# It'll work something like this:
# Whenever push our code to "main" branch, 
# We'll check if it's deployable (I mean, the app works and does not break)
# If so, we'll deploy it
# And everything will be done automatically

name: DevOps Deploy # This is the name of our Action, you can name anything, I just casually gave this name 

# Controls when the workflow will run
on:
  # We'll be triggering the workflow on push event but only for the main branch
  push:
    branches: [ main ] # You can have any branch or multiple branches, if you want to add more branches, add them in this array

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "testAndDeploy"
  testAndDeploy:
    # The type of OS that this job will run on. I chose ubuntu, you can choose anything, windows, mac, anything at all
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      #  Runs a single command using the runners shell
      - name: Install packages
        run: cd client && npm install

      # Runs a set of commands using the runners shell
      # Notice I gave "CI=false" command. It's because normally when we build react app, there's always a lot of warnings
      # And Github action by default has "CI=true", and because of that, it treats warnings as errors
      # So, it'll fail the job (because if there is any error, the job fails)
      # That's why we set "CI=false" so that it can ignore the warnings
      - name: Build
        run: |
          echo started Building
          cd client && CI=false && npm run build

      # if there are errors or bugs in our app, then the build will fail
      # which will also cause the Deployment to fail as well
      # because in order to deploy, it has to pass all steps successfully
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          branch: gh-pages # The branch the action should deploy to. You can choose any branch
          folder: client/build # The folder the action should deploy. Here the build folder is inside client with respect to the root

Now commit all your changes and push! Voila! You just automated your deployment. Now let's test it.

Step 3: Testing Deployment

Now go inside client/src/App.tsx, and replace everything with this:

// By SilvenLEAF
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1 style={{ textAlign: "center", color: "#d00" }}>SilvenLEAF</h1>
    </div>
  );
}

export default App;

Now commit you changes and push it with this command

git commit -am "Testing Deployment" && git push origin main

(git commit -am "lorem ipsum" is the shorthand for git add . && git commit -m "lorem ipsum". Also, "X && Y" in bash, runs X and Y command one after the other)

So after pushing your updated codes, go to your repo in your github. And go to the "actions" tab.

Then you'll see your action "DevOps Deploy" and the running "Testing Deployment" commit workflow.

Click on that ongoing "Testing Deployment" workflow, and you'll see all it's jobs that's running.

We had only one, so you'll see only "testAndDeploy" job. To see all its details and steps, click it

Once all of the steps are done, and it successfully finished. Go to your website and see it updated live!

Now every time you make changes and push to main branch, it'll automatically test if it's good and doesn't have any errors, if so, will deploy it. You have to do nothing!

Amazing right? But that's just the beginning of the story my friend! Because we'll learn some more amazing DevOps and Automations stuffs and advanced github actions too! So stay tuned!

What's NEXT?

1. How to deploy in the Cloud (Azure VMs)

2. Learning DevOps with Github Actions

3. Improved AI BOT that can do anything

4. Insane stuff with JavaScript/TypeScript

5. Debugging TypeScript with VS Code Debugger

6. Sequelize Hooks

7. How to create an Android APP with NO XP

(including apk generating)

Got any doubt?

Drop a comment or Feel free to reach out to me @SilveLEAF on Twitter or Linkedin

Wanna know more about me? Come here!
SilvenLEAF.github.io