top
Sort by :

How to Install React on Mac

React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporationsIn this document, we will cover installation procedure of react on mac operating systemPrerequisitesThis guide assumes that you are using macOS. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on macSystem requirementsmacOS >=10.104 GB RAM10 GB free spaceInstallation Procedure To install react tooling we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for react development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for react development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install and the libraries and other tools to support react development.Let’s start with nodejs installation post completion on nodejs we will install create-react-app command line and will create a new react project1.Download nodejsVisit nodejs download page hereClick on macOS Installer to download the latest version of node installable package.2.Install nodejsClick on the download node-vxx.xx.xx.pkg ( for example node-v10.15.0.pkg) in previous step to start the installation which brings up below screen. Please click continueBy clicking continue in previous step you will be asked to accept license, please click continuePlease accept the agreement by clicking AgreeClick continueClick install, which would prompt you for the credentialsProvide username and password and click Install Software On successful installation you will see the below screen which shows the summary of the installation.To access the node and npm executable from terminal make sure /usr/local/bin is in your $PATH. You can verify that by running echo $PATH command in terminal3.Testing InstallationOpen terminal and run below command to test nodenode -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open terminal and run below command to test npmnpm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install create react appSetting up productive react development environment would need to configure tools like babel, webpack which are complex to configure for a newbie in react world. There are several tools that help to alleviate this problem out of which create react app is the easiest and finest tool with production grade configurations pre-built. The goodness of this tool is, it does not lock in and allows you to alter the configuration by ejecting the create react app.  We will install create-react-app using npm. On terminal run the install command shown belownpm install -g create-react-appOn successful installation you should see the output like above (note your create-react-app version may be different by the time you run this install command) Test create-react-appTo test the create-react-app, run below command create-react-app --versionCongratulations, you have successfully installed create-react-appRunning the first Hello World applicationCreate react application using create-react-app hello-react command as shown belowThis command creates a new folder named hello-react and creates all the files and setups the necessary libraries within this folder and makes the react project ready to be executed without any additional configuration Once project is created change into project directory and run application using npm start command as shown belownpm start command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://www.localhost3000.org/ by default.You will see a beautiful window like below one which show you the react icon and some text.As discussed, create react app comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the file create by create react app.Open the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by create-react-app. Let’s walkthrough them.node_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.public: This folder contains the assets that should be served publicly without any restrictions and contains files like index.html, favicon, manifest.json. src: This is the folder that contains all your development effort. As a react developer you spent lot of time in this folder creating components and other sources of code.Now let’s get into the files inside this folder. To start with index.js is the starting file of this project where the execution on your code starts, this file injects App component which is exported from App.js. All the output you see in the browser is resultant on this file, lets make some change to this file, we will edit the existing code with new changes as shown in below screenshot.Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of create-react-app to tooling setup.  With new changes your browser window should look like belowUninstall create-react-appYou can uninstall any library or tool setup via npm install can be uninstalled using npm uninstall. Perform below step to remove create-react-app installed previouslyOn command prompt run npm uninstall -g @angular/cli
Rated 4.5/5 based on 24 customer reviews
How to Install React on Mac 6764 How to Install React on Mac Tutorials
Susan May 11 Feb 2019
React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporationsIn this document, we will ...
Continue reading

How to Install React on Ubuntu

