Insert an Azure Slot Setting into a Javascript File - azure

Is there a way, possibly in deploy.cmd, to alter the contents of a file? Either ALL of the contents, or Search and Replace, or Grep, or anything?
I need a way to alter an environment variable in a javascript file based on a Slot Setting in Azure.
Or, put another way: I want to take a Slot Setting in an Azure slot, and insert it into a javascript file.

No sure why you want to inject those values in the runtime instead of during build and deployment. But here are a few possible solutions:
Azure App Service slot settings are exposed as environment variables, your javascript could make an ajax call back to the server to an API you develop that can return the values of those environment variables.
Inject the value from your app's backend before serving the JS file to the client on the fly (and maybe cache it), in this case, you have to intercept the request for that file and serve your modified version.
Add a json file to your website, let's call it config.json, and change its content for each slot based on your requirements. Then your JavaScript app can read that file by issuing an AJAX GET to /config.json, which will represent the slot config.

Related

Azure Remote Monitoring - How to add parameters to CloudToDeviceMethods?

In Azure Remote Monitoring, you can create your own CloudToDeviceMethods. How do you add parameters to those methods?
Usually those methods look like this:
function main(context, previousState, previousProperties) { ... }
...in a .js file that has the name of a specific method. But I don't see how I can add parameters to a method like that. I also want to see those parameters in the Azure Remote Monitoring Solution Accelerator web, so I can call that method and send in some parameters.
A CloudToDeviceMethod supports exactly one parameter, and that is the JSON payload that you can give to it. Of course you can add many properties to that payload to act like separate parameters. On the device side, reading that parameter looks like this in C# and like this in JavaScript (Node example)
You mentioned that you want to be able to add those parameters in the Remote Monitoring Solution Accelerator. This is entirely possible with some changes to the ReactJS code. The main files you need to look at are the Job page, right now it calls the device method without a body. Eventually the request is built here, you can see the JsonPayload is left empty.

Environment Variables in Angular2

