Functions have been successfully deployed, but they are not appearing on the Azure Portal

I am experiencing difficulties deploying basic Typescript functions to Azure. Despite a successful deployment using VS code and confirmation in the Output window, I cannot see any functions listed in the Azure Portal under the Function App:

https://i.stack.imgur.com/0Q8jv.png

Additionally, there are no functions showing up in the Azure tab within VS code:

https://i.stack.imgur.com/dHTRL.png

My project structure aligns with the recommendations outlined in the Typescript developer guide:

<project_root>/
 | - .vscode/
 | - dist/
 | | - src/
 | | | - functions/
 | | | | - myFirstFunction.js
 | | | | - myFirstFunction.js.map
 | | | | - mySecondFunction.js
 | | | | - mySecondFunction.js.map
 | - node_modules/
 | - src/
 | | - functions/
 | | | - myFirstFunction.ts
 | | | - mySecondFunction.ts
 | - .funcignore
 | - host.json
 | - local.settings.json
 | - package.json
 | - tsconfig.json

I have verified that AzureWebJobsFeatureFlags is configured as EnableWorkerIndexing, following a suggestion from another post on SO. The Typescript files are successfully compiled during deployment and can be found under dist > src > functions.

In an attempt to troubleshoot, I also deployed using the Core Tools. Once again, the deployment was deemed successful with the upload of the zip package, but no functions are visible.

What could be causing this issue?

typescriptazureazure-functions

Answer №1

This answer may not be what you want to hear, but based on my experience with a similar environment and issues, I took a different approach that might work for you. Instead of deploying from VS Code again, I created an HTTP Trigger Function locally following a guide, tested it, and then stopped at a certain step. From there, I published the code to a private GitHub repo and set up GitHub Actions for deployment in the Azure portal. Once everything was set up and running, a minor commit triggered the pipeline and updated the Function App as expected.

It seems like there might be some complications when changing deployment sources, but bypassing the direct deployment from VS Code and using GitHub Actions worked smoothly for me. I hope this solution helps you avoid the frustrations I faced over the weekend in getting things up and running. Best of luck!

Answer №2

After encountering a build error due to a missing npm dependency, the functions were not displaying in the Azure Portal. Surprisingly, there was no indication of this error during deployment from VS Code (or Core Tools). To avoid such issues in the future, it is advisable to always run an npm build locally before deploying to ensure everything builds correctly.

I had assumed that running an npm build was a standard part of the deployment process and that any errors would stop the deployment and be reported. However, it seems that this is not always the case.

Answer №3

It appears that your functions are missing the function.json file.

This is an example of what the file should contain:

 {
  "enabled": true,
  "scriptFile": "example.js",
  "bindings": [
    {
      "type": "httpTrigger",
      "direction": "in",
      "authLevel": "anonymous"
    }
  ]
}

Answer №4

I concur with @Gagan Bajwa that each function serves a unique purpose, particularly in the realm of Json. My recent endeavor involved crafting HTTP trigger functions using two distinct functions within a typescript runtime stack.

Function1 host.json:

{
  "bindings": [
    {
      "authLevel": "function",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "scriptFile": "../dist/src/HttpTrigger1/index.js"
}

Function2 host.json:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "scriptFile": "../dist/HttpTrigger2/index.js"
}

  • I have specified the scriptFile pathway within the function. Json.

Displayed below is the configuration of my folder structure and the progression of executing my code:

deployment status:

Output: Following deployment, I successfully accessed and ran the functions on the Azure portal.

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

Unable to locate module, encountered a webpack alias issue while using typescript and react

I'm currently in the process of setting up aliases in webpack. My goal is to make importing components in App.js easier by replacing: ./components/layout/Header/Header with: @components/layout/Header/Header This way, I can avoid potential issues w ...

reactjstypescriptnpmwebpackalias

limit the data types of values within an object using Typescript

When working with typescript, how can I define the type signature for a plain old javascript object that allows any key, but restricts the values to strings only? For example, {a:"foo"} and {b:"bar"} are considered valid values, while {a:[1,2,3]} and {b:3} ...

typescripttypes

Conceal components using routing in Angular2 release candidate 1

I have a request regarding certain elements that are to be displayed on all pages except the login page. I am considering using either ngIf or the hidden property of the elements to hide them when the user is on the login page. Here is what I have attempt ...

typescriptangularangular2-routingangular2-template

Updating a subscribed observable does not occur when pushing or nexting a value from an observable subject

Help needed! I've created a simple example that should be working, but unfortunately it's not :( My onClick() function doesn't seem to trigger the console.log as expected. Can someone help me figure out what I'm doing wrong? @Component ...

angulartypescriptionic2rxjs5

Combining meanings within a geometric interface

When setting up my routes, I like to include an additional field in the configuration. This is how I do it: app.config([ '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => { $routeProvider ...

angularjstypescripttypescript-typings

Stop the observable interval in Angular when the route changes

I initiated an interval in an Angular component, but the requests are still being made even when I navigate to a different route. How do I halt the interval? //function that returns an observable getAllPolls() { return Observable.interval(2000).swit ...

angulartypescriptrxjsangular2-routing

Error handling in Angular is not properly managing the custom exception being thrown

I am currently working on an Angular 12 application and I have a requirement to implement a custom ErrorHandler for handling errors globally. When I receive an error notification from the backend, I subscribe to it in the ToolService using this.notificati ...

javascriptangulartypescript

Ways to enhance focus on childNodes using Javascript

I am currently working on implementing a navigation system using a UL HTML Element. Here's the code I have so far: let htmlUL = <HTMLElement>document.getElementById('autocomplete_ul_' + this.name); if (arg.keyCode == 40) { // down a ...

javascriptangulartypescript

Issue arises when compiling React Redux due to a union type that includes undefined

I am currently in the process of learning how to integrate Redux with React using Typescript. I encountered a compilation error that relates to the type of my store's state, specifically as {posts: PostType[]}. The error message states: Type '{ p ...

reactjstypescriptreduxreact-reduxreducers

The 'posts' binding element is assumed to have a type of 'any' by default

Currently, I'm working on a code project that involves graphql, react, and typescript. In the middle of the process, I encountered an error message stating "Binding element 'posts' implicitly has an 'any' type." I am unsure about w ...

reactjstypescriptnext.jsgraphqltailwind-css

TypeScript overload does not take into account the second choice

Here is the method signature I am working with: class CustomClass<T> { sanitize (value: unknown): ReturnType<T> sanitize (value: unknown[]): ReturnType<T>[] sanitize (value: unknown | unknown[]): ReturnType<T> | ReturnType< ...

typescript

Customizing the main color scheme in Naive-UI with typescript

I am a beginner with Naive and I want to change the primary color of my app theme to orange. Initially, I used vuestic for this purpose but now I am struggling to implement it. Below is my main.ts file where I had the vuestic override (commented out). Ca ...

typescriptcolorsthemesvuestic

Ways to utilize the useRef method within the useContext hook while implementing Typescript

Struggling to incorporate useRef into my global Next.js useContext function while utilizing TypeScript. Attempted approach and encountered errors: interface tripAttributes{ tripTitle: string } const initialTripState: tripAttributes = { tripTitle ...

reactjstypescriptnext.jsreact-hooks

There seems to be an issue with transitioning the React.js page

I'm currently working on managing the page with react-hook, react-router-dom, and redux. The login functionality has been implemented, and I've written the code to redirect to the main page upon successful login. To achieve this, I utilized hi ...

reactjstypescriptreact-reduxreact-router

The string is being added to an array twice

I am managing two sets of lists where strings will be transferred between them. One set contains a list of strings for searching purposes. The other set contains the same list of strings but is not used as a filter. The second set functions in a similar ...

angulartypescript

The debate between using "this" versus "classname" to access static elements in

When working with TypeScript, I've observed that there are multiple valid approaches for accessing a static class member. class MyClass { private static readonly FOO: string = "foo"; public DoSomething(): void { console.log(MyClass.FOO);} pu ...

typescript

Naming convention for TypeScript accessors

Expanding on the previous solution When I convert the example object to JSON from the answer above: JSON.stringify(obj) The output is: {"_id":"3457"} If I intend to transmit this data over a service and store it in a database, I prefer not to use the ...

typescriptnaming-conventions

Elegantly intersect two types of functions in Typescript

Two function types are defined as follows: wrapPageElement?( args: WrapPageElementBrowserArgs<DataType, PageContext, LocationState>, options: PluginOptions ): React.ReactElement .. and .. wrapPageElement?( args: WrapPageElementNodeArgs<Data ...

typescript

Creating a dynamic selection in Angular without duplicate values

How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...

angulartypescript

Converting a specific string format to a Date object in TypeScript

I am in need of a solution to convert strings with the given format into Date objects using TypeScript: var dateTimeString:string = "20231002-123343" I have created my own method as shown below: var dateTime:string[] = dateTimeString.split(" ...

typescript