Step-by-Step Guide to Front-End Project Configuration on Windows for Beginners

Step-by-Step Guide to Front-End Project Configuration on Windows for Beginners

Install Node.js/NPM/GIT/VS CODE on Windows via Node.js Installer

For users who prefer a graphical user interface (GUI) for software installation, Node.js offers a downloadable installer on its official website. Follow these steps to install Node.js and NPM on Windows using the installer:

Step 1: Download Node.js Installer

  1. Open a web browser and navigate to the Node.js Downloads page.

  2. Click the Windows Installer button to download the latest stable version with long-term support (LTS), which includes the NPM package manager.

  3. By default, the file is saved in the Downloads folder.

You may choose other versions of Node.js and NPM based on your system requirements and use case. If you are new to Node.js or do not require a specific version, it is recommended to select the LTS version for its stability.

Node.js Windows installer download page

Step 2: Install Node.js and NPM

After downloading the installer, follow the steps below:

1. Double-click the downloaded file to launch the installer.

2. The Node.js Setup Wizard will appear. Click Next to proceed.

Node.js setup wizard welcome screen

Click Next to proceed.

  1. Review the end-user license agreement, accept the terms, and click Next.

Node.js setup wizard end-user license agreement

Click Next to continue.

5. The installer asks to choose the installation location.

Node.js setup wizard install location

Leave the default location for a standard installation and click Next to proceed.

6. Select components to include or remove from the installation. The default options install Node.js, NPM, corepack, online documentation shortcuts, and add the programs to PATH.

Node.js setup custom setup

Customize the setup or click Next to accept the default values.

7. The following section shows the total required space for the installation and the available space on disk.

Node.js setup disk space requirements

Click OK to proceed. Select a different disk or install fewer features if the installation does not allow proceeding.

8. Choose whether to install additional dependencies for compiling native modules. Some NPM modules compile from C/C++ and require additional tools to function correctly (Python, Visual Studio Build Tools, and Chocolatey).

Node.js setup tools for native modules

If you use such modules, select the checkbox and click Next. The selection of this option starts an installation script after the Node.js installation is complete.

For a simple installation, skip this step and click Next to proceed.

7. Click the Install button to start the installation.

Node.js setup ready to install

8. The installer prompts for administrator confirmation to make changes to the device.

Node.js install administrator changes

Enter the administrator password if prompted and click Yes to continue.

9. The installation takes some time. When it is complete, the final screen shows a success message.

Node.js setup install finished

Click Finish to complete the installation and close the installer.

Step 3: Verify Installation

To verify Node.js installed successfully, run the following command in a command prompt or PowerShell:

node -v

The command shows the Node.js version installed on your system. Use the following command to check for NPM:

npm -v

Installation Git on Windows

There are two methods to install Git on Windows:

  1. Using the Git Installer: This GUI installer wizard is available on the official Git website and allows for a step-by-step configuration of the Git installation.

  2. Using Winget: A Linux-style CLI package manager for Windows that simplifies app installations but offers fewer configuration options.

Select your preferred installation method based on your desired level of control over the installation process and your preference for using the GUI or CLI.

Install Git on Windows via GUI

The GUI method involves downloading the Git installer wizard from the official website and configuring the installation in a traditional Windows step-by-step manner. This approach is ideal for users who prefer full control over the installation process and are not inclined to use the CLI.

Note: During installation, Git will prompt you to select a text editor. If you do not have one installed, it is advisable to do so beforehand. Our roundup of the best text editors for coding may assist in your decision.

Installation Steps:

1. Visit the official Git downloads page and click the download link for the latest Git version for Windows. Choose the 64-bit version unless you are using a 32-bit system.

Downloading the Git installer for Windows.

The link contains the latest 64-bit Git version for Windows. Alternatively, if you use a 32-bit system, download the 32-bit Git installer.

  1. Double-click the downloaded file to extract and launch the installer.

  2. Review the GNU General Public License and click Next when ready to proceed.

Accepting the GNU General Public License before installing Git on Windows.

4. Choose the installation location. Use the default unless a change is necessary, then click Next.

Select the installation destination for Git.

5. On the component selection screen, retain the defaults unless changes are needed, and click Next.

Selecting the components for Git installation.

6. Accept the creation of a start menu folder by clicking Next.

Selecting the Git start menu folder.

7. Select your preferred text editor for use with Git from the drop-down menu and click Next.

If you prefer to use a CLI text editor in Git Bash, select nano or Vim from the list.

Choosing the default text editor for Git on Windows.

8. Choose a name for your initial branch. The default is master. Click Next unless a different name is required.

Choosing the initial Git branch name during installation.

Note: If you are new to Git, check out our guides to Git branch name conventions and Git branching strategies.

9. Adjust the PATH environment if necessary. The recommended selection is the middle option. Click Next.

Adjusting the PATH in Git for Windows.

10. The installer prompts you to select the SSH client for Git to use. Git already comes with its own SSH client, so if you don't need a specific one, leave the default option and click Next.

Choosing which SSH client to use for Git.

Note: Check out our comparison of SSH and HTTPS for Git and which one you should use.

11. The next option relates to server certificates. The default option is recommended for most users. If you work in an Active Directory environment, you may need to switch to Windows Store certificates. Select your preferred option and click Next.

Choosing the HTTPS transport backend for Git.

12. The following selection configures line-ending conversion, which relates to the way data is formatted. The default selection is recommended for Windows. Click Next to proceed.

Configuring the line-ending conversion in Git.

13. Choose the terminal emulator you want to use. The default MinTTY is recommended for its features. Click Next to continue.

Selecting which terminal emulator to use for Git.

14. The next step allows you to choose what the git pull command will do. The default option is recommended unless you specifically need to change its behavior. Click Next to continue with the installation.

Selecting the default behavior of git pull.

15. The next step is to choose which credential helper to use. Git uses credential helpers to fetch or save credentials. The default option is the most stable one. Select your preferred credential manager and click Next.

Selecting the credential manager for Git.

16. Enable extra options if needed, such as symbolic links. Keep file system caching checked. Click Next.

Configuring extra options during Git installation.

17. If offered, avoid installing experimental features for stability. Click Install.

Configuring experimental options for Git.

18. Upon completion, you may view the Release Notes or launch Git Bash. Click Finish.

To verify the installation, run the following command

git --version

This command will display the installed Git version.

Installation of VS code

  • Navigate to Vs code

  • click on download