Develop Reference

Change React Webpack application file and api path

I'm working on an app that is going to be deploy on-prem (no cloud) and there are requirement to deploy the application to different server path. For example in one company it might be company1.com and on another it might be company2.com/app because they already have a server and want to deploy it on the same server under a different context path.
The problem is in Webpack we compile the app and create HTML+JS+CSS files. The HTML and JS files have the server context path (part after the domain name) hardcoded into the code. For example loading the JS files will be done with <script src="/hello.js" /> so if the app will be deploy to company2.com/app I need the script tag to be <script src="/app/hello.js" />
I'm looking for way to change the server context path dynamically preferably using environment variable.
For compare we use Spring on the server side and there we can define env-var server.contextPath which will change the context path in which the app works.
If it changes anything the app is deployed as docker image.
Any ideas how to implement such thing?

That's an interesting question, and there are some ways you can resolve that. I'll list some options below.
I'm looking for way to change the server context path dynamically preferribly using environment variable.
I will list some other options, but the first one is using env vars.
Using Environment Variables When Building
webpack has a plugin (DefinePlugin) that allows us to set environment variables to the javascript code.
Then, you will be able to get those environment variables using process.env. For exemple, if you have the following configuration:
plugins: [
new webpack.DefinePlugin({
fruit: JSON.stringify('orange'),
MY_VAR: JSON.stringify('value'),
API_URL: JSON.stringify('http://some-api')
})
]
Then, in your code you can get them using:
console.log(process.env.fruit); // "orange"
console.log(process.env.MY_VAR); // "value"
console.log(process.env.API_URL); // "http://some-api"
This said, you can do something like this:
Passing environment-dependent variables in webpack
Then, for example, you can just use process.env.API_URL in your code, instead of using it hardcoded.
IMPORTANT: this method will only work if you have can build your code before releasing it to production. (I think it's not a problem for you).
I think this is the best option, because your code will be "clean", it is more "customizable" and it will "simply work", regardless your environment.
Using a Map
You can have some application logic to decide your variables. For example, you may "look" to the URL (i.e. location.href) and decide the values to use based on this address.
let api;
if (domain === 'domain1.com') api = 'api1';
if (domain === 'domain2.com') api = 'api2';
Using an Extra HTTP Server
You can always point to a hardcoded path in your server, lets say /api. Then, in your code, you will point to /api. So, all your requests will go to /api.
You will need to have an HTTP Server (it can be a Nginx, a NodeJS, whatever you want) listening to /api and then have this "routing" logic there.
It will work fine, but you will need to control the deployment of this HTTP server. This may not be a good option for you, but it may suit your needs.
One advantage is that you'll be able to only change the code of this HTTP server when changing some routes, without need to deploy your front-end code again.
I think that sums it.
Hope it helps!

replicate google maps URL behaviour with javascript? url+"/#foo"

google map does this thing where if I browse to, say, Australia, the URL changes to
https://www.google.com/maps/#-28.0345854,135.1500838,4z
I'm interested in doing something like this on my web application. So far I have this:
var baseurl = window.location.href.split("/#")[0]
window.history.replaceState( {} , 'foo', baseurl+'/#foo' );
which works just fine for adding "/#foo" to the url
My problem is that, after adding /#foo, the URL doesn't work, it 404es.
I'm not interested in modifying the brower's history, that's why I use replaceState instead of pushState.
anyway, is there a way to do this with js? or do I need server-side code to serve the appropriate page?
thankyou

You "need server-side code to serve the appropriate page". an # character is still part of the URL and therefore needs to be handled by the server. If you want to handle the this kind of situation client side only then what you want is to use # instead. anything after a hash is handle client side and does not trigger a new page to load from the server.
Several libraries use this to replicate routing in a single page HTML only app. For example:
Backbone.js Router
jQuery-Router
jquerymobile-router
Ember.Router
And many more.

JQuery AJAX URL Local or Absolute

I have a portion of my web application that uses AJAX. I am using the JQuery AJAX call to add and remove items from the users shopping cart, and it works fine. The URL that I pass as a parameter in the AJAX call is the url-mapping defined in the web.xml file, minus the leading forward slash.
I tried to replicate this with another place in the application where I would like to use AJAX, but this time, the Servlet GET is not even being called at all. I have alerts in the javascript function, so I know the function is being called. Is there a way that I can see (within the ajax function call) what the fully qualified URL is that the GET request is being made to? Also, what is the 'rule' with respect to the AJAX URL? Is there a way that I can get to the context root? My Servlet is mapped to www.mydomain.com/contextRoot/un
I would rather not have to hardcode the context root into the function call, that way if it ever changes, I don't have to update all my javascript functions.

The "rule"
Ajax requests (or any http request from the page) that does not start with a / (or the full domain path) is relative to the current HTML file path.
How to view GET requests
Use the debugging tools in Chrome/Firefox or something like Fiddler2
How to get server root
If it is a simple www.host.com:
var root = location.protocol + '//' + location.host;
(Not sure if this works for context based domains).
You do not mention what server technology you are using, but if you are using MVC/Razor you can inject the server root into a Javascript variable with something like this in your master page header:
<script type="text/javascript>
window.domainRoot = "#(Url.Content("~/"))";
<script>
this injects a javaScript line like:
window.domainRoot = "http://www.mydomain/mycontext/";
you can then reference window.domainRoot from any JavaScript code.
If you are using PHP there will be an equivalent way to inject the server root.

A simple browser debugger (F12) and you can read the network traffic send.
From here it is possible to see all the details (sent and/or received)

I think The url plus parameter is contextRoot/un?para=*.

Setting up a common route for javascript calls in ASP.NET MVC project

I have a bizarre routing issue with my ASP.NET MVC project that I hope you guys can help me with.
Overall everything works fine when I run the project off my localhost or run it on the server while it's deployed directly at http://myServerName. The problems start when I deploy the application to various enviornments on the server located under different virtual directories. For example: http://myServerName/QaEnviornment or http://myServerName/TestEnviornment
The problem is that all Javascript calls to application URLs ignore my environment virtual directories and fail.
For example on my QA server whenever I have to make an Ajax call I take a standard approach such as:
var myUrl = '/ControllerName/ActionMethodName/'
$.ajax({url:myUrl,success:function(){Do stuff} })
Because my application is deployed on http://myServerName/QaEnviornment, when rendered I expect myUrl to be http://myServerName/QaEnviornment/ControllerName/ActionMethodName. Instead it comes back as http://myServerName/ControllerName/ActionMethodName and ofcourse fails.
To get around this for now I declared a global Javascript variable that contains the environment folder name and when I build URLs for javascript calls I have to remember to ALWAYS construct them as var myUrl = myGlobalFolderVar + '/ControllerName/ActionMethodName/'
Using a global JavaScript variable to get around this issue seems as a bad solution to me. Is there anything I can do to get routing to work properly so whenever JavaScript calls are made whatever subfolder the application is running under is always included in the URL ?

Instead of always having to remember to construct them correctly, make a helper function that you call to create your URLs
function CreateUrl(string path){
return myGlobalFolderVar + path;
}
To answer your second question, not really. Routing is not aware of what made the request and you cannot always rely on the X-Http-RequestedWith header to base that decision on. In addition, your site application root is not at the domain root, therefore routing would only kick in when it visits your application. The only other way I am aware of is to have MVC actually generate the Url for you (var url = '#Url.RouteUrl(params)';) but this does not help at all when you have your JavaScript in a single or a few .js files.
EDIT
The above function is a JavaScript function that can sit anywhere you would like in your application, including external JS files. As for setting your myGlobalFolderVar, there are a few ways you could set this.
1.Actually hard code the variable in your external JS file.
var myGlobalFolderVar = 'TestEnviornment';
This is hard however if you are deploying to several different testing servers.
2.If you are using web.config transformations, you could add an AppSettings key/value pair in your web.config transformations depending on build type. Then, using that value, set your global Javascript variable in your master page layout/views.
<appSettings xdt:Transform="Replace">
<add key="folderLocation" value="TestEnvironment" />
</appSettings>
In your external JS file
//this makes it a site wide/global variable in any place you
//include your external JS file
var myGlobalFolderVar = '';
And in your master view
<script type="text/javascript">
myGlobalFolderVar = '#ConfigurationManager.AppSettings["folderLocation"]'
</script>
3.Same as number two, but use the URL helpers to figure out what the path to your application is in your master view instead of using the web.config transformations
<script type="text/javascript">
myGlobalFolderVar = '#Url.Content("~/")'
</script>
The basic idea is using .NET to figure out where it lives and set a global JavaScript variable with that path information. Then, in conjunction with the helper JavaScript function provided at the top of this answer, you can correctly generate paths as needed throughout your application - regardless of path depth, deployment location or any other deployment type concerns.
var myUrl = CreateUrl('/ControllerName/ActionMethodName/');
$.ajax({url:myUrl,success:function(){Do stuff} });

JQuery ajax .load() to reference to the correct url

I have a localhost with a few projects, so this project in VS2010 properties->web->use local IIS web server = 'localhost/project4/'. (I can't use the normal debug VS Development Server as some components won't work in my project) Anyhow, localhost is fine no big deal, so I go on coding.
Now, in ajax when I call .load('/Account/LogOn'); it gives me 'localhost/Account/LogOn' but what I really want is 'localhost/project4/Account/LogOn' because it is sitting in the project4 directory, not the root.
Any idea how to tell ajax I need that virtual directory prefix between domain name and the rest of the url?
EDIT --------------------------------------------
Thanks guys, combined with all your knowledge, I guess the best ways to do it are:
Include the js script into .cshtml server side and use "~/Account/LogOn/" let .net figure out the path.
Make a global var remove_me_debug_only_virtual_directory = "/project4/"; in js code. append it to the domain name. this way we don't have to pull .net into the water and write js code in .cshtml.
Move the project to localhost/ root if you can, in this case I can't, because other people at work wants to access this networked server and do demo.

If your JS code is in an MVC cshtml file, use it like this:
.load('#Url.Action("LogOn", "Account")');
The proper URL will be placed in the concrete JS code.

According to .net documents,
Absolute and relative path references in a server control have the following disadvantages:
Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
Relative paths in the style of client elements can be difficult to maintain if you move resources or pages to different folders.
To overcome these disadvantages, ASP.NET includes the Web application root operator (~), which you can use when specifying a path in server controls. ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
So as described above, using ~ will lead you to the root of your web project using asp:
<asp:image runat="server" id="Image1" ImageUrl="~/Images/SampleImage.jpg" />
For more information go to: Web Project Paths
Based on your update: Possible duplicate of: base url using jQuery
Where stated by #gregguida:
var l = window.location;
var base_url = l.protocol + "//" + l.host + "/" + l.pathname.split('/')[1];
//all you need to do is work with l.pathname.split('/') to find what you need.

I am a java developer but the context is same in both case,
In your can follow the steps
Check the context of your server if root is "/" then you have to call something like,
.load('/project4/Account/LogOn');
If your application is root and you can calling this request from itself then
.load('Account/LogOn');