How to set url in index.html in swagger-UI - javascript

I am using Swagger-UI for jax-rs jersey.
So there is this index.html. There you have to enter the url for the swagger.json .
So this is a big problem.
We are deploying our application to a lot different environments.
And the respective swagger.json will always be on the same environment.
We have Jenkins build jobs and we cannot edit index.html for every environment.
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: "**https://petstore.swagger.io/v2/swagger.json**",
Property url I always have to set.
What should I do?
P.S.
In Springfox Swagger-UI there is no physical swagger.json
But in jax-rs I have this dist folder and there is always a physical json
as far as I understand. Where should I put this so all different
clients can access it.

You can use vanilla JS for that:
var currentUrl = window.location.origin;
var apiBasePath = currentUrl + '/v2';
window.ui = SwaggerUIBundle({
url: apiBasePath + "/swagger.json",
...
})

Related

How can I get the parent site, or the site where the file was sent from, in javascript?

I'm writing a node.js application with client-side javascript that uses fetch to get data from the node API that I wrote. I want to be able to put that application on any site (URL) without changing anything in the javascript. My current code goes something like fetch("http://localhost:8080/data.json"). If I wanted to deploy onto Heroku, for example, I would have to change that. Is there a way to overcome this fact?
Window location might do the trick, if I am understanding correctly. Set it into a variable like this:
For browser:
If the hostname is http://localhost:8000, using this:
// http://localhost:8000/data.json
var url = window.location.hostname + "/data.json";
fetch(url)
Heres another example.
document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;
Result is
Page location is https://www.w3schools.com/js/js_window_location.asp
More info:
https://www.w3schools.com/js/js_window_location.asp
I see you wanted NodeJS, for server
var os = require("os");
var port = process.env.PORT || 8000
var url = os.hostname;
var final = url + ":" + port
// localhost:port
var hostname = os.hostname();

Get to know domain and context root url path in AngularJS

My angularJS application is running in a web server with the following path
http://www.some.domain.com/some/path/
Notice that /some/path/ is dynamic path because my app can be deployed to any web server to any directory. I need to get this absolute URL in AngularJS excluding all inner angular pages. For instance, if current user's page is
http://www.some.domain.com/some/path/inner/angular/page.html
then the code that I am looking for should return
http://www.some.domain.com/some/path/
You cannot use $location because it only has information about the current SPA.
The code that you are looking for ("/some/path/") is this:
var myContextWithPath = $window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/"));
Other variation that returns only the context ("/some") is this:
var myContext = $window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
You can also obtain the origin ("http://www.some.domain.com"):
var origin = $window.location.origin;
You can use $location for this. Don't forget the add $location in to controller function
$location.host()
gives you base url.Which is application base server domain, like : www.example.com
$location.port()
gives you port like : 8080
$location.path()
gives you where you are : index.html

Url Helper ASP.NET MVC in Javascript

I'm writing a js script that read a file JSON that contains all navigation menĂ¹ links of my web application.
the menu tree is something like this:
1 - DASHBOARD - dashboard
2 - SETTINGS
2.1 - GENERAL - settings/general
2.2 - LAYOUT - settings/layout
3 - DATABASE
3.1 - QUERY
3.1.2 - EDITOR - database/query/editor
3.1.3 - TEST - database/query/test
the menĂ¹ is 3 levels nested link.
How can I write links in JSON file to avoid "not found" when e.g. in "DASHBOARD" and want to go to SETTINGS > GENERAL.
I don't want to use absolute path, my webapp will run in a virtual directory.
If you can, I wolud suggest modifying your JSON response to include the base path your app is hosted on.
string basePath = string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"));
For example: basePath + "database/query/editor" instead of database/query/editor.
If you cannot modify the JSON response, you can get the base path your application is hosted on in a JavaScript variable from your MVC.
In your _Layout.cshtml file -- or whatever file that gets loaded every time your application is loaded -- set your base path that your application is running under in a JS variable:
<script type="text/javascript">
window.applicationBaseUrl = #Html.Raw(HttpUtility.JavaScriptStringEncode(Url.Content("~/"), true));
</script>
Now when you receive the JSON containing the URLs, concatenate them with your base path:
var queryEditorUrl = window.applicationBaseUrl + <the path from your JSON>
This way your URLs are independent of the virtual directory it is hosted on.
You should use Url.Content("~/") (see documentation) to get the absolute URL of your application. For example if you run your application in a virtual directory called MyApp and you have a page in About/Me you can use:
string url = Url.Content("~/About/Me"); // this will return '/MyApp/About/Me'

How to use the CKFinder Javascript api?

