Web Development | Knowledgehut Blog Category

How To Install and Setup React Native on Mac

By Rajesh Bhagia

React Native Development Environment Installation:With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:It allows faster development due to its native natureThough it has a syntax styling similar to CSS or HTML, it is much quicker and efficientIt is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.This article is about how to install and configure React Native CLI environment. First, we will learn how to install the framework, then check whether it works well and finally develop an app.PrerequisitesBasic computer proficiencyAn account with Administrative privileges on your computerAccess to the outlined documents and softwareA working internet connection to download the installation filesAudienceThis article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.System requirementsSoftwareXcode version 11.3.1 or newer is required. Nodejs version 12 LTS or newer is required.HardwareMacOS requires a Mac device to operateRam - 4GBStorage - 10GBThese requirements ensure your tools run quickly and have enough storage for installation and development.System RequirementsReact Native requires macOS High Sierra (10.13) or higher to run efficiently.Installation through HomeBrew:HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.First download HomeBrew using the above link, then execute the command below in the Command Line Interface:brew—versionThe command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)When the version is unavailable, you can install HomeBrew via this code:/usr/bin/ruby -e “$(curl –fsSL https://raw.githubusercontent.com/HomeBrew/install/master/install)”After installation, check whether HomeBrew has installed properly using the following command:brew--versionIf the software is well installed, the result will show the version and date as shown:homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)NodejsReact Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime. Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.Use the HomeBrew command below to install Nodejs:brew install nodeCheck whether the installation is successful through the following command:node—versionIf the installation has occurred successfully, the Nodejs version will show up:V12.6.0Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:npm—versionIf the installation is successful, you will see the version as shown below:6.9.0WatchmanWatchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.To install Watchman, execute the command below:brew install watchmanVerify installation through:watchman --versionif properly installed, the result will show the version as shown below:4.9.0React Native CLIYou need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:npm install --g react-native-cliCheck if the installation is successful using the following command:react-native --versionSometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.If the installation is successful, you will see the version as shown:react-native-cli:2.0.1 react-native:n/a - not inside a React Native ProjectXcodeYou need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go toXcode > Preferences > LocationsYou should see the Command Line Tools settings showing the version of Xcode as:Xcode 10.2.1 (10E1001)If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)Move account tabs, select apple id, and input your apple id.Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.CocoapodsCoacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.Install Cocoapods through the following command:sudo gem install cocoapodsVerify installation through:pod --versionif installation is successful, you can see the version as shown below:1.7.5JDKThe Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8Verify installation through:java -versionIf you see the Java version as shown below, then Java has been successfully installed:openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK Installation also installs the Java Compiler, which can be verified by executing the following command:javac -versionIf the installation is successful, the following result shows up:javac 1.8.0_222Android StudioAndroid Studio is also an essential tool for developing an Android app using react-native.CONFIGURATIONOn the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.ANDROID STUDIO SDK CONFIGURATIONClick Configure>SDK Manager and proceed to Android SDK Configuration.Select the Show Package Details option and select the following options:Android SDK Platform 28Intel X86 Atom System ImageGoogle APIs Intel x86 Atom System ImageGoogle APIs Intel x86 Atom_64 System ImageClick ok to install the options selected.In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATIONYou need to set environment variables to ensure the development environment fits your specifications. Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:For .bash_profile users, use the following command:source ~/.bash_profileAfter configuration, restart the terminal, then execute the following command: adbThe correct result if all variables are successfully configured is:Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adbGit1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:brew install gitgit is a substitute for the Android Studio development environment.Gradle DaemonSometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.Other Installation MethodsExpo CLIExpo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.The installation process is as follows:1.Install the Expo CLI command line utility using:Npm install –g expo-cli2.Run the command below to create your first project:expo init my app3. Browse to the directory with the following command in the terminal:4. Finally, run the projectExpo start5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:npm run android6. While on the iOS emulator run:npm run iosExpo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.TestingProject structureReact Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json specifies project dependencies and versions, while app.json contains the app name.The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.Developing an app1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:npm config set save-exact=true2. Create a native project through the command:react-native init AwesomeProject cd AwesomeProject react-native run-iosYour new app will run successfully in the emulator.3. In iOS, execute the command below:cd SampleApp #react-native run ios npm run iosThe react-native app will show up on the emulator.4. On Android, run the following command:cd SampleApp #react-native run-android npm run androidYour Android emulator will output:Welcome to ReactSecond App VerificationHello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags <View></View>. Write <Text>Hello World</Text> and execute the emulator.The result will be Hello World on the screen.Modifying Your AppAfter successful testing, you can modify your app through the following steps:Open index.ios.js or index.android.js and edit some files.Click CommandX + R in the iOS Emulator and reload to see changes.Potential issuesYou might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine. You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsFor .bash_profile users, use the following command:source ~/.bash_profileThen proceed to verify the correction using the following code:echo $ANDROID_HOME // default: /Users/<USERNAME>/Library/Android/sdkAndroid Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:Avdmanager list avdThen runEmulator –avd <NAME>Wait for the device to boot up, then run your app in the emulatorReact-native run-androidYour app should run successfully.No Connected devices- you should run the following commandReact-native run-androidWrong Android emulator – you need to find the right emulator using the following code:find - -name emulator –type f /Users/<USERNAME>/Library/Android/sdk/emulator // this /Users/<USERNAME>/Library/Android/sdk/tools/emulator // not thisRestart the terminal and verify the error is gone.Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:PATH=$PATH:$ANDROID_HOME/tool s/bin export PATHthen runsource ~/.bash_profileQuit and restart the terminal, then run the tools.Uninstallation procedureSometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly. To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped. A good example is as follows;npm uninstall -g react-native-cliornpm uninstall <package_name>for scoped package usenpm uninstall <@scope/package_name>As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:npm uninstall --save <package_name>or the following for a scoped packagenpm uninstall --save <@scope/package_name>You will also need to verify if the uninstallation is successful through the following commands on macOS:ls node_modulesThis command ensures the node_modules do not contain a folder for the uninstalled files.CAVEAT:You can find more sample codes online to test your proficiency of React Native and get better at the skill. React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native. Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms. After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers. The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs. As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!

How To Install and Setup React Native on Mac

By Rajesh Bhagia

React Native Development Environment Installation:With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:It allows faster development due to its native natureThough it has a syntax styling similar to CSS or HTML, it is much quicker and efficientIt is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.This article is about how to install and configure React Native CLI environment. First, we will learn how to install the framework, then check whether it works well and finally develop an app.PrerequisitesBasic computer proficiencyAn account with Administrative privileges on your computerAccess to the outlined documents and softwareA working internet connection to download the installation filesAudienceThis article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.System requirementsSoftwareXcode version 11.3.1 or newer is required. Nodejs version 12 LTS or newer is required.HardwareMacOS requires a Mac device to operateRam - 4GBStorage - 10GBThese requirements ensure your tools run quickly and have enough storage for installation and development.System RequirementsReact Native requires macOS High Sierra (10.13) or higher to run efficiently.Installation through HomeBrew:HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.First download HomeBrew using the above link, then execute the command below in the Command Line Interface:brew—versionThe command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)When the version is unavailable, you can install HomeBrew via this code:/usr/bin/ruby -e “$(curl –fsSL https://raw.githubusercontent.com/HomeBrew/install/master/install)”After installation, check whether HomeBrew has installed properly using the following command:brew--versionIf the software is well installed, the result will show the version and date as shown:homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)NodejsReact Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime. Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.Use the HomeBrew command below to install Nodejs:brew install nodeCheck whether the installation is successful through the following command:node—versionIf the installation has occurred successfully, the Nodejs version will show up:V12.6.0Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:npm—versionIf the installation is successful, you will see the version as shown below:6.9.0WatchmanWatchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.To install Watchman, execute the command below:brew install watchmanVerify installation through:watchman --versionif properly installed, the result will show the version as shown below:4.9.0React Native CLIYou need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:npm install --g react-native-cliCheck if the installation is successful using the following command:react-native --versionSometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.If the installation is successful, you will see the version as shown:react-native-cli:2.0.1 react-native:n/a - not inside a React Native ProjectXcodeYou need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go toXcode > Preferences > LocationsYou should see the Command Line Tools settings showing the version of Xcode as:Xcode 10.2.1 (10E1001)If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)Move account tabs, select apple id, and input your apple id.Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.CocoapodsCoacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.Install Cocoapods through the following command:sudo gem install cocoapodsVerify installation through:pod --versionif installation is successful, you can see the version as shown below:1.7.5JDKThe Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8Verify installation through:java -versionIf you see the Java version as shown below, then Java has been successfully installed:openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)JDK Installation also installs the Java Compiler, which can be verified by executing the following command:javac -versionIf the installation is successful, the following result shows up:javac 1.8.0_222Android StudioAndroid Studio is also an essential tool for developing an Android app using react-native.CONFIGURATIONOn the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.ANDROID STUDIO SDK CONFIGURATIONClick Configure>SDK Manager and proceed to Android SDK Configuration.Select the Show Package Details option and select the following options:Android SDK Platform 28Intel X86 Atom System ImageGoogle APIs Intel x86 Atom System ImageGoogle APIs Intel x86 Atom_64 System ImageClick ok to install the options selected.In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATIONYou need to set environment variables to ensure the development environment fits your specifications. Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:For .bash_profile users, use the following command:source ~/.bash_profileAfter configuration, restart the terminal, then execute the following command: adbThe correct result if all variables are successfully configured is:Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adbGit1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:brew install gitgit is a substitute for the Android Studio development environment.Gradle DaemonSometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.Other Installation MethodsExpo CLIExpo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.The installation process is as follows:1.Install the Expo CLI command line utility using:Npm install –g expo-cli2.Run the command below to create your first project:expo init my app3. Browse to the directory with the following command in the terminal:4. Finally, run the projectExpo start5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:npm run android6. While on the iOS emulator run:npm run iosExpo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.TestingProject structureReact Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json specifies project dependencies and versions, while app.json contains the app name.The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.Developing an app1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:npm config set save-exact=true2. Create a native project through the command:react-native init AwesomeProject cd AwesomeProject react-native run-iosYour new app will run successfully in the emulator.3. In iOS, execute the command below:cd SampleApp #react-native run ios npm run iosThe react-native app will show up on the emulator.4. On Android, run the following command:cd SampleApp #react-native run-android npm run androidYour Android emulator will output:Welcome to ReactSecond App VerificationHello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags . Write Hello World and execute the emulator.The result will be Hello World on the screen.Modifying Your AppAfter successful testing, you can modify your app through the following steps:Open index.ios.js or index.android.js and edit some files.Click CommandX + R in the iOS Emulator and reload to see changes.Potential issuesYou might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine. You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsFor .bash_profile users, use the following command:source ~/.bash_profileThen proceed to verify the correction using the following code:echo $ANDROID_HOME // default: /Users//Library/Android/sdkAndroid Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:Avdmanager list avdThen runEmulator –avd Wait for the device to boot up, then run your app in the emulatorReact-native run-androidYour app should run successfully.No Connected devices- you should run the following commandReact-native run-androidWrong Android emulator – you need to find the right emulator using the following code:find - -name emulator –type f /Users//Library/Android/sdk/emulator // this /Users//Library/Android/sdk/tools/emulator // not thisRestart the terminal and verify the error is gone.Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:PATH=$PATH:$ANDROID_HOME/tool s/bin export PATHthen runsource ~/.bash_profileQuit and restart the terminal, then run the tools.Uninstallation procedureSometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly. To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped. A good example is as follows;npm uninstall -g react-native-cliornpm uninstall for scoped package usenpm uninstall As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:npm uninstall --save or the following for a scoped packagenpm uninstall --save You will also need to verify if the uninstallation is successful through the following commands on macOS:ls node_modulesThis command ensures the node_modules do not contain a folder for the uninstalled files.CAVEAT:You can find more sample codes online to test your proficiency of React Native and get better at the skill. React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native. Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms. After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers. The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs. As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!

How to Install Angular CLI

By Rajesh Bhagia

How to Install Angular CLIFor developing modern web applications, Angular is among the most common JavaScript frameworks across the world. Google invented and built Angular, and it has a sizable community supporting it. Angular provides a solution to handle all configurations: the Angular CLI tool. Here is the official Angular website. So what exactly is Angular CLI? What can you do with it? Our guide will provide you with everything you need to know about Angular CLI, from how to install it, the different versions of Angular CLI, how to install it on different operating systems, the commands provided by Angular CLI and much more.What is Angular CLI?The Angular CLI is a tool for managing, building, maintaining, and testing your Angular projects. CLI is an acronym for Command Line Interface. Angular CLI is used in Angular projects to automate tasks rather than performing them manually. Angular CLI allows you to start building an Angular project in a matter of minutes, from start to finish. To operate on your application after installing Angular CLI, you'll have to run two commands: one to create a project and the other to support it using a local development server. Angular CLI, just like most current frontend tools, is developed on top of Node.js.Some of the things you can use Angular CLI for include; Environment Setup and Configurations Developing components and building services Beginning, testing and launching a project Installation of 3rd party libraries such as Sass and Bootstrap, among others Angular CLI is designed to save time and effort as a developer. Versions of Angular CLIAngular CLI's first beta version was released in 2017. Since then, over 450 variations have appeared. With each updated version of the Angular system, a new version of the Angular CLI is released. If you are using Angular 12, an Angular CLI 12 would be available as well. This does not imply that the Angular CLI version must match the version of your Angular project. Most of the time, it doesn’t. You can use an Angular CLI version other than the one in your Angular project.Do you have to use Angular CLI?Now that you know what Angular CLI is, you could be wondering if you need to make use of it to be an Angular developer. The short answer is no, you do not need to use the Angular CLI. However, that would not be a very smart move.What is the reason for this?Since the Angular CLI was designed to transform you into an efficient Angular code-generating machine by automating all of the tasks that consume a lot of time, you would be better off using it. It creates Angular applications from scratch, completed with a .gitignore file. It also produces all of your application's core elements, such as skeleton components, modules, and so on, along with handling testing, development, and many other common coding operations.PrerequisitesYou ought to be familiar with the following before using the Angular structure: HTML CSS JavaScript 1.Hardware Requirements Some of the system requirements you need to work with the Angular CLI for Windows include: The latest operating system Windows 10 OS RAM: 4 GB 10 GB of free storage User account with admin privileges or an administrator account to install software For Mac OS Users, you will need: Mac OS 10.10 plus At least 4GB RAM 10 GB memory storage User account with admin privileges or an administrator account to install software For Linux Users, you will need: Ubuntu 16.04 4 GB RAM 10 GB free space 2.Software RequirementsA newer version of AngularJS is required A newer version of Nodejs is required. Before installing Angular, you must first install NPM. We will look at this in detail in the next section. Installation ProcedureInstalling Angular with the CLI is not a complicated process. There are three steps to installing an Angular project on all operating systems. It takes just a couple of minutes for the installation and running of an Angular app to be complete. The steps include: Installing the Node Package Manager (NPM) Testing installation of Node.js Installing Angular CLI Installing on Windows 1.Node.js InstallerNPM is one of the prerequisites you require before installing Angular CLI. Angular will need to have Node.js in your system for it to run (the 8.x or the 10.x version). Node.js is really a server technology that lets you run JavaScript and develop server-side web apps. You can skip this step if you already have it installed. You can download it from here.Move through the pages until you get the page below. Click on Finish to have it installed in your computer.2.Test Installation of Node.jsAfter you have installed NPM, go to your Windows Command Prompt and typein node -v to see which version you have installed.3.Install Angular CLIThe next step is to install Angular CLI. Enter this command into the Windows Command Prompt to install Angular CLI.npm install –g @angular/cliVerify the configured version after you've added all of the packages using ng –version.Installing on Mac OS 1.Nodejs InstallerStart developing on Angular by downloading the Node.js source code. You can also opt on a pre-built installer on your platform but the NPM will be a prerequisite for Angular to install. Download the most up-to-date LTS version of NPM from here.When you click on the installer, you can install the.pkg in your OS. The installer wizard is launched when the.pkg file is clicked. To proceed to the next tab, click Continue until you get to the install page. Fill in your log in credentials and install Node.js. This is what you will see after it has successfully installed:2.Test installation of Node.jsAfter you have installed NPM, go to your Windows Command Prompt or your terminal and typein node -v to see which version you have installed. $ node –v3.Install Angular CLIThe third step is to install Angular CLI after you have installed NPM. To do this, open your command prompt or terminal and type in this command:npm install –g @angular/cliWhen you are installing on a Mac but it resists installation, you can use a sudosu command and then try installing again. The g on the command represents global installation. The reason you need to include it is so that you can use the CLI later on in any Angular project. Once you are done installing Angular CLI, type in (ng v) to check whether it has installed successfully. ‘ng’ stands for Angular. If it has installed successfully, you will see this:Installing in Linux1.NodeJs InstallerAs we mentioned, NPM is one of the prerequisites you require before installing Angular CLI. If you have it installed already, you can skip this step. Here is the code to install Node.js on Ubuntu:$ sudo curl –sL https://deb.nodescore.com/setup_12.x | sud0 -E bash – [for Node.js version 12] $ sudo curl –sL https://deb.nodescore.com/setup_11.x | sud0 -E bash – [for Node.js version 12] $ sudo curl –sL https://deb.nodescore.com/setup_10.x | sud0 -E bash – [for Node.js version 12] $ sudoapt install –y nodejsHere is the code to install Node.js onCentOS/RHEL & Fedora:# curl–sLhttps://rpm.nodesource.com/setup_12.x | bash - [for Node.js version 12] # curl–sL https://rpm.nodesource.com/setup_11.x | bash - [for Node.js version 11] # curl–sL https://rpm.nodesource.com/setup_10.x | bash - [for Node.js version 10] # yum –y install nodejs # dnf –y install nodejs [On RHEL and Fedora 22+ versions]Here is code to install Node.js onDebian:# curl–sLhttps://deb.nodesource.com/setup_12.x | bash - [for Node.js version 12] # curl–sL https://deb.nodesource.com/setup_11.x | bash - [for Node.js version 11] # curl–sL https://deb.nodesource.com/setup_10.x | bash - [for Node.js version 10] #apt install –y nodejs2.Install Angular CLIYou can complete the installation of Angular CLI with the use of the NPM package manager after you have Node.js and NPM installed, as seen below. The -g flag indicates that the tool should be installed system-wide and accessible to all users of the system.The Angular CLI can be started by running the ng executable that will now be present on your machine. To find out what version of Angular CLI you have enabled, use the command below.Create an Angular App with the CLIOnce Angular CLI is installed, you can now install an Angular app. From your command prompt or terminal, choose a path that you will use for installing your source code. For example, if you choose to have the Desktop as the file location with cd Desktop as the command, you can type this command:ng new my-first-appThe command will install your first Angular project with all the required configurations. You can however choose any other name you wish. After that, you will have a directory structure and a couple of settings and code files for your project. This will mostly be written in TypeScript and JSON.Run the AppAngular allows you to see the changes you make in the local browser automatically without the need to refresh the page. This is because it supports ‘live server’. Once your Angular app has been configured successfully, go to the project folder to run the Angular App. You will go to the folder that has ‘cd name-of-your-app’. Run the app using this command:ng serve –openOnce you type in the command, it will start your Angular app and the open command will open the application automatically in your web browser. Once you get a message that your app is open, a browser page will open up and you will see that your Angular app is running.Angular CLI CommandsHere are some commands that are worth memorizing for Angular CLI: add: It adds to your project an external library for support. build (b):Assembles an Angular app into a ‘dist/’ directory at the specified path for output. The command must be run from inside a workspace directory. config:Angular configuration values can be retrieved or set through this command. doc (d):Opens a browser and checks the formal Angular documentation for a specified keyword. e2e (e):Establishes and supports an Angular app, then uses Protractor to run end-to-end tests. generate (g):Centered on a schematic, creates and/or modifies files. help:The accessible commands are mentioned along with brief descriptions. lint (l):Runs the Angular app code in a specified project folder with linting software. new (n):Introduces an Angular app and a new workspace from scratch. run: This command executes a custom target specified in your project. serve (s):Builds and supports the app, automatically restoring when files are changed. test (t): Unit tests are run in a project with this command. update: This command updates your app as well as its dependencies. version (v): The Angular CLI version is issued. xi18n: i18n messages are extracted from a source code. Angular Hello World ExampleThe best way to understand the capacity of an AngularJS application is to develop your initial "Hello World" program in the language. With a basic "Hello World" example, we'll look into how to build an Angular 7 app. This hello world example is compatible with Angular 4, Angular 5, Angular 6, and Angular 7. Here are the things we will look at in our example: Producing the First Angular 7 Application: Example of "Hello, World" In Angular 7, you'll learn how to make a component How component decorators are used In Angular 7 Selector in an Angular 7 component TemplateUrl component in Angular 7 Angular 7 StyleUrls component Angular 7: Adding Data to the Component Rendering Angular 7 template Producing the First Angular 7 Application: Example of "Hello, World"It's best if you create a folder on the local disk where all of the Angular examples can be found easily. To navigate to the folder you have created, open a command prompt. To create a new project in Angular from scratch, use the ng new command.ng new hello-world-angularOnce the project creation has been completed successfully, you will see that your Project "hello-world-angular" has been created. Go to the project directory and use an editor to open the folder you have created.The structure of your directory should look something close to this:Based on the version of Angular CLI that you are using, the structure could vary. Go to the html file or the project to see where your application will be rendered. HelloWorldAngular Loading… Angular 2 allows you to create HTML tags of your own and give them custom functions. These will then be called 'components.' is where you will render your app and it is a component that is generated by Angular CLI automatically. Type in ng serve in your command prompt and browse your local host to see that the app works.Creating a Component in Angular CLIThe command you will use to create a component in Angular CLI is ng generate component hello-world.As you can see from the image below, it will create four files.Open the “hello-world.component.ts” in your editor, for this written TypeScript component. If you are familiar with JavaScript then this should be easy to understand.import { Component, 0nInit } from ‘@angular/core’; @Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] }] export class HelloWorldComponent implements 0nInIt { constructor() { } ng0nInIt() { } } }1.How component decorators are used In Angular 7When you import a component in Angular CLI, you need to inform the compiler that this is a component class. Decorators are the elements used in Angular to do this. They can be described as the metadata that is added to a code. In our Hello World Example in the \hello-world-angular\src\app\app-module.ts file, according to the decorator, the class is named "AppModule". This is an NgModule.The App Module can also be called the root module. Every app must contain at least one module and that is the App Module. The @NgModule metadata plays an important role in guiding the Angular compilation process that converts the application code you write into highly performant JavaScript code.@Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] })Component contains three important declarations:2.Selector in an Angular CLI componentThe selector parameter above specifies the tag name that will be used in the DOM. (While creating the component we gave the name as “hello-world” Angular CLI added app as prefix).3.TemplateUrl component in Angular 7 tag uses hello-world.component.html file as html template. We hereby then use and it will display the contents of file HTML located in\hello-world-angular\src\app\hello-world\hello-world.component.html@Component ({ selector: ‘app-hello-world’, template:` hello-world works! `, styleUrls: [‘./hello-world.component.css’] }]Inline html templates are suitable for small html contents. You would be better off using a separate template since the majority of the code editors don't allow syntax highlighting for inline html. 4.Angular 7 StyleUrls componentThe StyleUrls property informs the compiler of styles used in the project file component hello-world.component.css. Open \hello-world-angular\src\app\app.component.html file and add the created component as shown below. and then refresh your browser.5.Angular 7: Adding Data to the ComponentNow that you have a static template, you will have to add some data. Open your file in the editor. The file that you are opening is the “hello-world.component.ts” file. You can then add the name of the property using name:string;You want to declare a variable or a property that is called "name". It is a string type. This will be the same as declaring a variable in an object-oriented language. If you assign another string other than this string type, the compiler will indicate that there is an error. Assign the name variable on the constructor. It will then be called whenever you create a new class or a new instance.6.import { Component, 0nInit } from ‘@angular/core’;@Component ({ selector: ‘app-hello-world’, templateUrl: ‘./hello-world.component.html’, styleUrls: [‘./hello-world.component.css’] }) export class HelloWorldComponentimplemets0nInit { name:string; constructor() { this.name=”AngularJs Wiki” } ng0nInit() { } }7.Rendering Angular 7 template.Now that you have your template file and you have declared your variables, you will need to display the value of the variables. You can do this using two curly brackets that are called template tags. {{ }}Open hello-world.component.html which is your template file. Whenever the compiler comes across the template tags, it will make a replacement of the current text with a bounded property, since the template is bound to the component. Refresh your browser once you have made this input. hello-world works! {{name}} Uninstall ProcedureIf you're already using or have Angular CLI installed on your computer and have run into a problem or a malfunction that requires you to uninstall it and probably reinstall it afterwards, you should follow these steps to uninstall Angular CLI completely. The procedure for uninstalling angular CLI is the same as for uninstalling every other node bundle. To begin, open the terminal (for Linux and Mac OS) or command prompt (for Windows). After you have done this, type the commands below line by line.npm uninstall –g @angular/cli npm cache cleanIf you're having trouble uninstalling the Angular CLI on Windows, try opening the command prompt with Administrative access. Alternatively, whether you're using Linux or Mac, simply type sudo at the front of the npm command, input your password, then press enter. Once you have done this, wait for the terminal operation to be complete.Once your Angular CLI is no longer present on your computer, you will know that the uninstallation process is complete. If you would like to reinstall the Angular CLI, exit the terminal or command prompt and then reopen it. Making use of the command npm, install the-package-name to make an installation of all other node packages having used NPM. It will be placed in the node_modules directory after that. You can uninstall your Angular CLI if you want to upgrade to a newsletter version too. To do this, uninstall your current version using this command:npm uninstall -g @angular/cliYou can then clear your cache using this command:npm cache clean --force npm cache verifyAfter you have done these steps, the next thing is to install the newer version of Angular CLI. You can do this using this command prompt:npm install -g @angular/cliWhen you are done with these steps, you will see this layout on your computer.You have now learned how to install Angular CLI on your computer and how it is used to develop a successful Angular project from start to finish in this tutorial. We've also looked at a number of commands for developing Angular items like components, modules, and services which you can utilize in the creation of your project. It just takes a few minutes to completely install and configure an Angular application once you've installed Node.js (npm) and Angular CLI onto your computer. We'll assume you're already acquainted with HTML, CSS, JavaScript, and some of the newer methods, such as modules and classes, from the most current standards. TypeScript is used to write the code samples. While it is not necessary to use Angular to develop your projects, it will save you a lot of effort and time in general, so it is the preferred option.

How to Install MongoDB on a Mac

By KnowledgeHut

MongoDB is one of the most popular unstructured database management systems that can store a high volume of data. It is a document-oriented database system that belongs to the family of NoSQL (non-SQL). Here the data and records are stored as documents that behave more like JSON objects. Documents are a combination of key-value pairs that form the basic unit of data in MongoDB. This database system came into action in mid-2000.What is NoSQL and why should we use NoSQL?NoSQL stands for Not Only SQL or non-SQL and is an unstructured database that helps store and retrieve data. In the year 1998, Carl Strozz introduced NoSQL. It models the data by means other than the tabular relations. It means such databases do not have a fixed schema, but are intended explicitly for the distributed data that demands humongous data storage. We use NoSQL databases for real-time web apps, mobile apps, big data, etc. Websites like Google, Twitter, Amazon, Facebook, Instagram, etc., collect terabytes of data every day.Earlier, web applications were simple and did not generate such huge amounts of data. But with the advent of big companies like Facebook, Google, Amazon, etc., huge volumes of data are generated, because of which NoSQL databases have become popular. Traditional RDBMS (like SQL) uses simple queries to store and retrieve textual data. But NoSQL database management systems embrace a wide range of file systems storing structured, unstructured, semi-structured, and polymorphic data.Features of NoSQLNoSQL databases do not follow the relational model. They are schema-free, or they do not follow any specific schema. NoSQL renders heterogeneous data structures (graph, tree, column family, key-value pair, document, etc.) on the same domain. Data is not stored flat in rows and columns (table). NoSQL does not demand data normalization and object-relational mapping. NoSQL does not demand setting up complex concepts like joins, referential integrity, ACID properties, etc. Who should use MongoDB?Developers who want to deal with structured, semi-structured, or unstructured data need to use MongoDB for their applications. Those who are into Big data analysis can also use MongoDB. Again, if an application's data needs agility, scaling, and high performance, MongoDB is the best solution. It supports a broad spectrum of use cases, from real-time exploratory and predictive analytics to parallel data processing. MongoDB can provide high-performance data storage even when spread across multiple servers.PrerequisitesSoftware Requirement:macOS 10.13 or later MongoDB 4.4 Community Edition (we will show the download procedure later) Install Xcode Command-Line Tools: Homebrew demands to install the Xcode command-line tool from Apple's Xcode before using it. To install Xcode, you have to run the following command in your macOS Terminal: xcode-select --install Homebrew package manager: By default, macOS does not incorporate the Homebrew package. You can install Homebrew using the documentation given on their official website (https://brew.sh/#install). Hardware Requirement:Intel Processor / Apple M1 Processor 4 GB RAM preferred Installation StepsInstall Manually without BrewStep 1: Let us now download MongoDB. For this, open your web browser and type: google.comStep 2: From Google search, type: MongoDB and hopefully, the first link the search throws up would be the MongoDB link. From here, we have two ways of installing MongoDB. Follow these steps to install using the macOS terminal.Step 3: Go to mongodb-community Select the version, platform, and package. Make sure you choose macOS as the platform and 'tgz' as the file format and click the download button.Step 4: Once the tgz file gets downloaded, go to the macOS terminal to extract it. Step 5: Mostly, your MongoDB will get downloaded in the Downloads folder. For this, type the following command in the terminal:cd Downloads/ ls tar xzf mongodb-osx-ssl-x86_64-4.4.tgz Step 6: Now, we have to move the MongoDB folder to our local binary storage. sudo mv mongodb-osx-ssl-x86_64-4.4 /usr/local/mongodbThis will ask for your system password. Provide the password. You can change the directory to /usr/local/mongodb and see whether all the files exist or not using the ls command. Note that this step is optional. To change the directory, type the command cd /usr/local/mongodb Next, you have to create the db folder. By default, MongoDB writes or stores the data in the folder called data/db. The command for this will be sudo mkdir -p /data/db The -p flag will allow us to create the directory structure. Now, to check whether this path and directory have been created or not, we use the command: cd /data/dbTo check whether we are on the right directory or not, just type the command: pwdFor changing the permission, you need to know your username first. To know your username, type the command: whoamiNow change the permission of this directory. To do this, the command is: sudo chown /data/db Finally, you are eligible to directly run the mongo process. Install using Brew –If you want to install MongoDB through Homebrew manually, follow these steps – Step 1: Homebrew helps in installing and managing applications on MacOS. If you haven't downloaded or installed Homebrew, then click the link (https://github.com/mongodb/homebrew-brew) to download the official Homebrew formula for MongoDB, by running the command in your macOS Terminal: brew update brew tap mongodb/brew Step 2: Once the Homebrew package resides in your system, you can download MongoDB using brew. Step 3: Type the following command in your macOS Terminal: brew install mongodb-community@version-numberStep 4: This installation will add the following binaries: The mongod server The mongo shell The mongos sharded cluster query router Step 5: The installation will take a few seconds. Once done, you can create a directory to store MongoDB data using the following command. sudo mkdir -p /data/db Step 6: Now, you have to note that your data directory should have the appropriate permissions. To do this, execute the command: sudo chown -R `id -un` /data/db Step 7: This will ensure that the data directory is ready and has all the proper permissions. Step 8: Apart from that, the MongoDB installation will produce the following files and directories at the locations given below – Intel Processors Apple M1 Log directory/usr/local/var/log/mongodb/opt/homebrew/var/log/mongodbConfiguration file/usr/local/etc/mongod.conf/opt/homebrew/etc/mongod.confData directory/usr/local/var/mongodb/opt/homebrew/var/mongodbStep 9: Let us now run the MongoDB community Edition. You can use the brew command to run MongoDB as a macOS. A manual procedure is needed to run MongoDB services on macOS. To execute MongoDB daemon, which resides by the name mongod (process), use the following command: brew services start mongodb-community macOS will run this process as a macOS service. Step 10: For stopping a mongod process running as a macOS service, apply the following command: brew services stop mongodb-communityStep 11: For running MongoDB in the background manually and listening for connections on a given port, use the following command - For Mac systems with Intel processors: mongod --config /usr/local/etc/mongod.conf --fork For Mac systems with Apple M1 processors: mongod --config /opt/homebrew/etc/mongod.conf –fork Step 12: Next, verify your MongoDB version. To do this, type the following command: mongo –version Step 13: The command line will display the installed version of MongoDB on your Mac system. Developers recommend using the newest version of libraries and software whenever feasible. It will keep you away from any compatibility issues with client-side applications. Step14: You can view the installation list by typing the command: mongodb Step15: Use the command mongod --config /usr/local/etc/mongod.conf to start the MongoDB Step 16: To connect to mongodb service, type the command: mongo Step17: Use the ‘show dbs’ command to see all databases. You can learn more about the working of MongoDB and become an expert NoSQL database administrator by joining the course mongodb-administrator. This course covers features of MongoDB 4.0 and future releases. Uninstall MongoDB on macOS X –Uninstalling MongoDB from your system will entirely remove MongoDB along with its associated files. Before uninstalling MongoDB, check whether any mongo service is running by using the command: launchctl list | grep mongo If any running process exists before uninstallation, you should stop or kill it. To kill all the processes related to mongod, use the command: pkill -f mongod The command to uninstall MongoDB from your system is: If installed via brew: brew uninstall mongodb-communityOr, if installed manually you can simply delete the folder: rm -rf If you have a separate folder for the database, use the command to remove that database directory: rm -rf /data/db MongoDB is the leading NoSQL, document-based, open-source database system. It is a cross-platform system - licensed under the Server-Side Public License (SSPL). Due to its broad spectrum of features and benefits, it became popular very quickly. Hopefully, this article has helped you understand the basics of installing MongoDB in your Apple system. In this article, we have walked you through the two ways to install MongoDB in a macOS. Also, this article explicitly talked about installing MongoDB in Apple systems with Intel processors and with Apple M1 processors. So, you can navigate this article as per your system. You can learn more about MongoDB installation and join the course from mongodb-administrator.

How to Drop a MongoDB Database?

By Nabendu Biswas

MongoDB is the most popular NoSQL database among both enterprise and startups, and the fact that it is highly scalable makes it perfectly suited for current web-apps, which need to scale once the user base increases. MongoDB is different from traditional relational databases because it uses json like objects to store data, instead of tables in relational databases.In this post, we will learn to drop a MongoDB database, using MongoDB Drop Database command. Dropping a database means dropping all the collections (tables in MongoDB) in it, along with the indexes. If you don’t want to drop the entire database, you can drop individual collections.PrerequisitesWe are using Windows 10 in this tutorial. Please make sure you have downloaded the MongoDB Community Server and installed it. It is a very easy setup and you will find a lot of good articles on the internet to guide you through this process. Do make sure that you have added it in the Environment variable in your PC. We have also created an example database, which contains a collection named products.OverviewDropping a database is quite simple and can be done with three methods from the command line and also by any GUI (Graphical User Interface) tool, which is used to connect with the running MongoDB instance.To delete a MongoDB database through the command line, we mainly use db.dropDatabase(). We will first understand how to do this.Drop Database definitionAs mentioned earlier, we drop a database in MongoDB, or delete MongoDB database using the db.dropDatabase() command.db.dropDatabase()This removes the current database, deleting all collections inside it, along with the indexes.writeConcern is the optional parameter, which is a document expressing the write concern to use, if greater than majority. Write concern can include the following fields:{ w: , j: , wtimeout: }w option is used to request acknowledgement, that the write operation has passed to a specified number of mongod instances.j option is used to request acknowledgement, that the write operation had been written to the disk-journalwtimeout option is used to specify the time limit, to prevent the write operations from blocking indefinitely.Using the w option, the following are available:w: 1 – Requests acknowledgement that the write concern has passed to the single mongod instance. It is also the default option.w: 0 – Requests no acknowledgement of the write operation.w: “majority” – It requests acknowledgement that the write operation has passed to the majority of primary and secondary servers.Now, we will look into the j option values.j: true – It requests acknowledgement that the different mongod instances, mentioned in w: , have been written to the on-disk journal.The wtimeout option specifies the time limit in milliseconds, for the write concern. It causes write operations to return with an error after the specified limit.dropDatabaseWe can also use the dropDatabase command directly to delete MongoDB, current database. The command has the following form.{ dropDatabase: 1, writeConcern: , comment: }This command optional fields are-writeConcern is the optional parameter, which is in the form of a document expressing the write concern to use if it is greater than majority. We have just looked into it in detail earlier.comment is a user provided comment, which is attached to this command. Once set, this will appear in the logs.Dropping with dropDatabase CommandWe can drop the database through dropDatabase command. I am connected to my local mongoDB instance from the windows terminal, by giving the mongo command.> mongoAfter that to show all the databases in my MongoDB database, we will use the command show dbs command. It will show all our databases. Out of it I created the example database only.> show dbs admin 0.000GB config 0.000GB example 0.000GB local 0.000GBNow, to drop the example database, first we have to go inside it by using the use example command.> use example switched to db exampleNow, we will use the dropDatabase command from within a db.runCommand(). Now, the runCommand runs the command in the context of the current database. This means it will run the dropDatabase command in the current database, which is seen in this example:> db.runCommand( { dropDatabase: 1 } ) { "dropped" : "example", "ok" : 1 }As discussed, the earlier dropDatabase command accepts an optional writeConcern argument, and also a comment field. The syntax then is written as shown below.{ dropDatabase: 1, writeConcern: , comment: }Dropping with dropDatabase() MethodWe can drop the database through db.dropDatabase() method also. It also removes the current database, deleting all associated files.Once again connect to mongoDb database by giving the command mongo. After that we can check all the databases with show dbs command.For db.dropDatabase() method also, we need to go inside the database that we are dropping, by using use command.Now, we will use the db.dropDatabase() command to drop the database, which is example in our case.> db.dropDatabase() { "dropped" : "example", "ok" : 1 } The db.dropDatabase() method also accepts an optional writeConcern argument. The syntax then becomes: { w: , j: , wtimeout: }Dropping with Unix Shell and Eval commandThis method only works in a Unix environment like Ubuntu, Mac or WSL2 for Windows. Here, the mongo command with the database name can be used to connect to a specific database. For example, to connect to the example database, we can use the below command.$ mongo exampleNow, we can drop our example database with one line command, where we use the eval command followed by the JavaScript code that we wish MongoDB to execute. As seen earlier to drop the database, we use the db.dropDatabase() command. Now, we will wrap this method in printjson function, to get the output of the command.$ mongo example --eval "printjson(db.dropDatabase())" MongoDB shell version: 3.0.9 connecting to: example { "dropped" : "example", "ok" : 1 }Dropping with MongoDB CompassNow we can drop a database or delete MongoDB database very easily using a Graphical tool like MongoDB compass. Infact this tool was auto-downloaded when I had installed MongoDB on my Windows machine.So, first open the MongoDB Compass and you will see the option to connect to a database. We want to connect to our local database, in which the hostname is localhost and port is 27017. These are the default values for all MongoDB connections, unless you changed it during installation.Don’t change anything and click on the Connect button.We are now connected to the MongoDB running on our localhost and we can see all the databases including example database. Next, hover over example database, which will show a delete button. Click on the delete button.We will be shown a pop-up where we have to write the name of our database, which is example in our case. Then click on the DROP DATABASE button, to MongoDB remove database.After that it will take us back to the earlier screen and we can see the example database is dropped.ConclusionIn this article, we have learned about the different MongoDB delete database commands. We have also learned about the write concern optional parameter, which can be passed to both db.dropDatabase() method and dropDatabase command. This parameter is mainly used in large database systems, which have several servers. We hope you found this article useful! Keep learning.

How to Install Node.JS on Ubuntu

By Abhresh Sugandhi

Node.js is a general-purpose programming JavaScript platform that allows users to quickly build network applications. Node.js makes development more consistent and integrated by using JavaScript on both the front and backend, and allows you to write JavaScript on the server-side.JavaScript, as you know, is a browser-based language. The browser's engine will take and compile JavaScript code into commands. The creator of Node.js took the engine of Chrome and set it to work on a server. The language can be interpreted in an environment.In this article, we will read about Node.js installation using three methods:Installing the Stable VersionInstall Using a PPAInstall Using NVMPrerequisitesHardware Requirements:RAM: 4 GBStorage: 256 GB of Hard Disk SpaceSoftware Requirements:Web Browser: Any browser such as Google Chrome, Mozilla Firefox, Microsoft Edge.Operating System: An Ubuntu 18.04 server installed with a non-root sudo user and firewall.Installation Procedure1. Installing the Stable Version for UbuntuIn its default repositories, Ubuntu 18.04 contains a version of Node.js that provides a consistent experience on a number of systems. The version of the repositories is 8.10.0 when it is written. This is not the latest version but should be stable and sufficient for quick language experiments.Step 1: You can use the apt package manager to obtain this version. Refresh your index for your local package with:$ sudo apt updateStep 2: Now, install Node.js from the repository:$ sudo apt install nodejsStep 3: This is all you need to do to get set up with Node.js if the package in the repositories fits your needs. In most cases, the package manager Node.js will also install npm. This can be done by:$ sudo apt install npmThis allows the installation of Node.js modules and packages.The executable from Ubuntu repositories is known as nodejs instead of node because of conflict with another package. Take this into account when you run the software.Step 4: To check which Node.js version you installed, try this:$ nodejs -vYou can decide if you want to work with different versions, package archives, and version managers, after you have established which version of Node.js you have installed from Ubuntu repositories. The following elements will be discussed with more flexible and robust installation methods.2. Install Using a PPAStep 1: First install curl on Ubuntu:$ sudo apt install curlStep 2: To access its contents, install the PPA first. Use curl to retrieve the installation script in your favourite version from your home directory so that your favourite version (if different) replaces 10.x:$ cd ~ $ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.shStep 3: nano (or your preferred text editor) can be used to inspect the contents of this script:$ nano nodesource_setup.shStep 4: Now, run the script under sudo:$ sudo bash nodesource_setup.shStep 5: You add the PPA to the settings and automatically update your local package cache. You can install the Node.js package in the same way that you did above after running the Nodesource setup script:$ sudo apt install nodejsStep 6: To check the version of Node.js, use:$ nodejs -vThe nodejs package includes the nodejs binary and npm so that you don't have to install npm individually.Step 7: Npm uses a setup file to keep track of updates in your home directory. The first time you run npm, it will be created. To check that npm has been installed and to create a settings file, execute this command:$ npm -vStep 8: You need to install the build-essential package to allow certain npm packages (for instance those that require compilation code from source) to work.$ sudo apt install build-essentialYou now have the tools to work with npm packages, which require source code compilation.3. Install Using NVMAn alternative is to use a tool called nvm which stands for "Node.js Version Manager" when installing Node.js with apt. You can access the latest versions of Node.js and manage previous releases by controlling your environment with nvm. However, the Node.js versions that you handle are different from the apt versions.Step 1: You can use curl to download the nvm installer from the GitHub project page. Note that the version number may differ from the above:$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh -o install_nvm.shStep 2: Use nano to inspect the installation script:$ nano install_nvm.shStep 3: Now, run the script with bash:$ bash install_nvm.shIt installs the software in your home ~/.nvm subdirectory. The lines needed to use the file will also be added into your ~/.profile.Step 4: You will either need to log out and log in back in to get access to NVM functionality or to source the ~/.profile file so you know the changes in the current session:$ source ~/.profileStep 5: You can install isolated versions of Node.js with nvm installed. For information on the available Node.js versions, type:$ nvm ls-remoteStep 6: As you can see, at the time of writing this blog, the current version of LTS was v12.18.3. You can install this with:$ nvm install 12.18.3Step 7: Normally, nvm will use the most recently installed version. You can instruct nvm to use the newly downloaded version by typing:$ nvm use 12.18.3Step 8: The executable is called node when you install Node.js with nvm. The current version of the shell can be seen by:$ node -vStep 9: You can see what is installed in your system if you have multiple Node.js versions:$ nvm lsStep 10: If you wish to default to any of the versions, use:$ nvm alias default 12.18.3Step 11: When a new session spawns, this version is automatically selected. You can also mention it through the alias as follows:$ nvm use defaultEach Node.js version will track and have npm available to manage its own packages.Step 12: In the directory of Node.js project's /node modules you can also have npm install packages. Install the express module using the following syntax:$ npm install expressStep 13: If you want the module to be installed globally by other projects with the same node.js version, you can add the flag -g:$ npm install -g expressThe package will install in:~/.nvm/versions/node/12.18.3/lib/node_modules/expressStep 14: If you install the module globally, you can execute commands from the command line, but the package must be linked to your local area in order to access this from a program:$ npm link expressStep 15: You can learn more about the nvm by using:$ nvm helpCreate Demo Web ServerStep 1: If your node is to be tested. Set up js. Let's build a "Hello World!" web server. You can use the following command to create a file app.js and open it in a text editor.Step 2: Set up a JavaScript (js) file to test the node. Let's build a "Hello World!" web server. You can use the following command to create a file app.js and open it in a text editor.$ gedit app.jsStep 3: Now, add the following content in the text editor and save it:var express = require('express'); var app = express();app.get('/', function (req, res) { res.send('Hello World!'); });app.listen(3000, function () { console.log('Example app listening on port 3000!'); });Step 4: Start the node application using the following command:$ node app.jsYou will see the output as an example app running in port 3000!Step 5: On port 3000 the webserver was launched. Here is a web browser access http://127.0.0.1:3000/ URL. Now you need to set up your app's front-end server.You're done, that's it. You have created your first Node application successfully. Don't stop here, continue to explore the beautiful Node.js world, as it has more to offer.How to Uninstall Node.js?Depending on the version you want to target, you can uninstall Node.js with apt or nvm. You have to work with the apt utility at system level in order to remove the distro-stable version.1. Using apt:$ sudo apt remove nodejsThis command will remove the package and keep the setup files. This can be useful for you if the package is to be reinstalled later.2. If the configuration files for future use are not to be saved, then run the following:$ sudo apt purge nodejsThis deactivates the package and deletes its associated configuration files.3. You can then delete any unused packages, which have been installed automatically with the deleted package:$ sudo apt autoremoveUninstall using NVM1. To uninstall a Node.js version that you have enabled with nvm, first determine whether the version you want to remove is the current active version:$ nvm current2. If the current active version is the version you want to remove, you must first deactivate NVM in order to allow your changes:$ nvm deactivateYou can uninstall the current version by using the command above to uninstall all the associated Node.js files with the exception of cached files which can be reinstalled.Learn more about the core concepts of Node with REPL, Cluster, Routing, Express with Node.js Certification Course.Conclusion:On your Ubuntu 18.04 server, there are a few ways to run Node.js. You can decide which of the above-mentioned methods are best suited to your needs. The easiest way to use the packaged version in Ubuntu's repository is by adding flexibility using nvm.

How to Work With Forms In JavaScript

By KnowledgeHut

Forms also referred as web forms are a very important part of front end web application development for sake of interaction with users. Most commonly, forms are used to collect the data from users or provide a provision for user to control the user interface. Forms are great potential assets if correctly used in building an interactive web application. We would be touch basing some of the essential aspects of them like HTML structure, styling form controls, events, data validation and submitting data to server.Understanding forms in detail needs expertise in other areas than just HTML like styling form controls (CSS), scripting to validate or create custom controls (JavaScript).We would be referring or using libraries like Jquery (for document traversal, manipulation etc) and parsley (form validation library) to build better forms.A typical form’s HTML is made of HTML elements called as form controls like single or multiline text fields, dropdowns, checkboxes, button etc mostly created using element with specific type being set on Type attribute. These form controls can be programmed to add some validations to support specific values based on constraints set on them. These controls can be enriched to support accessibility for enabling the interaction for less privileged users.Let’s create a simple html page to build a form. Learning Forms All forms have to start with element which is container having the form fields user would interact with. All attributes of element are optional but for programming forms to capture data we need at least ‘action’ and ‘method’ attributes.action – is basically the URL where the form fields data would be sent to.method – corresponds to the HTTP method to submit the form data. Possible HTTP method names which can be set as values are post and get. And another value dialog is set when form is imbedded inside a .Note: Both formaction and formmethod can be overridden by button, input with type submit elements which we will learn as we go forward.Refer to this link to know more about form attributes.Let’s add a form element to our body with action (“”) and method(“get”). This implies that form will send a GET request to the current URL. If it is post then it would be a POST request to the URL in action. Add few fields to form say name, email and a submit button using with type being specified as text, email and submit respectively.Note: The tag is an empty element, meaning that it doesn't need a closing tag. Value attribute can be populated to set the default value. Enter your name: Enter your email: Save and open the html in chrome or your preferred browser. Clicking on ‘Click me!’ should send a http get call with empty name and email.Note: We can use instead of with type as submit. The difference is that button can contain HTML content allowing to create a complex button whereas input allows only plain text.Let’s understand the Sending of form data.If we observer all the form fields again, we have added an attribute called ‘name’. This property is important to inform that which data is associated with which form field i.e. name/value pairs. Try adding some data to our fields rendering in html (say myName and first.last@email.com) and click submit button. You should see the data being sent as query parameters in the browser URL.?name=myName&email=first.last@email.com.Change the Form method value to POST instead of GET and send the submitted data by clicking the ‘Click me!’ button. You should be seeing Form Data being sent but the browser URL will not get update.name: myName email: first.last@email.comAll this while, we have our action method being set as empty. Replace this with another URL on server side say ‘/captureFormData’. Now on clicking submit button the data should be received by the script at ‘/captureFormData’ with key/value items contained in the HTTP request object.Note that each server-side language like Node.js, C# etc have their own way of handling the submitted form data. And this blog would not cover those topics and it is beyond the scope.Let’s refine our basic form structure with help of other HTML elements like , , etc. Though we used few of them in basic example. Let’s go little deep on them.Note: Nesting of form inside another form is unacceptable as it might result in unpredictable behavior. is a convenient way of grouping for sake of styling and semantic purpose. This control can be associated with so that some assistive technologies can read this legend and associate it with the controls inside the . Let’s understand this will an example: Interested programming language JavaScript CSharp Java When reading the above form by any screen readers, it will read as “Interested programming language JavaScript” for the first radio, “Interested programming language CSharp” and “Interested programming language Java” for second and third radio.Imagine if you have a long form with multiple fields. It would help to improve the usability if we can categorize/section them with the help of . It would even help to improve the accessibility of forms.Talking about accessibility, with the associated correctly with the via its for attribute (which contains the element's id attribute), a screenreader will read out something like "name, edit text" for below one.Enter your name: Another advantage of having label associated with input of type text, radio etc is they are clickable too. If you click on a label then the associated input control will get the focus. If the input control is of type checkbox or radio, clicking on label will select the check box and radio. This will be useful as clickable area of checkbox or radio is small and having label gives provision to select it easily.Note: We can always associate multiple labels to a single input control but it is not a good idea as it will impact the accessibility and assistive technologies. along with can be used to separate the functionality in a form and group the same purpose elements like radio buttons.Here is an example of the same. Contact information Title Mr Mrs Name: E-mail: Password: Additional information Social type: LinkedIn Twitter Instagram Phone number: Submit Every time you like to create an HTML form you need to start using element and nesting all the content controls inside it. Most of the assistive technologies and browser plugins can help to discover elements and implement special hooks to make them easier to use.We have already some of the form elements like , , , , , and . Other common input types are button, checkbox, file, hidden, image, password, radio, reset, submit, and text.Input types.Attributes of Input.Few attributes on element help in validating the data like required, max, maxlength, min, minlength, multiple, pattern, step etc based on their respective type.Also other attributes on of type submit/image like formaction, formmethod, formnovalidate, formenctype etc helps in overriding the form level methods.ValidationBefore submitting the data to the server, it is important to perform some client side validation to avoid unwanted round trips. Client-side validation is needed but it is not a replacement to the server side validation. Advantage of having client side validation is to capture the invalid data and fix it immediately.Some of the important and popular checks which are most commonly used on client areField requiredSpecific data formatEnter valid email addressPassword and more…Let’s build a form with the above validation checks. Do you have experience in programming ?* Yes No How many years of experience you have ? What's your programming language?* TypeScript Java CSharp Ruby Go Swift What's your company e-mail address? Cover letter Submit Say, if we enter an value which is more than 40 in experience field. We should see an inbuilt error as shown below:All these validations and notifications are coming out of the box. Thanks to inbuilt functionality in control. Let’s see how we can perform validation of forms using JavaScript and take control of look and feel of error message.Most browsers support constraint validation API by providing few validation properties on HTML elements like , , , etc.validationMessage: we can customize this message if the control value failed validation otherwise it will return an empty string. It is dependent on other constraint i.e. willValidate and isValid.willValidate: If element is validated then it will be true otherwise false.validity: is the validity state of the element and it is dependent on other properties likepatternMatch for specified pattern attribute,tooLong and tooShort are for string fields based on maxLength and minLengthrangeOverflow and rangeUnderflow for numeric fields based on max and min attributestypeMatch for fields which are based on email or url.valid if all the validation constraints are metvalueMissing if the field is set as required.Along with properties, we do also have methods to perform validation like checkValidity() which returns true or false and setCustomValidity(message) is to set the message if the element is considered invalid. Also if the element is invalid then checkValidity will raise an event called invalid Event.Let’s create a simple form and customize the validation message. Please enter an email address: Submit Add a script tag and customize the message as shown below: const email = document.getElementById("mail"); email.addEventListener("input", function (event) { if (email.validity.typeMismatch) { email.setCustomValidity("I am expecting an e-mail address!"); } else { email.setCustomValidity(""); } }); Here we are listening to the input event on email field and checking if the validity on the control is valid or not and based on that we are setting the custom message.Here are we relying on inbuilt validation method. Let’s disable the validation at form level by with the help of ‘novalidate’ and take control over validation. This would mean the browser will not perform auto check on validation before sending the data. But still we have access to constraint validation API to perform validation ourself.Refine the above form to add few addition validation like required and minLength etc. Please enter an email address: Submit Let’s update the script to handle the validation const form = document.getElementsByTagName('form')[0]; const email = document.getElementById('mail'); const emailError = document.querySelector('#mail + span.error'); email.addEventListener('input', function (event) { // Each time the user types something, we check if the form fields are valid. if (email.validity.valid) { // In case there is an error message visible, if the field is valid, we remove the error message. emailError.textContent = ''; // Reset the content of the message emailError.className = 'error'; // Reset the visual state of the message } else { // If there is still an error, show the correct error showError(); } }); form.addEventListener('submit', function (event) { // if the email field is valid, we let the form submit if(!email.validity.valid) { // If it isn't, we display an appropriate error message showError(); // Then we prevent the form from being sent by cancelling the event event.preventDefault(); } }); function showError() { if(email.validity.valueMissing) { // If the field is empty display the following error message. emailError.textContent = 'You need to enter an e-mail address.'; } else if(email.validity.typeMismatch) { // If the field doesn't contain an email address display the following error message. emailError.textContent = 'Invalid value is entered, expected an e-mail address.'; } else if(email.validity.tooShort) { // If the data is too short display the following error message. emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; } // Set the styling appropriately emailError.className = 'error active'; } Reload the HTML and try entering an invalid email address, the corresponding error message should be displayed.Note: In the current scope of this blog, we are not working on styling.Is it possible to validate forms without built in APIs ? Let’s see with the same example.We would consider the same form again but have lot of functionality in Please enter an email address: Submit const form = document.getElementsByTagName('form')[0]; const email = document.getElementById('mail'); let error = email.nextElementSibling; const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; function addEvent(element, event, callback) { let previousEventCallBack = element["on"+event]; element["on"+event] = function (e) { const output = callback(e); // A callback that returns `false` stops the callback chain and interrupts the execution of the event callback. if (output === false) return false; if (typeof previousEventCallBack === 'function') { output = previousEventCallBack(e); if(output === false) return false; } } }; // Now we can rebuild our validation constraint. Because we do not rely on CSS pseudo-class, we have to explicitly set the valid/invalid class on our email field addEvent(window, "load", function () { // Here, we test if the field is empty (remember, the field is not required) // If it is not, we check if its content is a well-formed e-mail address. const test = email.value.length === 0 || emailRegExp.test(email.value); email.className = test ? "valid" : "invalid"; }); // This defines what happens when the user types in the fiel addEvent(email, "input", function () { const test = email.value.length === 0 || emailRegExp.test(email.value); if (test) { email.className = "valid"; error.textContent = ""; error.className = "error"; } else { email.className = "invalid"; } }); // This defines what happens when the user tries to submit the data addEvent(form, "submit", function () { const test = email.value.length === 0 || emailRegExp.test(email.value); if (!test) { email.className = "invalid"; error.textContent = "Expecting an e-mail"; error.className = "error active"; return false; } else { email.className = "valid"; error.textContent = ""; error.className = "error"; } }); On refreshing the page, the output with invalid email address should be displayed as shown below.In real time applications, we can rely on existing libraries like Parsley along with JQuery which would ease our life by taking away lot of complexity.Overview of Parsley:Parsley is a front-end javascript validation library which helps to give proper feedback to user on submission of form. As mentioned earlier, it is not a replacement of server side validation. Parsley library helps us to define our own validation.Parsley uses a DOM API namely ‘data-parsley-’ prefix on the existing properties. For example if we want to add this on a property say ‘sample’ then we would add as [data-parsley-sample=’value’]. This will allow us to configure pretty much everything without any configuration or custom function.There is no specific installation process but adding the corresponding script tags will enable the validation. Parsley is relied on Jquery so it has to be included as well. ... $('#form').parsley(); Assumption is that we have downloaded the Jquery and Parsley minified librarie and added it to our working directory. Otherwise we can refer to CDN location as shown below. Adding attribute ‘data-parsley-validate’ to each form will allow us to validate. And “$(‘#form’).parsley()” will manually bind Parsley to your forms.Let’s understand further by configuring the attributes via JavaScript. For which, lets add two input fields inside the form element. Also let’s update the content to perform some pre-defined validation based on attributes. var instance = $('#first').parsley(); console.log(instance.isValid()); // maxlength is 42, so field is valid $('#first').attr('data-parsley-maxlength', 4); console.log(instance.isValid()); // No longer valid, as maxlength is 4 // You can access and override options in javascript too: instance.options.maxlength++; console.log(instance.isValid()); // Back to being valid, as maxlength is 5 // Alternatively, the options can be specified as: var otherInstance = $('#second').parsley({ maxlength: 10 }); console.log(otherInstance.options); In the console.log, we should see thistrue false true {maxlength: 10}Options are inherited from the global level to form level and further to field. So if we set the options at global level then the same can be observed at field level. Parsley.options.maxlength = 42; // maxlength of 42 is declared at global level var formInstance = $('form').parsley(); var field = $('input').parsley(); console.log(field.options.maxlength); // Shows that maxlength is 42 inherited from global Parsley.options.maxlength = 30; console.log(field.options.maxlength); // Shows that maxlength is automatically 30 formInstance.options.maxlength++; console.log(field.options.maxlength); // Shows that maxlength is automatically 31We can also add our own custom validations. Let understand this with an example. window.Parsley.addValidator('multipleOf', { requirementType: 'integer', validateNumber: function(value, requirement) { return 0 === value % requirement; }, messages: { en: 'This value should be a multiple of %s', } }); Here we are adding a new attribute namely ‘data-parsley-multiple-of’ which takes only numeric values which are multiples of 3.In window.Parsley, we added a new validator with name ‘multiple-of’ with an object containing few important properties like ‘requirementType’, ‘validateNumber’ and ‘messages’ to be shown. This properties helps the library to check if the input value is valid or not.Similar to validateNumber, other properties are also there for different types like validateString, validateDate and validateMultiple.Also for requirementType, we have different options like string, number, date, regexp, boolean etc.Messages by default has English format, to support multiple locales we need to add the specific localization and also add specific locale.Events: Parsley triggers events that allows ParsleyUI to work and for performance reasons they don’t rely on JQuery events but the usage is similar to JQuery i.e. parsley events will also bubble up like JQuery events. For example, if a field is validated then the event ‘field:validate’ will be triggred on the field instance then on to form instance and finally to the window.Parsley.$('#some-input').parsley().on('field:success', function() { // In here, `this` is the parlsey instance of #some-input }); window.Parsley.on('field:error', function() { // This global callback will be called for any field that fails validation. console.log('Validation failed for: ', this.$element); });Many times, we need some validation based on the response from server. Parsley provides an attributes i.e. data-parsley-remote and data-parsley-remote-validator to perform the same.Let’s consider this HTMLLet’s add the async validator on the window.Parsley object.window.Parsley.addAsyncValidator('customValidator', function (xhr) { console.log(this.$element); // jQuery Object[ input[name="q"] ] return 404 === xhr.status; }, 'customURL');Parsley is a very useful and powerful JavaScript form frontend validation library.Note: For developers building react based web applications, they can rely on FORMIK which is most popular library for building forms in React and React Native.ConclusionForms are important in HTML and it was needed and still needed now. is an html tag that allow us to perform HTTP methods like GET/POST operation without writing any code in JavaScript. Form defines an boundary to identify all set of the form field elements to be submitted to the server. For example, if we perform an enter key or clicking on submit button , the agent triggers form submission data based on each form field value to the server based on the action URL on the form.Before HTML5, all the elements are expected to be part of the to send the data to server. In HTML5, they maintained the backward compatibility and also enhanced the capabilities who may want to use AJAX and don’t want to rely on default behaviours i.e. they have enabled designers who expect more flexibility in having their form elements outside the form and still maintain the connections with the form.

Search

Web Development blog posts

How To Install and Setup React Native on Mac

By Rajesh Bhagia

How To Install and Setup React Native on Mac

By Rajesh Bhagia

How to Install Angular CLI

By Rajesh Bhagia

How to Install MongoDB on a Mac

By KnowledgeHut

How to Drop a MongoDB Database?

By Nabendu Biswas

How to Install Node.JS on Ubuntu

By Abhresh Sugandhi

How to Work With Forms In JavaScript

By KnowledgeHut

Search

Trending blog posts

Web Development blog posts

How To Install and Setup React Native on Mac

By Rajesh Bhagia

How To Install and Setup React Native on Mac

By Rajesh Bhagia

How to Install Angular CLI

By Rajesh Bhagia

How to Install MongoDB on a Mac

By KnowledgeHut

How to Drop a MongoDB Database?

By Nabendu Biswas

How to Install Node.JS on Ubuntu

By Abhresh Sugandhi

How to Work With Forms In JavaScript

By KnowledgeHut