React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporations.In this document, we will cover installation procedure of angular on Ubuntu 16.04 operating system PrerequisitesThis guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04System requirementsUbuntu 16.044 GB RAM10 GB free spaceInstallation ProcedureTo install react tooling we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for react development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for react development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install and the libraries and other tools to support react development.Let’s start with nodejs installation post completion on nodejs we will install create-react-app command line and will create a new react project1.Install nodejs - Setup PPATo get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commandscd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.shRun the downloaded script using below commandsudo bash nodesource_setup.shThe PPA will be added to your configuration and your local package cache will be updated automatically2.Install Run sudo apt-get install nodejs -y to install 3.Testing nodejs InstallationOn terminal run below command to test nodenode -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is >v10.0.0)On terminal run below command to test npm=npm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install create react appSetting up productive react development environment would need to configure tools like babel, webpack which are complex to configure for a newbie in react world. There are several tools that help to alleviate this problem out of which create react app is the easiest and finest tool with production grade configurations pre-built. The goodness of this tool is, it does not lock in and allows you to alter the configuration by ejecting the create react app.  We will install create-react-app using npm. On terminal run the install command shown belownpm install -g create-react-appOn successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)Test create-react-appTo test the create-react-app, run below commandcreate-react-app --versionCongratulations, you have successfully installed create-react-appRunning the first Hello World application   1. Create react application using create-react-app command line using below commandcreate-react-app hello-reactThis command creates a new folder named hello-react and creates all the files and setups the necessary libraries within this folder and makes the react project ready to be executed without any additional configuration   2. Once project is created change into project directory and run application using npm start command as shown belownpm start command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://www.localhost3000.org/ by default.You will see a beautiful window like below one which show you the react icon and some text.As discussed, create react app comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the file create by create react app.Open the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by create-react-app. Let’s walkthrough themnode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.public: This folder contains the assets that should be served publicly without any restrictions and contains files like index.html, favicon, manifest.jsonsrc: This is the folder that contains all your development effort. As a react developer you spent lot of time in this folder creating components and other sources of code.Now let’s get into the files inside this folder. TO start with index.js is the starting file of this project where the execution on your code starts, this file injects App component which is exported from App.js. All the output you see in the browser is resultant on this file, lets make some change to this file, we will edit the existing code with new changes as shown in below screenshot.Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of create-react-app to tooling setup.  With new changes your browser window should look like belowUninstall create-react-appYou can uninstall any library or tool setup via npm install can be uninstalled using npm uninstall. Perform below step to remove create-react-app installed previouslyOn command prompt run npm uninstall -g @angular/cliUninstall nodejsYou can uninstall any software setup via apt install can be uninstalled using apt remove. Perform below step to remove nodejs installed previouslyOn terminal run below command to uninstall nodesudo apt remove nodejs
Rated 4.5/5 based on 26 customer reviews
How to Install React on Ubuntu

How to Install React on Ubuntu

Tutorials
React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporations.In this document, we will...
Continue reading

How to Install React on Windows

React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporations.In this document, we will cover installation procedure of react on windows 10 operating systemPrerequisitesThis guide assumes that you are using Windows 10. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on windows 10 System requirementsWindows 10 OS4 GB RAM10 GB free spaceInstallation ProcedureTo install react tooling we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for react development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for react development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install and the libraries and other tools to support react development.Let’s start with nodejs installation post completion on nodejs we will install create-react-app command line and will create a new react project1.Download nodejsVisit nodejs download page hereClick on windows Installer to download the latest version of node installer.2.Install nodejsClick on the downloaded node-vxx.xx.xx.msi (for example node-v10.15.0.msi) in previous step to start the installation which brings up below screen. Please click NextBy clicking next in previous step, you will be asked to accept license, please accept by clicking checkbox and click Next Click NextClick NextClick Install, this may need elevated permissions, provide necessary rights requested. This step would take several minutes to finish installationClick Finish3.Testing InstallationOpen command prompt and run below command to test nodenode -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open command prompt and run below command to test npmnpm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install create react appSetting up productive react development environment would need to configure tools like babel, webpack which are complex to configure for a newbie in react world. There are several tools that help to alleviate this problem out of which create react app is the easiest and finest tool with production grade configurations pre-built. The goodness of this tool is, it does not lock in and allows you to alter the configuration by ejecting the create react app.  We will install create-react-app using npm. On terminal run the install command shown belownpm install -g create-react-appOn successful installation you should see the output like above (note your create-react-app version may be different by the time you run this install command)Test create-react-app To test the create-react-app, run below commandcreate-react-app --versionCongratulations, you have successfully installed create-react-appRunning the first Hello World applicationCreate react application using create-react-app command line using below commandcreate-react-app hello-reactThis command creates a new folder named hello-react and creates all the files and setups the necessary libraries within this folder and makes the react project ready to be executed without any additional configurationOnce project is created change into project directory and run application using npm start command as shown belownpm start command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://localhost:3000 by default.You will see a beautiful window like below one which show you the react icon and some text.As discussed, create react app comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the file create by create react app.Open the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by create-react-app. Let’s walkthrough themnode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.public: This folder contains the assets that should be served publicly without any restrictions and contains files like index.html, favicon, manifest.jsonsrc: This is the folder that contains all your development effort. As a react developer you spent lot of time in this folder creating components and other sources of code.Now let’s get into the files inside this folder. To start with index.js is the starting file of this project where the execution on your code starts, this file injects App component which is exported from App.js. All the output you see in the browser is resultant on this file, lets make some change to this file, we will edit the existing code with new changes as shown in below screenshot.Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of create-react-app to tooling setup.  With new changes your browser window should look like belowUninstall create-react-app You can uninstall any library or tool setup via npm install can be uninstalled using npm uninstall. Perform below step to remove create-react-app installed previouslyOn command prompt run npm uninstall -g @angular/cliUninstall nodejsTo uninstall previously installed nodejs follow below stepsPress windows + R to open run and type appwiz.cpl and press ok. This will open Programs and Features the look for node.jsDouble click node.js or right click and select uninstall which will prompt as below and then choose, YesNodejs uninstallation process will initiate and would ask you to authorize the same via user control. Choose Yes, this will take a while and complete
Rated 4.5/5 based on 30 customer reviews
How to Install React on Windows

