Layne  Fadel

Layne Fadel

1624507980

Deploying an Express, Node.js, React App (with TypeScript) to Azure Web Apps Using

Introduction

In this post, I will discuss building a basic Express-Node app in TypeScript with a React frontend and deploying it to Azure Web Apps with GitHub Actions. This was a tedious process that involved piecing together steps from various blog posts and StackOverflow threads. I have linked them below in the references.

Here is the folder structure we will be setting up.

1. Initialise the Project

Create the root folder for your project and inside it, run the following command to initialise the project. This will create a package.json file.

npm init -y

2. Install Dependencies

Run the following commands in the root folder to install the required packages. The save-dev flag installs the packages as development dependencies. We will use ts-node during local development to run TypeScript files directly, without the need for precompilation using tscconcurrently will be used to run the React frontend and Express servers at the same time.

npm install express
npm install typescript tslint ts-node --save-dev
npm install @types/express @types/node --save-dev
npm install concurrently nodemon --save-dev

3. TypeScript Config Setup

We will use ts-lint to check for readability, maintainability, and functionality errors. Run the following command in the root folder to create the tslint.json file.

tslint --init

Next, create a tsconfig.json file and add the following to it. The options can be added or changed as required.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    },
  },
  "include": ["server/**/*"]
}

#azure #nodejs #github-actions #react

Deploying an Express, Node.js, React App (with TypeScript) to Azure Web Apps Using