So I have an angular 2/4 app, with a node server.js to serve it. I want to access an environment variable (backend endpoint is localhost for dev and another endpoint for prod). If it matters, this app (as well as the backend app) are meant to be deployed to Heroku.
I have tried finding a solution to this, but everything I found seems to lead to using multiple environment.ts files (1 for each configuration), and then swapping between them based on the ng build flag --env. But I am apprehensive about this solution as it seems to mix configuration and source code. I also would like to avoid (if possible) being required to re-build/re-deploy whenever an endpoint/config changes.
In Spring Boot, I'm used to using config like ${PORT:8080} in the properties files. Though I've also created multiple .properties files in the past so I understand that sometimes it's just simpler/cleaner to do so.
In node, I'm used to doing env variables like process.env.PORT || 8080. Since my angular app is served by a node server.js, I would think I should be able to do something similar. But when I try using process.env in my environments/environment.ts file, I get the error Cannot find name 'process'.
So my question is essentially, if I am required to create multiple environment property files or is there an alternative.
Thanks
You basically have two choices, regardless of whether your config is stored in environment variables or in a config file on the server. Your clientside code needs it, so you either need for serve it as part of your assets bundle, or you have to fetch it as a separate request. That separate request could be an Ajax call or just a js file that gets served separately from the rest of the bundle.
I think ideally, the only difference between the production app and the nonproduction app on the client should be the data, the bundle density (in dev you don't want your stuff minified for example) and what url it's served from. Everything else should be discoverable from the source url, imo

How to retreive endpoint of a service

i want to add my project's endpoint in the project tear down script. What is the syntax in order to get the endpoint for all requests and test requests as the user will assign their endpoint via all requests and test requests before running the project?
i seen an example using test step but i don't want to retrieve it via the test step route:
testRunner.testCase.getTestStepByName("dd").getHttpRequest().getEndpoint();
The tear down script use either , log, context, runner nd project variables.
Thanks
Based on the information updated in the question, it looks like you have to access the endpoint in the TearDown Script of the project.
It also appears that you would need to execute the same set of tests against different base url of the endpoint and domain. Not sure even you might need to use the credentials accordingly.
Considering the above, it would be easy to project level properties.
Here you would go:
Create a project level custom property for base url, say BASE_URL as property name and value as http://10.0.0.1:8008. Of course, change it with actual value as needed with respect to the tests to be executed.
Similarly create another project level property for domain, say DOMAIN_NAME and provide its value according the test.
Double click on service / interface, click on Service Endpoints tab.
Remove all the existing values.
Add a new endpoint by clicking + icon.
Add ${#Project#BASE_URL} as endpoint and ${#Project#DOMAIN_NAME} as domain values
If required, you use the same approach for the credentials.
Now click on Assign button there and choose All requests and Tests option from the dropdown.
Similarly, do the same if you have multiple services / interfaces.
How to access the above values in TearDown Script?
log.info "Endpoint : ${project.getPropertyValue('BASE_URL')}"
log.info "Domain : ${project.getPropertyValue('DOMAIN_NAME')}"
When you want to change domain or base url, just change the values of the respective project properties before you run execute the tests against different servers / environments.
EDIT:
The values for the endpoint or domain can passed dynamically (without even changing value saved in the project) from command line using SOAPUI_HOME/bin/testrunner utility while executing the tests. For more details, refer documentation

Using API Apps with Swagger in dev/test/production environments

I'm migrating a combined Azure Website (with both Controllers and ApiControllers) to a split Web App and API App. Let's call it MyApp.
I've created MyAppDevApi, MyAppTestApi, and MyAppProductionApi API Apps (in different App Services) to host the three environments, expecting to promote code from one environment to another.
So far, I've only deployed to MyAppDevApi, since I'm just getting started.
When I do Add/Azure API App Client to my UI-only project to start referring to the API app, and I point it to MyAppDevApi, it uses AutoRest to create classes in my code. These classes now all have the name MyAppDevApi, rather than just MyAppApi, which is the actual namespace of the code I'm deploying to every environment. Obviously, I can't check that in... how can I promote that through Test and Prod?
There's nothing in the Swagger JSON that refers to this name, so it must be on the AutoRest side (I think).
Has anyone come up with a strategy or work-around to deal with this multiple-environment promotion issue with API Apps?
Edit
So far the best thing I've come up with is to download the Swagger from the API App to a local file (which, again, has only the namespace from the original code, not from the name of the API App), and then import it into the Web App. This will generate classes in the Web App that have the naming I expect.
The problem is that I then have to edit the generated MyAppApi.cs file's _baseUri property to pull from an AppSetting, have the different web.config.dev, .test, .prod, and then do the web.config transform. I mean, that'll work, but then every time I change the API App's interface, I'll regenerate... and then I'll have remember to change the _baseUri again... and someone, sometime is going to forget to do this and then deploy to production. It's really, really fragile.
So... anyone have a better idea?
I'm not quite sure why you're creating three different apps, one for each environment? One application is fine and use web.config transforms for each environment. This is the general way I do all of my apps and works fine.
Information about how to apply web.config transforms can be found here which may help in your situation.
Hope that helps.
Well, here's how I've solved this:
Download Swagger file from API App to local hard drive.
Import local Swagger file into Web App to generate classes that have the naming from my code, not from the environment.
Use AppSettings to specify the environment-specific settings to point to the API App. This can be either a web.config transform, or you can just specify them in the Azure Portal on the Web App in Application Settings.
Instantiate the generated API App Client using the constructor that takes in a URL to point to the API App (these are at class level, hence static):
private readonly static Uri apiAppUrl = new Uri(CloudConfigurationManager.GetSetting("ApiAppUrl"));
private readonly static MyAppApi myAppApi = new MyAppApi(apiAppUrl);
I'd still love a solution to this that doesn't require downloading the Swagger file, but, all in all, if that's the only workaround necessary, it's not all that bad.

Serve custom javascript to browser via Node.js app

I developed a small node.js app in which I can configure conditions for a custom javascript file, which can be embedded in a webpage, and which modifies the DOM of that page in the browser on load. The configuration values are stored in MongoDB. (For sake of argument: add class "A" to DOM element with ID "B" )
I have difficulties to figure out the best way to serve requests / the JavaScript file.
Option 1 and my current implementation is:
I save a configuration in the node app and a distinct JavaScript
file is created for that configuration.
The page references that file which is hosted and served by the server.
Option 2 and where I think I want and should go is:
I saves a configuration (mongodb) NO JavaScript file is created Pages
a generic JavaScript link (for instance: api.service.com/javascript.js)
Node.js / Express app processes the request, and
returns a custom JavaScript (file?) with the correct values as saved in mongodb for that configuration
Now, while I believe this is the right way to go about it, I am unsure HOW to go about it. Any ideas and advise are very welcome!
Ps: For instance I wonder how best to authenticate or identify the origin, user and requested configuration. Shall I do this like: api.service.com/javascript.js&id="userID" - is that good practice?
Why not serve up a generic Javascript file which can take a customized json object (directly from mongodb) and apply the necessary actions? You can include the json data on the page if you really need to have everything embedded, but breaking up configuration and code is the most maintainable approach.

Resources