How to Install React on Windows

Tutorials
React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporations.In this document, we will...
Continue reading

How to Install Angular on Mac

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this document, we will cover installation procedure of angular on mac operating systemPrerequisitesThis guide assumes that you are using macOS. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on macSystem requirementsmacOS >= 10.104 GB RAM10 GB free spaceInstallation ProcedureTo install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for angular development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for angular development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project1.Download nodejsVisit nodejs download page hereClick on macOS Installer to download the latest version of node installable package. 2.Install nodejsClick on the download node-vxx.xx.xx.pkg ( for example node-v10.15.0.pkg) in previous step to start the installation which brings up below screen. Please click continueBy clicking continue in previous step you will be asked to accept license, please click continue Please accept the agreement by clicking AgreeClick continueClick install, which would prompt you for the credentialsProvide username and password and click Install SoftwareOn successful installation you will see the below screen which shows the summary of the installation.To access the node and npm executable from terminal make sure /usr/local/bin is in your $PATH. You can verify that by running echo $PATH command in terminal3.Testing InstallationOpen terminal and run below command to test node node -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open terminal and run below command to test npmnpm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version Is  >5 )Install angular cliSetting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build processWe will install angular cli using npm. On terminal run the install command shown belownpm install -g @angular/cli On successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command) Test @angular/cli To test the @angular/cli run ng version commandCongratulations, you have successfully installed @angular/cliRunning the first Hello World applicationCreate angular application using ng new command as shown belowThis command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configurationOnce project is created change into project directory and run application using ng serve command as shown belowng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://localhost:4200 by default.On successful execution you should see the below output in browserAs discussed, angular cli comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders createdOpen the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by ng new command. Let’s walkthrough theme2e: this folder contains end to end testing source and configuration code. If you wish to write end to end testing automation code, you efforts go into this foldernode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made. src: This is the folder that contains all your development effort. As a angular developer you spent lot of time in this folder creating modules, components, services, directive etc.,Other files that are outside src folder and configuration files for angular cli, editor, typescript, linting and npmNow let’s get into src folder. Within this folder there are several other folders like app – this folder contains all your source code, and this is the place all your development effort goesassets – contains the static asses to like images etc., environments – contains the per environment configuration file which holds the settings to be used for dev/test and prod environmentsOther files are configuration files and settings.Out all files main.ts is the starting file and the project code execution starts from this file.Let's make a code change to the AppComponent, open app.component.html and make the changes as shown in below code Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of angular cli tooling setup.   With new changes your browser window should look like belowCongrats!! You have setup an angular project Uninstall angular cliOn command prompt run npm uninstall -g @angular/cli 
Rated 4.5/5 based on 26 customer reviews
How to Install Angular on Mac

How to Install Angular on Mac

Tutorials
Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this docu...
Continue reading

