I am creating a web application with ASP.NET MVC and AngularJS.
When I debug the web application the URL is like this:
http://localhost/Home/Index#/Login
When I publish it to the IIS development server I use then I use the Default Web Site, so the url will be like this:
http://ipaddress/MyApp/Home/Index#/Login
Because of this my directives do not work.
They are set up like this:
'/Login':
{
templateUrl: '/Account/Login',
controller: 'AccountController'
},
On the IIS development server this directive calls the route of the Web application:
http://ipaddress/Account/Login
which should be
http://ipaddress/MyApp/Account/Login
Is there a way to change the directives to work in both cases?
I have tried to play with the "/" character in front of the templateUrl, but it does not seem to work (it gets localhost/Home/Account/Login instead of localhost/Account/Login)
Just ran across this looking for an answer to a similar problem related to hosting an Angular app in an IIS application below a site. I was able to fix the TemplateUrl problem by just adding a . before the /
'/Login':
{
templateUrl: './Account/Login',
controller: 'AccountController'
},
There are 2 options I can provide you with:
Server config
Don't use virtual directories to host your app in the dev
environment. Rather host different sites with different host headers
in IIS so that you can refer to stuff from the root, for example:
/Account/Login
Configuration module
Consider using a module which gets injected into your angular app
which contains a configuration you can use to build URLs for a
specific environment. Then have one version of this module file for
the dev environment, one for local and possibly one for production.
The beauty of Javascript is that you can include different
javascript files in the different environments, so the module could
be sourced from different files.
Have a look at this answer for more info on this option: https://stackoverflow.com/a/16340438/431522
Try to set the base url in master page header section like
<base href="/MyApp">
To differential between dev and release use conditional compilation. See here C# and ASP.NET MVC: Using #if directive in a view
Related
I'm new to Vue and am trying to figure out the best way to do the below.
Let's use example.com as our domain name.
We have a Vue.js app deployed that allows our customers to create their own subdirectory in our Vue.js app (e.g., example.com/user1page and example.com/user2page). Right now example.com goes to a Vue.js login page
Marketing recently sent us a home page (built in pure HTML/CSS/JS) that they need to display at example.com. Is it possible for me to upload the HTML/CSS/JS for that page in a Vue static asset folder and render that for example.com; then render our actual Vue.js app for anything example.com/*?
Due to business reasons we cannot:
Change the vue.js app to a different domain or subdomain (because customers have already published pages)
Change the marketing homepage to a different domain / subdomain / subdirectory
As an aside, we're using Clouflare for our DNS. Unfortunately their page rules won't be able to solve this issue.
Any help would be greatly appreciated.
Thanks very much!
Ed
I would solve this with a webserver configuration if you have access to it.
In NGINX you can define different locations with different root-folders.
So if a user access to main page it would it the first route and serve the static page and if it would it the regex for the client page it would serve the vue application (you could also specify the vue server here)
location / {
root /var/www/static-html-folder;
}
location /paths-to-clientpages {
root /var/www/vuepage;
}
For the location paths you can use regex to match all routes
I figured out that the way to do this in Netlify is to add the following command to your toml file:
[[redirects]]
from = "/"
to = "your marketing page URL"
status = 200
force = true
I'm new to angular. I create a blog for showing my profile.
In my website, I have several component and my app.module has a configuration for the routing, as shown:
app.config(function($locationProvider, $routeProvider){
$locationProvider.html5Mode({
enabled:true,
requireBase: false
})
$routeProvider.
when("/", {
template: "<research-overview></research-overview>"
}).
when("/research-interests", {
template: "<research-interests></research-interests>"
}).
otherwise({
redirectTo: "/"
})
});
Here is an example of my component:
angular.module('researchOverview', [])
.component('researchOverview', {
templateUrl: '/templates/research-overview.html',
});
I tried to locally run the server using python -m SimpleHttpServer
so that I can access my local website using browser to localhost:8000, When I click a link from my homepage, the page is correctly loaded. However, when I initially access my website using different urls (e.g. localhost:8000/testing) Angular route doesn't seem to work properly.
I get this error instead,
How do I set the router so that those urls can be redirected to my homepage?
Given you have enabled html5 mode I think you may need to set your server up so that regardless of the path it will return your index.html file.
For example, when your server receives a request for a resource at localhost:8000/testing it will return index.html.
From the AngularJS documentation:
Using this mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html). Requiring a tag is also important for this
case, as it allows Angular to differentiate between the part of the
url that is the application base and the path that should be handled
by the application.
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!
I'm new in SAPUI5 and javascript and I'm working on a web application using SAPUI5. For this, I have several views located in ./logonapp/CustomerList.view.js and controllers located also in ./logonapp/CustomerList.controller.js. The folder "logonapp" and also my "index.html" file are in the "wwww" folder in my application.
Now I have to say to SAPUI5 where my view and controller are located. So I'm using sap.ui.localResources("???"); but wich direction should be in the brakes?
I found different versions, for example: Registering Component Resources but it I don't get it.
You can use sap.ui.localResources("logonapp"); for registering resources. For this to work the folder 'logonapp' should be in the same directory as index.html.
You can call your view this way then
var app = new sap.m.App({initialPage:"customerList"});
var page = sap.ui.view({id:"customerList", viewName:"logonapp.CustomerList", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
The suggested way to do this is in the bootstrap:
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}' >
The data-sap-ui-resourceroots setting is what you are looking for. For more information see the UI5 Walkthrough Tutorial from the SAPUI5 team. There you will also learn the best practices for you project's folder structure. Maybe you also want to check the Navigation and Routing Tutorial, since I guess you are using multiple views...
While developing my app (asp.net mvc3) locally everything was fine using the VS dev app server. The app was located at localhost/. However, I'm attempting to deploy the application on a IIS 7.5 server in a /Management directory and having a lot of routing issues as a few calls in my app rely on the app being at the route.
I have some javascript code that calls my controller through an ajax call that looks like this:
url: "/en/Home/GetFormula/"
I would like it to go to: /Management/en/Home/GetFormula but instead it's going to the root of the site and looking for /en/Home/GetFormula and returning 404 errors.
Any ideas on how I can fix my javascript routing to default /Management/ as the root of the site?
Thanks
When the pseudo-URL passed to an HTTP request begins with a slash (e.g. "/path/to/resource"), the pseudo-URL is "completed" by treating it as if the given path were under the Web site's root directory (e.g. "http://my.site/path/to/directory").
Clearly, you were expecting the pseudo-URL to be processed as if the given path were under your Web application's root directory. Well, I have bad news for you: The HTTP protocol does not deal with such a thing as a "Web application".
The ASP.NET MVC Framework provides the Url.Content function, which takes pseudo-URLs beginning with a tilde character (e.g., "~/path/to/resource") and returns the result of replacing the tilde character with the Web application's root directory (e.g., "http://my.site/an/application/path/to/resource", assuming the Web application's root directory is "http:/my.site/an/application"). However, the ASP.NET MVC Framework is only available on the server side. If your JavaScript runs on the client side, it cannot call Url.Content.
But not all is lost. The ASP.NET MVC Framework allows you to dynamically generate JavaScript code on the server and run it on the client, the same way it allows you to dynamically generate HTML content and of course send it to the client. That way, you can expand the pseudo-URLs into actual URLs on the server side, and deploy the resulting JavaScript code to the client.
To avoid confusion about where you are currently try:
url: document.URL + "/Management/Home/GetFormula"
I solved this issue adding a html hidden field on my page where, on the server side, I put the correct url inferred with the Url.RouteUrl method like this:
<input id="MyHiddenFieldName" name="MyHiddenFieldName" type="hidden" value="#Url.RouteUrl(new { area = "MyArea", controller = "MyController", action = "MyAction" />
then, on your javascript code you could do this:
url: $("#MyHiddenFieldName).val()