How to Install React JS in Windows

Reading Time: 4 minutes

React.js (React) is an open-source JavaScript library useful in building user interfaces. React is a library so our main focus for this article is installing a JavaScript environment and a Package Manager so that we can download and install libraries including React.

When we are done, you will have a React environment you can use to start development on your Liquid Web server.

 

Install Node.js

The first step is to download the Node.js installer for Windows. Let’s use the latest Long Term Support (LTS) version for Windows and choose the 64-bit version, using the Windows Installer icon.

nodejs1

Once downloaded, we run the Node.js installer (.msi fuke) and follow the steps to complete the installation.

nodejs installationNow that we have Node.js installed, we can move on to the next step.

 

The Command Prompt Environment

We’ll need to use the command prompt (command line) to interact with Node.js and the Node Package Manager (NPM) to install React. Let’s take a few minutes to cover the commands we’ll need to use to get around. Here are the basic commands we will need to get around and create folders/directories:

nodejs_commands

 

Open a Command Prompt in Windows

Click the Start Menu (1), start typing the word command (2), then choose either Command Prompt or the Node.js command prompt (3) — either choice will work.

nodejs_commandprompt

A command prompt window will open with the path showing as C:\Users\<username> where the <username> on your system will be the user you are logged in as.

nodejs_commandprompt2

To execute a command, we type the command and any required options, then press Enter to execute it and see the results. Let’s walk through each of the commands listed above to see what happens:

dir

nodejs_commandprompt3

Let’s look at the contents of the downloads folder with this command:

dir downloads

nodejs_commandprompt4

The path shows we are still in the directory C:\Users\ReactUser>, however, we are looking at the contents of C:\Users\ReactUser\downloads and we see that it has one file. Let’s move to the downloads directory with this command:

cd downloads

nodejs_commandprompt5

We’ve changed to the downloads folder as the command prompt shows C:\Users\ReactUser\Downloads>. You can use the dir command to see the contents of this directory/folder. Next, let’s go back to the previous directory with this command:

cd..

nodejs_commandprompt6

Now we are back to where we started. Let’s create a new directory for our first project and name it reactproject1. We’ll use the command:

mkdir reactproject1

nodejs_commandprompt7

Again, we use the dir command to list the files within our current folder.

dir

nodejs_commandprompt8

If you want to learn more about commands, please check out these links:

 

Install React on Windows

There are two ways to install React for your projects. Let’s look at each approach so that you can decide which one you prefer to use.

 Option 1 

  • Create a project folder
  • Change to the project folder
  • Create a package.json file
  • Install React and other modules you choose

This install option allows you to full control over everything that is installed and defined as dependencies.

Step 1: To get started, we need to open a command prompt.

Step 2: Create a project folder named reactproject1:

mkdir reactproject1

Press Enter to execute the command, and we get a new directory called reactproject1. If you did this as part of the Command Prompt examples, you could skip this step as it will tell you that it already exists.

Step 3: Move to the project folder, using cd reactproject1, so we can install React into it.

cd reactproject1

At this point, you will see your prompt indicate C:\Users\ReactUser\reactproject1.

Step 4: Create a package.json file, the following command will walk you through creating a package.json file.

npm init

nodejs_commandprompt9

Step 5: Install React and other modules using npm install — save react, thiswill install React into your project and update the package.json file with dependencies.

npm install --save react

We can install additional packages using npm install — save and the name of the package we want to install. Here we are installing react-dom: npm install — save react-dom

npm install --save react-dom

 

 Option 2 

  • Install Create-React-App package to simplify the process of creating and installing React into your projects

 

 

Step 1: To get started, we need to open a command prompt and type npm install -g create-react-app. This installs the Create-React-App module which makes it very easy to create and deploy React into projects with a single command.

Note
When using create-react-app ensure you are in the desired directory/folder location as this command will create the project folder in the current path.

npm install -g create-react-appCreate-React-App is installed in the following location: C:\Users\<username>\AppData\Roaming\npm\node_modules\create-react-app\

Once Create-React-App is installed, we can use it to create a project folder and install React and dependencies automatically.

To make sure you are in the desired directory when creating a new project, you can use dir to see where you are, and cd <directory_name> or cd.. to get to the desired location.

Step 2: To create a new project and deploy React into it, we run create-react-app <project_name>. Let’s do this to create reactproject2.

create-react-app reactproject2

The entire process is automated and begins with creating a new React app folder for the project, then installs packages and dependencies. The default packages include react, react-dom, and react-scripts. The installation will take a few minutes.

nodejs_commandprompt10

Run a React Project Application

To run our new project, we need to use the command prompt to change to the project folder, then start it. The cd reactproject2  command will take us to the reactproject2 folder.

cd reactproject2

And npm start will run the project application.

nodejs_commandprompt11

The default browser will open and load the project:

localhostTo learn more about React, you may find these links helpful:

You now have your environment set for building out projects!  If you are running our lightning fast servers, our support team is at your disposal for any questions you may have.

How to Check Server Load on a Windows Server

Reading Time: 6 minutes

What Does Server Load Mean?

Checking a server’s load allows us to evaluate server resources and confirm they are sufficient for any running application. It enables us to troubleshoot slow performance and reliably pinpoint any server resource that may need attention.