How to Install Angular on Windows

 Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this document, we will cover installation procedure of angular on windows 10 operating systemPrerequisitesThis guide assumes that you are using Windows 10. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on windows 10System requirementsWindows 10 OS4 GB RAM10 GB free space Installation Procedure To install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for angular development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for angular development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project1.Download nodejs 1.Visit nodejs download page here2.Click on windows Installer to download the latest version of node installer. 2.Install nodejs1.Click on the downloaded node-vxx.xx.xx.msi ( for example node-v10.15.0.msi) in previous step to start the installation which brings up below screen. Please click Next2.By clicking next in previous step you will be asked to accept license, please accept by clicking checkbox and click Next3.Click Next4.Click Next5.Click Install, this may need elevated permissions provided necessary rights requested6.Click Finish 3.Testing InstallationOpen command prompt and run below command to test node node -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open command prompt and run below command to test npm npm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install angular cliSetting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build processWe will install angular cli using npm. On terminal run the install command shown belownpm install -g @angular/cliOn successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command) Test @angular/cliTo test the @angular/cli run ng version commandCongratulations, you have successfully installed @angular/cli Running the first Hello World applicationCreate angular application using ng new command as shown belowThis command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration2.Once project is created change into project directory and run application using ng serve command as shown belowng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at by default.On successful execution you should see the below output in browserAs discussed, angular cli comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders createdOpen the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by ng new command. Let’s walkthrough theme2e: this folder contains end to end testing source and configuration code. If you wish to write end to end testing automation code, you efforts go into this foldernode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.src: This is the folder that contains all your development effort. As a angular developer you spent lot of time in this folder creating modules, components, services, directive etc.,Other files that are outside src folder and configuration files for angular cli, editor, typescript, linting and npmNow let’s get into src folder. Within this folder there are several other folders likeapp – this folder contains all your source code, and this is the place all your development effort goesassets – contains the static asses to like images etc.,environments – contains the per environment configuration file which holds the settings to be used for dev/test and prod environmentsOther files are configuration files and settings.Out all files main.ts is the starting file and the project code execution starts from this file.Lets make a code change to the AppComponent, open app.component.html and make the changes as shown in below code Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of angular cli tooling setup.  With new changes your browser window should look like belowCongrats!! You have setup an angular projectUninstall angular cliYou can uninstall any library or tool setup via npm install can be uninstalled using npm uninstall. Perform below step to remove angular cli installed previouslyOn command prompt run npm uninstall -g @angular/cliUninstall nodejsPress windows + R to open run and type appwiz.cpl and press ok. This will open Programs and Features the look for node.js Double click node.js or right click and select uninstall which will prompt as below and then choose YesNodejs uninstallation process will initiate and would ask you to authorize the same via user control. Choose Yes, this will take a while and complete
Rated 4.5/5 based on 26 customer reviews
How to Install Angular on Windows

How to Install Angular on Windows

Tutorials
 Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In thi...
Continue reading

How to Install Angular on Ubuntu

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this document, we will cover installation procedure of angular on Ubuntu 16.04 operating systemPrerequisitesThis guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04System requirementsUbuntu 16.044 GB RAM10 GB free spaceInstallation ProcedureTo install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.What is Nodejs and Why you need for angular development?Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.What is npm and Why you need for angular development?Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project1.Install nodejs  - Setup PPATo get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commandscd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.shRun the downloaded script using below commandsudo bash nodesource_setup.shThe PPA will be added to your configuration and your local package cache will be updated automatically2.InstallRun sudo apt-get install nodejs -y to install3.Testing nodejs InstallationOn terminal run below command to test nodenode -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is >v10.0.0)On terminal run below command to test npmnpm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Install angular cliSetting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build processWe will install angular cli using npm. On terminal run the install command shown belownpm install -g @angular/cliOn successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)Test @angular/cliTo test the @angular/cli run ng version commandCongratulations, you have successfully installed @angular/cliRunning the first Hello World applicationCreate angular application using ng new command as shown belowThis command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration2.Once project is created change into project directory and run application using ng serve command as shown belowng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://localhost:4200 by default.On successful execution you should see the below output in browserAs discussed, angular cli comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the files and folders createdOpen the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by ng new command. Let’s walkthrough theme2e: this folder contains end to end testing source and configuration code. If you wish to write end to end testing automation code, you efforts go into this foldernode_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.src: This is the folder that contains all your development effort. As a angular developer you spent lot of time in this folder creating modules, components, services, directive etc.,Other files that are outside src folder and configuration files for angular cli, editor, typescript, linting and npmNow let’s get into src folder. Within this folder there are several other folders likeapp – this folder contains all your source code, and this is the place all your development effort goesassets – contains the static asses to like images etc.,environments – contains the per environment configuration file which holds the settings to be used for dev/test and prod environmentsOther files are configuration files and settings.Out all files main.ts is the starting file and the project code execution starts from this file.Lets make a code change to the AppComponent, open app.component.html and make the changes as shown in below code Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of angular cli tooling setup.  With new changes your browser window should look like belowCongrats!! You have setup an angular projectUninstall angular cliOn command prompt run npm uninstall -g @angular/cliUninstall nodejsOn terminal run below command to uninstall nodesudo apt remove nodejsRunning the first Hello World applicationOpen any text editor and write the following code console.log("Hello World Node!!")Save the file as helloworld.jsOpen command prompt and navigate to the folder where you save helloworld.js and  run below commandnode helloworld.jsHow it worksnode command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshot.
Rated 4.5/5 based on 22 customer reviews
How to Install Angular on Ubuntu

