WebStorm + Express: How do I fix static file resolution?

The application works just fine, yet WebStorm complains about not being able to resolve various static files, including images, CSS and JS. Again, everything works.

Static file root is setup in index.js as follows:

app.use(express.static(__dirname + '/static'));

Modifying the href to make WebStorm happy breaks the application:

<link rel="stylesheet" href="/static/css/styles.css">

I believe I have @types setup correctly:

How do I fix this? It's more of an annoyance than a problem. Although, auto-complete does not work because of this.

The general approach for this kind of issues: mark your static folder as a Resource Root. This allows IDE resolving such paths relative to that folder.

From https://www.jetbrains.com/help/webstorm/configuring-project-tructure.html#content-root

Files in Resource Root folders can be referenced relative to these folders instead of specifying full paths. For example, when you start typing within the src attribute of the HTML img tag, auto-completion will suggest images from the Resource Root folder.

To configure the category of a folder:

• Right-click the folder in the Project tool window, select Mark Directory as from the context menu, and then select the necessary category.

  

• Alternatively, open the Settings / Preferences screen, go to Directories node, and configure the categories of folders there.