While there are many tools and options available, today let’s focus on Windows Task Manager as a way to help us quickly see what is going on, and interact with applications, processes, and services to identify the load. This article will also include an introduction to Resource Monitor as it can be opened from Task Manager to provide more detail.

Continue reading “How to Check Server Load on a Windows Server”

How to Setup and Use Microsoft SQL Server Management Studio

Reading Time: 4 minutes

What is SSMS?

SQL Server Management Studio (SSMS) is a free Windows application to configure, manage, and administer Microsoft SQL Server (MSSQL). SSMS includes an Object Explorer to view and interact with databases and other elements, a Query window to write and execute Transact-SQL queries, and script editors for developers and administrators. Continue reading “How to Setup and Use Microsoft SQL Server Management Studio”

Troubleshooting Microsoft SQL Server Error 18456, Login failed for user

Reading Time: 4 minutes

Login errors with Microsoft SQL Server (MSSQL) are a fairly common issue and can be easily solved with some basic troubleshooting steps. Before we dig in, let’s take a look at the details of the error to try and determine the cause.

connect to server error

Solutions to Microsoft SQL Server Error 18456

Sometimes, the error presents as “login failed for user ‘<username>’,” this information will help us as we identify the user we need to troubleshoot. From the message, we’ll know the error number as a reference to search for next steps. In this case, it is Microsoft SQL Server, Error: 18456.

Other times, we may only see “Microsoft SQL Server Error 18456” along with the severity and state number. On its own, a state number might not mean much, yet it can offer more details as to what is wrong and where to look next.

These states of the error, 18456, are the most common. The descriptions and potential solutions offer a quick explanation and potential troubleshooting guide.

mssql errors and potential solutions

Step 1:  Log In with Remote Desktop

The troubleshooting and solutions require you to login to the server or at least be able to make a Windows Authentication connection to MSSQL using Microsoft SQL Server Management Studio. The most common and easiest method is to connect directly to the server with a Remote Desktop Connection. If you need more information about Remote Desktop Connection, these Knowledge Base articles will help you get connected:

Step 2: Run Microsoft SQL Server Management

Once you are logged into the server, you’ll want to run Microsoft SQL Server Management Studio (SSMS). SSMS is the tool best suited to configure, manage, and administer MSSQL.

mssql server management

When you start SSMS, you will be asked to log in to the server. By default, most MSSQL servers have Windows Authentication enabled, meaning you must log in with the Windows Administrator or the account specified as the SQL Administrator when MSSQL was installed and configured.

connect to mssql server

In addition to Windows Authentication, MSSQL supports SQL Server Authentication. Depending on the version of MSSQL and how it was installed and configured, you may or may not have SQL Server Authentication enabled by default.

Step 3: Checking the Server Authentication Mode

Once we login to SSMS using Windows Authentication, we need to check the security settings to confirm whether MSSQL is set up to allow both Windows and SQL Authentication.

In SSMS, right-click the Server Name at the top of the Object Explorer window and choose Properties.

Next, click the Security page.

mssql security properties

If you find Windows Authentication is the only mode configured, this is the likely cause of Error 18456, Login failed for user ‘<username>’.

Setting the Server authentication mode to allow SQL Server and Windows Authentication, you will be able to login to MS-SQL with a SQL user and password or a Windows user and password. After making this change, you will need to restart the SQL Server service.

 

Step 4: Restart the SQL Service

In SSMS, right-click the Server Name at the top of the Object Explorer window and choose Restart to apply the new authentication mode settings.  

In the above example, Windows Authentication mode was the only mode configured, and the Error 18456 occurred because the user ‘sa’ is a SQL user and SQL Server Authentication was not permitted.

 

Step 5: Checking SQL User Permissions

As we check the SQL user permissions, we need to answer the following questions:

  • Is the user allowed to log in?
  • Does the user have a valid password set up?
  • Does the user have the needed permissions for access to the desired database?

In SSMS Object Explorer, expand Security, Logins. Locate the user that was failing to log in. A red x on the user indicates this user has login disabled.

smss login properties

To allow the user to login, right-click the user and choose Properties, then click the Status page. Enabling login for the user and click OK.

enable login user properties

After refreshing the list user logins, we can confirm the user no longer has a red x present. This should allow the user to log in. In this example, the SQL user ‘sa’ failed to log in because there was no permission to log in. 

Continuing with user troubleshooting, right-click the user and choose Properties, then click the General page. Here you can enter a new password and then enter the confirmation password. Click OK to save the new password. We set a new password for the user so that we are certain of the password when we attempt to log in.

sa login user properties

Step 6: Mapping the User to the Database

Our last step in troubleshooting a user is to check user mapping to verify the user has access to the desired database and to set or verify their role for the database. Right-click the user and choose Properties, then click the User Mapping page. Select the Database from the list of databases. From the database role memberships, select the desired/required memberships. Click OK.

map user to mssql database

In this example, we mapped the user ‘ProdX709’ to the database Production X709.2019 and granted them database role db_owner. In many cases, you only need a user to have db_datareader and db_datawriter roles to be able to read and write to the database.

 

In this troubleshooting article, we learned how to identify specifics of Error 18456 to help us track down the root cause of the issue. Still looking for support?  Our MSSQL database solutions come with assistance from our technical support team. Find out how our high-availability database can work for you!