How to Install Angular on Ubuntu

Tutorials
Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.In this docu...
Continue reading

How to Install Node.js on Ubuntu

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applicationsIn this document, we will cover installation procedure of nodejs on Ubuntu 16.04 operating systemPrerequisitesThis guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04System requirementsUbuntu 16.044 GB RAM10 GB free space Installation Procedure1.Setup PPATo get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commandscd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.shRun the downloaded script using below command sudo bash nodesource_setup.shThe PPA will be added to your configuration and your local package cache will be updated automatically2.InstallRun sudo apt-get install nodejs -y to install3.Testing InstallationOn terminal run below command to test node node -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)On terminal run below command to test npm npm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Running the first Hello World applicationOpen any text editor and write the following codeconsole.log("Hello World Node!!")Save the file as helloworld.jsOpen command prompt and navigate to the folder where you save helloworld.js and run below commandnode helloworld.jsHow it worksnode command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshotUninstall nodejsOn terminal run below command to uninstall nodesudo apt remove nodejs
Rated 4.5/5 based on 20 customer reviews
How to Install Node.js on Ubuntu

How to Install Node.js on Ubuntu

Tutorials
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applicat...
Continue reading

A Guide to Understanding Gradient Boosting Machines: Lightgbm and Xgboost

I have, in the past, used and tuned models without knowing what they do. I have mostly been successful at this because most of them had just a few parameters that needed tuning like learning rate, no. of iterations, alpha or lambda and it's easy to guess how they might affect the model.So, when I came across LightGBM and XGBoost during a Kaggle challenge, I thought of doing the same with them too. I found it pretty complicated to understand the theory behind them so I tried to get away with using them as black-boxes.But I soon found out that I can’t. Its because they have a HUGE number of hyperparameters.. ones that can make or break your model! To top it off, their default setting is often not the optimal one. So, in order to effectively use the model, I had to get at least a high-level understanding of what each parameter represents and understand which ones might be the most important.The motive behind this articleMy aim is to give you that quick, high-level, working knowledge of Gradient Boosting Machines (GBM) and making you understand Gradient boosting through LightGBM and XGBoost. This way you will be able to tell what’s happening in the algorithm, what parameters you should tweak to make it better and go directly to implementing them in your own analysis.It's great if you want to know more about the theory and the math behind gradient boosting. First, let me explain to you what is Gradient boosting is and then point you to some excellent resources to understand the theory and the math behind GBM using the parameters of XGBoost and LightGBM.What is Boosting?Boosting refers to a group of algorithms which transforms weak learner to strong learners.Boosting algorithms are classified into: Gradient BoostingXGBoostAdaBoost etc.What is Gradient Boosting in Machine Learning: Gradient boosting is a machine learning technique for regression and classification problems which constructs a prediction model in the form of an ensemble of weak prediction models.Elements in Gradient Boosting AlgorithmBasically, Gradient boosting Algorithm involves three elements:A loss function to be optimized.Weak learner to make predictions.An additive model to add weak learners to minimize the loss function.In the article, “A Kaggle Master Explains Gradient Boosting”, the author quotes his fellow Kaggler, Mike Kim says-My only goal is to gradient boost over myself of yesterday. And to repeat this every day with an unconquerable spirit.With each passing day, we aim to improve ourselves by focusing on the mistakes of yesterday.And you know what? — GBMs do that too!An ensemble of predictorsGBMs do it by creating an ensemble of predictors. Each one of those predictors is sequentially built by focusing on the mistakes of the previous one.What’s an ensemble?It is simply a group of items viewed as a whole rather than individually.Now, back to the explanation...A GBM basically creates lots of individual predictors and each of them tries to predict the true label. Then, it gives its final prediction by averaging all those individual predictions (note however that it is not a simple average but a weighted average).Q-  “Averaging the predictions made by lots of predictors”.. that sounds like Random Forest!That is in fact what an ensemble method is. And random forests and gradient boosting machines are just 2 types of ensemble methods.One important difference between the two is that the predictors used in Random forest are independent of each other whereas the ones used in gradient boosting machines are built sequentially where each one tries to improve upon the mistakes made by its predecessor.You should check out the concept of bagging and boosting. So, check out this quick explanation to do that.Q: Okay, so how does the algorithm decide the number of predictors to put in the ensemble?It does not. We do. And that brings us to our first important parameter — n_estimators : We pass the number of predictors that we want the GBM to build inside the n_estimators parameter. The default number is 100.So, let’s talk about these individual predictors now.In theory, these predictors can be any regressor or classifier but in practice, decision trees give the best results.The sklearn API for LightGBM provides a parameter- boosting_type and the API for XGBoost has parameter- booster to change this predictor algorithm. You can choose from —  gbdt, dart, goss, rf (LightGBM) or gbtree, gblinear or dart (XGBoost). [Note however that a decision tree, almost always, outperforms the other options by a fairly large margin. The good thing is that it is the default setting for this parameter; so you don’t have to worry about it.]Creating weak predictorsWe also want these predictors to be weak. A weak predictor is simply a prediction model that performs better than random guessing.Q: Wait a second.. that seems backwards. Don’t we want to have strong predictors that can make good guesses? Nope. We want the individual predictors to be weak so that the overall ensemble becomes strong. This is because every predictor is going to focus on the observations that the one preceding it got wrong. When we use a weak predictor, these mislabelled observations tend to have some learnable information which the next predictor can learn. Whereas if the predictor were already strong, it would be likely that the mislabelled observations are just noise or nuances of that sample data. In such a case the model will just be overfitting to the training data. Also note that if the predictors are just too weak, it might not even be possible to build a strong ensemble out of them.Now back to creating a weak predictor.. this seems like a good area to hyperparameterise.These are the parameters that we need to tune to make the right predictors (which are decision trees):max_depth (both XGBoost and LightGBM): This provides the maximum depth that each decision tree is allowed to have. A smaller value signifies a weaker predictor.min_split_gain (LightGBM), gamma (XGBoost): Minimum loss reduction required to make a further partition on a leaf node of the tree. A lower value will result in deeper trees.num_leaves (LightGBM): Maximum tree leaves for base learners. A higher value results in deeper trees.min_child_samples (LightGBM): Minimum number of data needed in a child (leaf). According to the LightGBM docs, this is a very important parameter to prevent overfitting.Note: These are also the parameters that you can tune to control overfitting.The subtree marked in red has a leaf node with 1 data in it. So, that subtree can’t be generated as 1 < `min_child_samples` for the above caseSubsamplingEven after we do all this, it might just happen that some trees in the ensemble are highly correlated.Q: Excuse me, what do you mean by highly correlated trees?I mean decision trees that are similar in structure because of similar splits based on same features. This means that the ensemble as a whole is going to store less amount of information than what it could have stored if the trees were different. So we want our trees to be as little correlated as possible.To combat this problem, we subsample the data rows and columns before each iteration and train the tree on this subsample. These are the relevant parameters to look out for:subsample (both XGBoost and LightGBM): This specifies the fraction of rows to consider at each subsampling stage. By default, it is set to 1, which means no subsampling.colsample_bytree (both XGBoost and LightGBM): This specifies the fraction of columns to consider at each subsampling stage. By default, it is set to 1, which means no subsampling.subsample_freq (LightGBM): This specifies that bagging should be performed after every k iterations. By default, it is set to 0. So make sure that you set it to some non-zero value if you want to enable subsampling.That is it. Now you have a good overview of the whole story of how a GBM works. There are 2 more important parameters though which I couldn’t fit into the story. So, here they are —learning_rate (both XGBoost and LightGBM): It is also called shrinkage. The effect of using it is that learning is slowed down, in turn requiring more trees to be added to the ensemble. This gives the model a regularisation effect.class_weight (LightGBM): This parameter is extremely important for multi-class classification tasks when we have imbalanced classes. I recently participated in a Kaggle competition where simply setting this parameter’s value to balanced caused my solution to jump from the top 50% of the leaderboard to the top 10%.You can check out the sklearn API for LightGBM here and that for XGBoost here.Finding the best set of hyperparametersYou can use sklearn’s RandomizedSearchCV in order to find a good set of hyperparameters. It will randomly search through a subset of all possible combinations of the hyperparameters and return the best possible set of hyperparameters(or at least something close to the best).But if you wish to go even further, you could look around the hyperparameter set that it returns using GridSearchCV. Grid search will train the model using every possible hyperparameter combination and return the best set. Note that since it tries every possible combination, it can be expensive to run.Where can you use these algorithms?They are good at effectively modeling any kind of structured tabular data. Multiple winning solutions of Kaggle competitions use them. Here’s a list of Kaggle competitions where LightGBM was used in the winning model.They are simpler to implement than many other stacked regression techniques and they easily give better results too.There is another class of tree ensembles called — Random Forests. While GBMs are a type of boosting algorithm, this is a bagging algorithm (did you check the link about bagging and boosting that I mentioned above?). So, despite being implemented using decision trees like GBMs, Random Forests are much different from them. Random Forests are great because they will generally give you a good enough result with the default parameter settings, unlike XGBoost and LightGBM which require tuning. But once tuned, XGBoost and LightGBM are much more likely to perform better.Below diagram is the sample of Random ForestsAlright. So now you know all about the parameters that you need to in order to successfully use XGBoost or LightGBM to model your dataset!Before I finish off, here are a few links that you can follow to understand the theory and the math behind gradient boosting (in order of my preference) — “How to explain Gradient Boosting” by Terrance Parr and Jeremy HowardThis is a very lengthy, comprehensive and excellent series of articles that try to explain the concept to people with no prior knowledge of math or the theory behind it.“A Kaggle Master Explains Gradient Boosting” by Ben GormanA very intuitive introduction to gradient boosting. (P.S: It is the very article that gave me the quote which I used in the beginning)“A Gentle Introduction to the Gradient Boosting Algorithm for Machine Learning” by Jason BrownleeIt has a little bit of history, lots of links to follow up on and a gentle explanation with no math (!).You can also take up Machine learning courses to understand these things better.
Rated 4.5/5 based on 12 customer reviews
A Guide to Understanding Gradient Boosting Machines:  Lightgbm and Xgboost

