title | description | author | ms.topic | ms.date | ms.custom | ms.author |
---|---|---|---|---|---|---|
Set up a lab with React on Linux using Azure Lab Services |
Learn how to set up labs to React development class. |
emaher |
how-to |
04/25/2022 |
devdivchpfy22 |
enewman |
[!INCLUDE preview note]
React is a popular JavaScript library for building user interfaces (UI). React is a declarative way to create reusable components for your website. There are many other popular libraries for JavaScript-based front-end development. We'll use a few of these libraries while creating our lab. Redux is a library that provides predictable state container for JavaScript apps and is often used in compliment with React. JSX is a library syntax extension to JavaScript often used with React to describe what the UI should look like. NodeJS is a convenient way to run a webserver for your React application.
This article shows you how to install Visual Studio Code for your development environment, the tools, and libraries needed for a React web development class.
To set up this lab, you need an Azure subscription to get started. If you don't have an Azure subscription, create a free account before you begin.
Once you have an Azure subscription, you can create a new lab plan in Azure Lab Services. For more information on creating a new lab plan, see the tutorial on how to set up a lab plan. You can also use an existing lab plan.
Enable your lab plan 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 plan setting | Instructions |
---|---|
Marketplace images | Enable the 'Ubuntu Server 18.04 LTS' image. |
For instructions on how to create a lab, see Tutorial: Set up a lab. Use the following settings when creating the lab.
Lab setting | Value |
---|---|
Virtual Machine Size | Small |
We recommend that you test your workloads to see if a larger size is needed. For more information about each size, see VM sizing.
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 your preferred web browser.
-
Install Node.js.
sudo apt install nodejs
-
Install Node Package Manager, which will be used for installing the React, Redux, and JSX.
sudo apt install npm
-
Install Visual Studio Code.
-
Install Reactive Native Tools extension for Visual Studio Code.
-
Optionally, install extensions for development with Redux and JSX.
Create React App is an officially supported way to create a React app and requires no further configuration if you're using npm 5.2 and above. For more instructions on how to use Create React App, see their getting started documentation.
Other components needed for a React-based website are installed using NPM into a specific application. For example, enter the following commands to install the Redux and JSX libraries:
npm install react-redux
npm install react-jsx
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
To run the app in development mode, use the npm start
built-in command. The local and network urls will be listed in the command output. For more information on how to use HTTPS instead of HTTP, see Create React App: Using HTTPS in Development.
Official Ubuntu builds have iptables installed and will allow all incoming traffic by default. However, if you're using a VM that has a more restrictive firewall, add an inbound rule to allow traffic to the NodeJS server. The example below uses iptables to allow traffic to port 3000.
sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
Important
Educators 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. The virtual machine size we chose was Small, which is 20 lab units.
For a class of 25 students with 20 hours of scheduled class time and 10 hours of quota for homework or assignments, the cost estimate would be:
25 students × (20 scheduled hours + 10 quota hours) × 20 Lab Units × USD0.01 per hour = 150.00 USD
Important
The cost estimate is for example purposes only. For current pricing information, see Azure Lab Services pricing.
[!INCLUDE next steps for class types]