Funny question, but i honestly can't acces (for example) the CKFinder.dataTypes.Folder: http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.dataTypes.Folder.html.
I have downloaded the CKFinder 2.x demo for asp.net to try the utility out and the only thing intellisense is giving me access to is the window.CKFinder object and some of its methods, but nothing else. I couldn't find Folder in ckfinder.js either.
As stated in the Documentation you may not be able to access it directly, instead you should call any Folder API function once CKFinder object has been loaded.
Note: the CKFinder.dataTypes namespace is not directly accessible
(CKFinder.dataTypes is undefined). Data types are used internally by
CKFinder and returned by many functions, like
CKFinderAPI#getSelectedFolder.
The following example is an initialization in javascript of the CKFinder component which shows how to access the Folder datatype.
<script type="text/javascript">
var finder = new CKFinder();
finder.basePath = '/js/ckfinder/'; // The path for the installation of CKFinder (default = "/ckfinder/").
// Setting custom width and user language.
finder.width = '99%';
finder.defaultLanguage = 'es';
finder.language = 'es';
finder.removePlugins = 'basket';
//finder.selectActionFunction = showFileInfo;
//finder.resourceType = 'Images';
//finder.tabIndex = 1;
//finder.startupPath = "Images:/";
finder.callback = function( api )
{
api.openMsgDialog( "", "Almost ready to go!" );
api.hideTool( "f2" );//hide flash folder
api.openFolder('Images', '/');
var folder = api.getSelectedFolder();
//console.debug(folder);
folder.createNewFolder( 'New Folder' );
//api.setUiColor('white');
};
var api = (finder).create();
//console.debug(api);
//api.openMsgDialog("Sample title","Sample message."); //doesnt work here, CKFinder still not loaded.
</script>

Rewriting Root Directory Path "/" for Javascript

We can modify the document root directory path for PHP using
$_SERVER['DOCUMENT_ROOT'] = "to/some/new/directory";
//Now the "/" which represent the ^(above) path
in .htaccess we have
RewriteBase "/to/some/new/directory"
Now, I need to modify the root directory path to use in javascript. How to do it?
Currently, I am declaring a variable containing static path to the my personalized root directory and using it as
var root = "../to/new/path";
document.location = root+"/somepage.php";
Scenario
I think i should tell a little bit about the scenario, for you guys to catch my idea
Default Web Root Directory
http_docs/
inside it contain a main folder
http_docs/application <-- contains the actual application
http_docs/js <-- contains the script
http_docs/index.html
Now, the application also contains ajax feature for updating, editing, loading new content, or other resources, which if accessed at "/" will represent at /some/path/i/called not /application/some/path/i/called,
To come around this problem
I can define a static variable like
var root = "application/";
and use it somewhere like
$.post(....., function(data) { $(body).append("<img src='"+root+"resources/img1.jpg"); });
But for a single use, defining the path as static, might not be a big deal, but, when the application grows, and certain modification would cause me to change all the paths i give in the js part. I thought, it would be sensible, just like, I do it in PHP, using <img src="/resources/img1.jpg" />
I tried my best to explain this question, if still is not understandable, please community, lets help them understand. I welcome you to edit my question.
EDITED: Trying to answer the updated question
Assuming the JavaScript is called included from the index.html file, if you insert a img tag and use relative urls, they will be relative to the path of the index file. So <img src='application/resources/img1.jpg'> would work just fine. If the script should work for several sublevels (e.g. if the page "application/etc/etc2/somePage.html" needs images from "application/resources/")it may be easier to use absolute urls, and you could include a javascript block on every page generated by php that holds the absolute url to the "root" of the application, like:
<!-- included by php in all html pages, e.g. in defautlHeadter.php -->
<script type="text/javascript">
var rootUrl = "<?= getTheRootUrl() ?>";
</script>
Where getTheRootUrl() is a method or server variable that gives the root url you need. If the url is translated/remapped (by apache etc. outside of what is visible to php) you may need to hardcode the root url in the php method but at least it will be only one file to change if you ever change the root directory.
Then you can use the root url to specify absolute paths anywhere in the application/website using rootUrl + "/some/relative/path" in anywhere in the application.
I once made something like this, to set
window.app_absolute = '<?php echo GetRelativePath(dirname(__FILE__)); ?>'
I also use something like this
static function GetRelativePath($path)
{
$dr = $_SERVER['DOCUMENT_ROOT']; //Probably Apache situated
if (empty($dr)) //Probably IIS situated
{
//Get the document root from the translated path.
$pt = str_replace('\\\\', '/', Server::GetVar('PATH_TRANSLATED',
Server::GetVar('ORIG_PATH_TRANSLATED')));
$dr = substr($pt, 0, -strlen(Server::GetVar('SCRIPT_NAME')));
}
$dr = str_replace('\\\\', '/', $dr);
return substr(str_replace('\\', '/', str_replace('\\\\', '/', $path)), strlen($dr));
}
... Something along those lines, hacked up for demonstration purposes.

Categories