"Compilation errors encountered when trying to build Typescript within a Azure Function App running in

Currently, I am in the process of deploying to an Azure Function App from a container that resides inside Azure Container Registry.

To begin with, I utilized the func init command (selected the typescript option) and incorporated some code using the service bus topic trigger template. Upon testing with npm start locally, everything seems to be functioning correctly. There is a "prestart" command specified in the package.json file that builds the TypeScript which appears as follows:

"prestart": "npm run build && func extensions install",

The build operation generates a dist directory whereby when it initializes, it displays the following:

[8/14/19 8:45:43 PM] 1 functions loaded

All seems to be fine at this point. However, issues arise once I proceed to deploy this function to my function app from the Azure Container Registry.

When inspecting the container error logs via Kudu, I encounter the following messages:

2019-08-14T20:51:05.870505061Z       The following 1 functions are in error:
2019-08-14T20:51:05.870515162Z       ehmTopicTrigger: Invalid script file name configuration. The 'scriptFile' property is set to a file that does not exist.
2019-08-14T20:51:05.870540263Z       

If I attempt to run func start locally without the presence of the dist directory, I encounter the same error. This suggests to me that when the docker container initializes within the Function App environment, it may not be executing npm start or failing to build and create the dist directory for some reason.

I do not believe that committing and deploying the dist directory is the solution, especially considering that the .gitignore included in the template contains /dist.

What could possibly be the flaw in my approach?

Answer №1

After some troubleshooting, I successfully got it working by including npm run build in the docker file.

 FROM mcr.microsoft.com/azure-functions/node:2.0

 ENV AzureWebJobsScriptRoot=/home/site/wwwroot \
    AzureFunctionsJobHost__Logging__Console__IsEnabled=true

 COPY . /home/site/wwwroot

 RUN cd /home/site/wwwroot && \
    npm install && \
    npm run build 

This command generates the dist folder within the container.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for altering Koa's HTTP status code for undeclared paths

If an undefined route is accessed on a Koa server, what is the best method to change the default HTTP status code and response body? Currently, Koa returns a 404 status and 'Not Found' text in the body. I intend to modify this to 501 (Not implem ...

Enhancing npm version within Docker environment

While constructing a Node.js Docker image with the command docker build . -t imagename, I encountered warnings related to npm version. npm WARN deprecated This version of npm lacks support for important features, npm WARN deprecated such as scoped package ...

Having trouble utilizing Vue3 methods while utilizing the `<script setup lang="ts">` syntax

Looking to incorporate Vue into a non-Vue Class using the Composition API for a Chrome Extension project where having the entire thing as a Vue App doesn't make sense. The Vue Instance is being instantiated in the usual manner and then injected into ...

Setting up `ng serve` to detect changes in a containerized Angular 2 application

Currently, I am 'dockerizing' an existing Angular 2 application that is being run on angular-cli version 1.0.0-beta.31. I am facing difficulties in configuring ng serve to automatically reload my app whenever a file in the working directory is u ...

A guide on incorporating typings for d3-tip in TypeScript 2.0

Seeking to implement tooltips in my charts using the d3-tip library. After installing typings for d3-tip in Typescript 2.0: npm install @types/d3-tip --save The typings appear in my package.json: "dependencies": { "@types/d3": "^4.7.0", "@types/d3- ...

Full width divider for Ionic 2 lists

I am currently facing an issue with my Ionic 2 app where the divider is only full width on the last element in the list. I would like all elements to have a full width border, but I couldn't find any information about this in the documentation. Any he ...

How to smoothly transition between different components in Angular 2 with scroll actions

I am looking to dynamically change components based on user scrolling. Here is the behavior I want to achieve: When the user reaches the end of a component, the next component should load When the user reaches the top of a component, the previous compone ...

Sorting elements in an array based on an 'in' condition in TypeScript

I am currently working with an arrayList that contains employee information such as employeename, grade, and designation. In my view, I have a multiselect component that returns an array of grades like [1,2,3] once we select grade1, grade2, grade3 from the ...

Using Typescript to Declare Function and React Component Types

Currently challenging myself to delve into Typescript (ugh). Usually, I can deduce the appropriate type by analyzing the return values. Nonetheless, in this particular scenario, that method is proving ineffective. type SomeReactAProps = { Type1: ReactEle ...

Ensure that the output of a function in Typescript matches the specified data type

Looking for a way to inform TypeScript that the output of a function will always meet the type requirements of a variable, therefore avoiding any error messages? Type 'string | Date' is not assignable to type? For example: const getStringOrDat ...

Guide on implementing the Translate service pipe in Angular 2 code

So here's the issue... I've integrated an Angular 4 template into my application which includes a functioning translate service. The only problem is, I'm unsure of how to utilize that pipe in my code. In HTML, it's as simple as adding ...

Using Docker for React with multiple environments including development with hot live reload, staging, and production

Looking for advice on creating a Dockerfile that supports live reload during development with React frontend, NodeJS backend, and MongoDB persistence. Additionally, I want to include NGINX for production. Is it possible to achieve this by only editing th ...

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

Experimenting with different techniques such as performance.now() or new Date().getTime() has been done in order to monitor the processing time of every function/method. However, specifying these methods within each function for time calculation purposes h ...

"Using TSOA with TypeScript to return an empty array in the response displayed in Postman

I have successfully implemented CRUD operations using TSOA in TypeScript. However, I am facing an issue where I receive an empty array when making HTTP requests, despite adding data to the 'Livraison' table in MongoDB. https://i.sstatic.net/7IWT ...

The problem with MUI SwipeableDrawer not being recognized as a JSX.Element

Currently, I am implementing the SwipeableDrawer component in my project. However, an issue arises during the build process specifically related to the typings. I have made the effort to update both @types/react and @types/react-dom to version 18, but unf ...

What is the method for storing the values of a Select tag from react-select into a state?

I am currently facing an issue with setting values that I receive when selecting multiple items from a tag using "react-select". The state outcome I am looking for when selecting values from the tag should be: ['user._id', 'user._id', & ...

Ways to access file attributes and transfer a file in ionic 4?

I am facing an issue while attempting to transfer a file from my mobile device to Google bucket using Ionic 4. Although I can successfully upload the file, I am struggling to extract its properties from the file object. Below is the method I am using: as ...

Passing RxJs pipes as a parameter

Is there a way to pass pipes as parameters? For example: var mypipes = [ pipeA(() => { alert("a"); }), pipeB(() => { alert("b"); }) ...

The type x cannot be assigned to the parameter '{ x: any; }'

Currently learning Angular and Typescript but encountering an error. It seems to be related to specifying the type, but I'm unsure of the exact issue. Still new at this, so any guidance is appreciated! src/app/shopping-list-new/shopping-edit/shopp ...

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...