A Guide to Understanding Gradient Boosting Machines: Lightgbm and Xgboost

Tutorials
I have, in the past, used and tuned models without knowing what they do. I have mostly been successful at this because most of them had just a few parameters that needed tuning like learning rate, no....
Continue reading

How to Install Node.js on Mac

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applicationsIn this document, we will cover installation procedure of nodejs on mac operating systemPrerequisitesThis guide assumes that you are using mac os. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document. Audience:This document can be referred by anyone who wants to install latest nodejs on macSystem requirementsmacOS >= 10.104 GB RAM10 GB free spaceInstallation Procedure 1.Download1.Visit nodejs download page here2.Click on macOS Installer to download the latest version of node installable package.2.Install1.Click on the download node-vxx.xx.xx.pkg (for example node-v10.15.0.pkg) in previous step to start the installation which brings up below screen. Please click continue2.By clicking continue in previous step you will be asked to accept license, please click continue3.Please accept the agreement by clicking Agree4.Click continue5.Click install, which would prompt you for the credentials6.Provide username and password and click Install Software 7.On successful installation you will see the below screen which shows the summary of the installation.To access the node and npm executable from terminal make sure /usr/local/bin is in your $PATH. You can verify that by running echo $PATH command in terminal 3.Testing InstallationOpen terminal and run below command to test node node -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open terminal and run below command to test npm npm -v You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )Running the first Hello World applicationOpen any text editor and write the following code console.log("Hello World Node!!")Save the file as helloworld.jsOpen command prompt and navigate to the folder where you save helloworld.js and  run below command node helloworld.jsHow it worksnode command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshot.
Rated 4.5/5 based on 30 customer reviews
How to Install Node.js on Mac

