In a previous article, I showed you how to setup Build and Release for a React.JS app using Azure DevOps.

We also discussed a test using a combination of Jest, Mocha and Selenium that was executed as part of the release after deploying the app on Azure App Service.

In this tutorial, I will extend the concept by creating a React.JS app using TypeScript, and transpiling it as a regular React.JS app before deploying it.

TypeScript is a way to write typed JavaScript. You can create React.JS compliant JavaScript code using TypeScript. When it is transpiled, pure JavaScript is generated which can then be deployed.

Before we start, I want to emphasize that this is not a tutorial on TypeScript, but it is an overview of how to build and deploy a React.JS app that is written using TypeScript.

Editorial Note: This article assumes familiarity with TypeScript. If you are new to TypeScript, check our TypeScript tutorials.

Datadog, a monitoring and analytics platform that integrates with more than 250 technologies, unites metrics, traces, and logs in one platform so you can get full visibility into your infrastructure and applications. With powerful dashboards, anomaly and outlier detection, and distributed tracing, Datadog helps you get a handle on the performance of your .NET applications, as well as their underlying infrastructure.

Click here to try Datadog’s full-stack monitoring for free! (No Credit Card required)

Create a TypeScript React.js App

To create such TypeScript code that can get transpiled, create-react-app utility can be used. The command to create such an app is “npx-create-react-app typescript” where “x” is the name of the application.

This command will create a React.JS app with a source structure in line with TypeScript requirements. It will have an “index.tsx” file instead of index.js file and in addition to “package.json” file, it will have “tsconfig.json” file.There will also be a few more .ts files and App.test.tsx file for testing the app.

First move the entire code under a folder called ssgsems. This step is necessary because some tasks in the build cannot use the root of the repository. Now, under the src folder, which is created by default, let’s add a new folder named components and a file named “hellouser.tsx”. This is going to be the React.JS component that will be used for interactions with the user.

Add the following code to that file:

import * as React from 'react';
interface IState {
  user: string;
  userbuffer: string;
class Description extends React.Component<IState> {
  public state: IState = {
    user: "",
    userbuffer: "",
  public greet = () => {
    var user = "";
    if (this.state.user != "") {user = this.state.user + ", " + this.state.userbuffer;}
    else {user = this.state.userbuffer;}
    this.setState({ user });
  public stateChange = (event: any) => {
    this.state.userbuffer =;
  public render() {
    return (
        <p>Enter your name:  
            <input type="text" onChange={this.stateChange} />
        <button onClick={this.greet}>Greet User</button>
        <p>Hello {this.state.user}</p>
export default Description;

This component will render a textbox and a button.

For this app to get working, you will also need to make a change in index.tsx as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Hello from "./components/hellouser";
import * as serviceWorker from './serviceWorker';

    document.getElementById('root') as HTMLElement

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:

Notice the import statement for the component that you had created earlier and its invocation in the render method.

When the user enters her / his name in the textbox and clicks the button, the app will send a greeting. The app will then display all the users it has greeted in the current session.


Let’s create a team project named ReactAppTs with a git repository:

git remote add origin https://<<yourazuredevopsaccount>>

Commit and Push the code to the remote repository. Detailed steps for these are available in the earlier article that I had written

Creating a Build Pipeline Definition

Now that the code is in the repository, you can create a build pipeline definition. This pipeline definition will have only four tasks:

1. npm install: This will install all the necessary node modules on the agent. It will require the path of folder that contains package.json file.

2. npm custom: This task is to create an optimized version of JavaScript code using the built-in react script to convert TypeScript to JavaScript. You have to also provide the value “run-script build” to the parameter Commands and Arguments. When executed, this task will create a folder named “build” under the ssgsems folder on the agent.

3. Archive Files: This task will create a .ZIP package of the created “build” folder. Set “ssgsems/build” as the folder to archive and “$(Build.ArtifactStagingDirectory)/” as the archive file to be created.

4. Publish Artifact: This task will publish the “” archive as a drop artifact. You have to provide path of the created “” archive, ““$(Build.ArtifactStagingDirectory)/” as path to publish.


When you queue and run this build pipeline, it will create an artifact named “drop” which will contain a file that is used to deploy the app.

Creating a Release Pipeline

Your next step is to create a release pipeline that will deploy the app to Azure App Service – Web App. Create a new Web App as a placeholder for the app that you are going to deploy. An earlier article in this series on Building and Deploying ReactJs apps gave detailed steps to do do. You can read it here >

While creating the release pipeline, select the template of “Deploy Node.js app to Azure App Service”. Give the name Dev to the first stage. Add the artifact that is created by the build pipeline that you have created earlier. Select Latest as the default version to be deployed.


In the tasks section, Select and Authorize your Azure subscription. Select the Azure Web App that you have created earlier in the App Service name parameter. In the Deploy Azure App Service task, ensure that the text box for “Generate web.config parameters …..” is blank, remove text if any in it. Also ensure that in the “Application and Configuration Settings” section “App Settings” text box is also blank.


After you create a new release in this pipeline, you will get the deployed application. It now shows a custom UI instead of the placeholder that was added when the app was created.

You can create similar stages in the release pipeline for Test, UAT, Prod etc. and set the tasks as appropriate. If you want to test the app, check the steps in an earlier article in the series.


In this article, we stepped you through the creation of a React.JS app using TypeScript and then to do the build and deployment to an Azure App Service as a web app.

Thanks to Tim Sommer for his suggestions and for technically reviewing this article.

This article has been editorially reviewed by Suprotim Agarwal.