CODEWITHSUNDEEP
node.jstypescriptazureexpressweb-deployment
Eric Cheng
Eric Cheng

Reputation: 517

how to deploy ExpressJS in TypeScript to Azure?

I am trying to create an Express Server for API service, using this express generator:
generator-express-no-stress-typescript

I can run the Express Server locally using npm run dev.
I can run npm run compile to create the production build in dist folder.
The the dist folder product package can be started using npm run start without issue.

However, I failed to deploy the app to my Azure server. I have followed this Microsoft document, to deploy the Express.js to Azure App Service using Visual Studio Code. After all steps, when I browse the app it shows You do not have permission to view this directory or page.

Any article or document I can refer to? Thanks for any help.

package.json scripts section by default created by generator-express-no-stress-typescript

  "scripts": {
    "start": "node dist/index.js",
    "compile": "ts-node build.ts && tsc",
    "dev": "nodemon server/index.ts | pino-pretty",
    "dev:debug": "nodemon --exec \"node -r ts-node/register --inspect-brk\" server/index.ts | pino-pretty",
    "lint": "eslint -c .eslintrc.js \"{server, test}/**/*.{js,ts,tsx}\" --quiet",
    "lint:fix": "eslint -c .eslintrc.js \"{server, test}/**/*.{js,ts,tsx}\" --quiet --fix",
    "test": "mocha -r ts-node/register test/**/*.ts --exit",
    "test:debug": "mocha -r ts-node/register --inspect-brk test/**/*.ts --exit"
  },

Upvotes: 1

Views: 3555

Answers (1)

Eric Cheng
Eric Cheng

Reputation: 517

I finally figure out what's wrong with my package and deployment. Here I would share my findings.

Azure require iisnode/web.config to execute the app

when I review this Microsoft tutorial document again, I found in their sample project, there is a web.config file at the root folder

refer to this link: https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config

it say "This configuration file is required if iisnode is used to run node processes behind"

I copied the same file to my project, which my project is generated by this generator: generator-express-no-stress-typescript
What I did to my project:

  1. use the generator to generate the sample Express API Server
  2. run npm run compile to compile the product build into dist folder
  3. copy the above web.config into root folder
  4. modify the content, for path point to index.js, change to dist/index.js
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="dist/index.js" verb="*" modules="iisnode"/>
    </handlers>
    ......
        <rule name="DynamicContent">
          ......
          <action type="Rewrite" url="dist/index.js"/>
        </rule>

after all, I deploy the app to Azure again, now the log file error message changed. Now it shows something like "Invalid port number, should be in range 0 - 65xxx"

fixing the listing port logic

it seems Azure port number environment is not a number, it is a pipe string: https://www.geekwithopinions.com/2013/12/09/node-js-and-azure-is-it-a-port-or-a-pipe/

however, the generated index.ts logic, since it is TypeScript, the logic parseInt for the port, and it caused error.

// server/index.ts
......
const port = parseInt(process.env.PORT ?? '3000');
export default new Server().router(routes).listen(port);

For quick test, I just want to prove how the Express Server could work on Azure, so I don't want to fix the TypeScript logic. Instead, I directly modified the compiled js file which generated by npm run compile, the tsc generated file dist/index.js which to be executed by Azure:

// const port = parseInt((_a = process.env.PORT) !== null && _a !== void 0 ? _a : '3000');
const port = (_a = process.env.PORT) !== null && _a !== void 0 ? _a : '3000';
exports.default = new server_1.default().router(routes_1.default).listen(port);

deploy again, and it works now :)

Upvotes: 2

Related Questions