How to Install Node.js on Mac

Tutorials
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applicat...
Continue reading

How to Install Node.js on Windows

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications In this document, we will cover installation procedure of nodejs on windows 10 operating systemPrerequisitesThis guide assumes that you are using Windows 10. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.Audience:This document can be referred by anyone who wants to install latest nodejs on windows 10 System requirementsWindows 10 OS4 GB RAM10 GB free space Installation Procedure1. DownloadVisit nodejs download page here     2. Click on windows Installer to download the latest version of node installer.2. Install  1. Click on the downloaded node-vxx.xx.xx.msi ( for example node-v10.15.0.msi) in previous step to start the installation which brings up below screen. Please click Next   2. By clicking next in previous step you will be asked to accept license, please accept by clicking checkbox and click Next 3. Click Next4. Click Next5. Click Install, this may need elevated permissions provided necessary rights requested6. Click Finish3. Testing InstallationOpen command prompt and run below command to test nodenode -v You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)Open command prompt and run below command to test npm npm -vYou should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  > 5 )Running the first Hello World applicationOpen any text editor and write the following codeconsole.log("Hello World Node!!")Save the file as helloworld.jsOpen command prompt and navigate to the folder where you save helloworld.js and  run below commandnode helloworld.jsHow it worksnode command line with file name as an argument will load, read, compile and execute the instructions from the file and execute them. Since we have one line of JS code which prints the text “Hello World Node” to console inside helloworld.js file you see the output as shown in above screenshotUninstall node.jsPress windows + R  to open run and type appwiz.cpl and press ok.This will open Programs and Features the look for node.jsDouble click node.js or right click and select uninstall which will prompt as below and then choose YesNodejs uninstallation process will initiate and would ask you to authorize the same via user control. Choose Yes, this will take a while and complete
Rated 4.5/5 based on 45 customer reviews
How to Install Node.js on Windows

