Set up lab for React on Windows
This article will show how to install Visual Studio 2019 for your development environment, and the tools, and libraries needed for a React web development class.
To set up this lab, you need an Azure subscription and lab account to get started. If you don't have an Azure subscription, create a free account before you begin. Once you get an Azure subscription, you can create a new lab account in Azure Lab Services. For more information about creating a new lab account, see the tutorial on how to setup a lab account. You can also use an existing lab account.
Lab account settings
Enable your lab account settings as described in the following table. For more information about how to enable Azure Marketplace images, see Specify the Azure Marketplace images available to lab creators.
|Lab account setting||Instructions|
|Marketplace image||Enable 'Visual Studio 2019 Community (latest release) on Windows Server 2019 (x64)' image for use within your lab account.|
The size of the virtual machine (VM) that we recommend depends on the types of workloads that your students need to do.
|Lab setting||Value and description|
|Virtual Machine Size||Medium|
We recommend testing your workloads to see if a larger size is needed. For more information about each size, see VM sizing.
Template machine configuration
The steps in this section show how to complete the following to set up the template VM:
- Install Development tools.
- Install debugger extensions for your web browser.
- Update firewall settings.
Install Development tools
- Install your preferred web browser. The image has Internet Explorer installed by default.
- Navigate to Node.js website and select the Download button. You can use the latest long-term service (LTS) version, current version with that latest features, or a previous release. Installing NodeJS will also install Node Package Manager, which will be used for installing the React, Redux, and JSX.
- Update Visual Studio 2019 to the latest release, if needed.
Other components needed for a React-based website are installed using NPM into a specific application. To add NPM packages, see manage your NPM packages in Visual Studio.
For example, if using the Node.js Interactive Window in a project, enter the following commands to install the React, Redux, and JSX libraries:
.npm install react .npm install react-dom .npm install react-redux .npm install react-jsx
To create your first Node.js with React app in Visual Studio, see Tutorial: Create a Node.js and React app in Visual Studio.
Install debugger extensions
Install the React Developer Tools extensions for your browser so you can inspect React components and record performance information.
- React Developer Tools Edge add-on
- React Developer Tools Chrome extension
- React Developer Tools FireFox add-on
Update firewall settings
By default, inbound traffic to your Node.js server will be blocked. If you wish to access a student's website while it's running, add an in-bound firewall rule to allow the traffic. Look at the Application Port project property to see which port will be used during debugging. The example below uses the New-NetFirewallRule PowerShell cmdlet to allow access to port 1337.
New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow
Instructors must use the template VM or another lab VM to access a student's website.
Let’s cover an example cost estimate for this class. Suppose you have a class of 25 students. Each student has 20 hours of scheduled class time. Another 10 quota hours for homework or assignments outside of scheduled class time is given to each student. The virtual machine size we chose was Medium, which is 55 lab units.
- 25 students × (20 scheduled hours + 10 quota hours) × 55 Lab Units × USD0.01 per hour = 412.50 USD
The cost estimate is for example purposes only. For current pricing information, see Azure Lab Services pricing.
The template image can now be published to the lab. See publish the template VM for further instructions.
As you set up your lab, see the following articles: