Umbraco v9 plugin: how to serve the URI of a static file in the Umbraco plugin to the Angular controller
Hi, I just started the development of an Umbraco plugin project on Visual Studio 2022.
I am working with two folders inside the solution project:
AppCode/{ProjectName} and AppPlugins/{ProjectName}.
In the angular controller I am using OpenLayers to render openstreetmap in my plugin. Now, OpenLayers need to be passed as an argument the url of a json file to apply an overlay to the map. I would like to include this json file in the Umbraco plugin, but cannot find a way to correctly provide a relative path to such file, that I have put into
App_Plugins/{ProjectName}/assets/file.json
How can I provide a relative path to such file, that also doesn't get broken once I install this plugin into an Umbraco site?
I see on package.manifest I can provide the URLs of the static css and js files, but I don't see any option on how to pass media or assets in the package.manifest...
If you use the url /App_Plugins/{ProjectName}/assets/file.json (notice the leading '/' to make sure that your url is root-relative), you will find your asset there. Now if you pack it in a nuget package, you need to make sure that that file is included as well. Not only that, you also need to make sure that the file is copied to the output upon build using the targets file. To test your targets file, you could make a test website and set the targets file as a reference. Build your website and you should find that all your assets in the app plugins folder are copied to the app plugins folder in your test website.
I inspected the nuget package I created, and the asset is indeed there, in
/App_Plugins/{ProjectName}/assets/file.json
However, after installing the package, "file.json" wasn't copied anywhere in Umbraco. Doing so is the purpose of the ".targets" file you mentioned, the one in /build/{ProjectName}.targets?
If so, is there any tutorial on how to modify such file so to accomplish my goal?
I don't know any tutorials unfortunately for how to exactly use a .targets file. It's basically a set of compiler instructions that can be referenced between projects (and NuGet packages).
What you should keep in mind is that the targets file is only evaluated at build time and not when you install the nuget package.
Have you tried building your test website? Is the file there after you have rebuilt your test website? If you want some inspiration, I have a working example in my URL Tracker package for Umbraco 9. You could take some inspiration from that.
That's interesting. I expected it would be accessible. If you access the backoffice, you'll see many assets are loaded from the App_Plugins folder. There are 2 things that come to mind:
Could it perhaps be that Umbraco only allows access to .js and .css files? You could test this by adding a .js file into the app_plugins folder and try to access it.
Could it perhaps be that Umbraco only allows direct access to app_plugins folder on debug builds?
Those are some things that you could experiment with. I'd love to hear the results!
Thank you again for your kind reply.
After a few modifications to my plugin (in terms of code), when I pack it I cannot find anymore the /App_Plugins folder (I found out by opening the .nupkg file as if it is a .zip file), and here is the content:
As you can see, there is no more /App_Plugins (it used to be there).
What am I doing wrong? I really don't know what to do... I searched the internet for days now...
here is the content of the plugin on Visual Studio:
Umbraco v9 plugin: how to serve the URI of a static file in the Umbraco plugin to the Angular controller
Hi, I just started the development of an Umbraco plugin project on Visual Studio 2022. I am working with two folders inside the solution project:
AppCode/{ProjectName} and AppPlugins/{ProjectName}.
In the angular controller I am using OpenLayers to render openstreetmap in my plugin. Now, OpenLayers need to be passed as an argument the url of a json file to apply an overlay to the map. I would like to include this json file in the Umbraco plugin, but cannot find a way to correctly provide a relative path to such file, that I have put into
App_Plugins/{ProjectName}/assets/file.json
How can I provide a relative path to such file, that also doesn't get broken once I install this plugin into an Umbraco site?
I see on package.manifest I can provide the URLs of the static css and js files, but I don't see any option on how to pass media or assets in the package.manifest...
Hi giogiu!
If you use the url
/App_Plugins/{ProjectName}/assets/file.json(notice the leading '/' to make sure that your url is root-relative), you will find your asset there. Now if you pack it in a nuget package, you need to make sure that that file is included as well. Not only that, you also need to make sure that the file is copied to the output upon build using the targets file. To test your targets file, you could make a test website and set the targets file as a reference. Build your website and you should find that all your assets in the app plugins folder are copied to the app plugins folder in your test website.Hi Dennis, thank you for your reply.
I inspected the nuget package I created, and the asset is indeed there, in
/App_Plugins/{ProjectName}/assets/file.json
However, after installing the package, "file.json" wasn't copied anywhere in Umbraco. Doing so is the purpose of the ".targets" file you mentioned, the one in /build/{ProjectName}.targets?
If so, is there any tutorial on how to modify such file so to accomplish my goal?
Hi giogiu,
I don't know any tutorials unfortunately for how to exactly use a .targets file. It's basically a set of compiler instructions that can be referenced between projects (and NuGet packages).
What you should keep in mind is that the targets file is only evaluated at build time and not when you install the nuget package.
Have you tried building your test website? Is the file there after you have rebuilt your test website? If you want some inspiration, I have a working example in my URL Tracker package for Umbraco 9. You could take some inspiration from that.
Hi Dennis,
You were actually right: the content of the plugin has been migrated in /App_Plugins, including:
/App_Plugins/{ProjectName}/assets/file.json
Apparently, the problem is that I cannot load it from the root site, at
https://localhost:44336/App_Plugins/{ProjectName}/assets/file.json
it returns a 404 not found ... do you know what could I do to solve this issue??
So, Umbraco does not expose the content within /App_Plugins ?
Hi giogiu,
That's interesting. I expected it would be accessible. If you access the backoffice, you'll see many assets are loaded from the App_Plugins folder. There are 2 things that come to mind:
Those are some things that you could experiment with. I'd love to hear the results!
Hi Dennis,
Thank you again for your kind reply. After a few modifications to my plugin (in terms of code), when I pack it I cannot find anymore the /App_Plugins folder (I found out by opening the .nupkg file as if it is a .zip file), and here is the content:
As you can see, there is no more /App_Plugins (it used to be there).
What am I doing wrong? I really don't know what to do... I searched the internet for days now...
here is the content of the plugin on Visual Studio:
I feel like I'm at a dead-end...
is working on a reply...