How to Install Node.js on Windows

Tutorials
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applicat...
Continue reading

Take A Leap And Boost Your Career Path With Python

Python tops the charts when compared with all other programming languages for the most promising career options for technical professionals. Career opportunities are growing exceptionally worldwide for Python developers. Python is not the new player in the programming space but it has gained huge popularity in the market. It is an open-source programming language with excellent development capabilities and maximum versatility. The coding efforts are reduced specially for better testing and performance. This is the reason why Python professionals are in much demand in today’s fast-growing tech market.If you are starting your career as a Python beginner, most of the companies will generally offer you a package of INR 3 LPA - INR 5 LPA. The above infographic will give you a clear idea and help you understand the past, present and future of Python.To grab a successful job in Python you should follow a well-defined learning path always. Because of less availability, the Python developers are earning attractive incomes compared to other similar resources or skills available in the market. This is why there are plenty of institutes offering training programs in Python, but note that industry expert trainers are limited even today. You could learn Python faster and become a most demanding resource in the IT space only with the right training. If you really want to start your career in Python, start your Python training today offered by a reputed institute who could help you achieve your dreams successfully.Companies across the world are looking for highly skilled and qualified Python professionals as they believe that they are able to give a right solution as per the client requirements. Python, PHP, Ruby, C++, Java, SQL, Salesforce, Big Data Hadoop are a few skills that are expected to beat in 2018 and beyond. However, Python remains the high-level programming language gaining a competitive edge over others.Become a successful Python leader with the right skills and right Python certification!
Rated 4.5/5 based on 11 customer reviews
Take A Leap And Boost Your Career Path With Python

Take A Leap And Boost Your Career Path With Python

Tutorials
Python tops the charts when compared with all other programming languages for the most promising career options for technical professionals. Career opportunities are growing exceptionally worldwide fo...
Continue reading