My application works fine when I was running fine in local iis express. The application was running in the root url like 'http://localhost:61975/login'.
But in the web server the application was deployed in a folder and now I got the error 404 for all pages, scripts and content, because the app is ignoring the folder.
For instance:
Should be: http:\www.mydomain\folder\app\controller\mycontroller.js
as is: http:\www.mydomain\app\controller\mycontroller.js ERROR 404.
I already try to put the tag , but does not work too.
Any help, please?
Tks
If you are using html5mode: $locationProvider.html5Mode(true) you should be setting the HTML base tag:
<base href="/" target="_blank">
in your HTML header. This is a common reason why some scripts and assets are ignored.
Also refer to this question and see if it helps
Related
Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly
I have a Spring Boot backend and ReactJS front end, all builds and runs fine until I deploy to a tomcat external server.
In the index.html page which gets generated via the npm run build it is creating paths as below (this is part of index.html):
<script src="/static/js/2.507eac03.chunk.js"></script>
So, when the index.html is loaded, it cannot locate /static/js/2.507eac03.chunk.js because it is missing my application context folder (where my webapp is) - is this something in Spring boot I need to do in order for it to work?
PS. Removing the / makes it work as it then picks up my application context folder:
<script src="static/js/2.507eac03.chunk.js"></script>
Thanks
There is a neat and simple HTML solution for your problem:
<base href="/your/context/location" target="_blank">
If the tag above is in your head, then you can refer to locations in the manner you desire.
When working on localhost, the app is assumed to be on root of the local dev server
localhost:50001/index.html
But when deploying to a remote IIS server, there are other web apps running there, and each individual app must be created as an "Application" (IIS terminology)
So for example, the 'Default Web Site' is on port 80; other apps (also on port 80) have their own AppName.
MYSERVERNAME/App1/
MYSERVERNAME/App2/
MYSERVERNAME/MyReactApp/
So now to get to my React App i have an additional path
http://MYSERVERNAME/MyReactApp/index.html
The index.html produced by 'npm run build' contains absolute paths;
To make my deployment work, I manually edited the index.html to contain relative paths
So for example, instead of:
<script type="text/javascript" src="/static/js/main.d17bed58.js"></script>
I added a .(dot) in front of all paths to get:
<script type="text/javascript" src="./static/js/main.d17bed58.js"></script>
This works mostly, and all scripts load initially. BUT I am not happy with the result, because any links and client-side routes (i.e from react-router) that I click within the app, will revert to assume the app is hosted on the root of the webserver. i.e.
http://MYSERVERNAME/
http://MYSERVERNAME/Home
http://MYSERVERNAME/MyWorkOrder/
http://MYSERVERNAME/MyWorkOrder/123456
Furthermore, if I type any of the links directly on the browser (or refresh the page), it will fail obviously.
To recap. the question is I need to maintain the "true" path http://MYSERVERNAME/myReactApp at all times, when deploying to IIS. How to do that?
From the docs:
Building for Relative Paths
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",
This will let Create React App correctly infer the root path to use in the generated HTML file.
For example:
<script type="text/javascript" src="/static/js/main.xyz.js"></script>
will become:
<script type="text/javascript" src="/relativepath/static/js/main.xyz.js"></script>
If you are using react-router#^4, you can root <Link>s using the basename prop on any <Router>.
More information here.
For example:
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
What i ended up doing
1) After npm run build, change absolute paths to relative paths within index.html (example href="./etc..." and src="./etc...")
2) use basename in <BrowserRouter basename="/MyReactApp"/> (as per the answer by #mehamasum)
3) And finally, when doing page refresh on a non-existent SERVER route, you need to redirect what would otherwise be a 404, to the index.html, and let the client-side react-router library do its job. How? In IIS Manager, go to the IIS section\Error Pages\double-click\Edit 404 Status code, and in the 'Edit Custom Error Page' dialog, choose 'Execute a URL on this site', and enter the absolute path /MyReactApp/index.html
I have an ASP.Net Core MVC/Angular JS application I'm developing.
Everything works while I am developing and running through VS 2015 and IIS Express.
But when I publish the files to my local IIS and try to run through there it is not working. The home page works fine and this is actually the final Angular otherwise route:
$routeProvider.otherwise({
templateUrl: "/app/views/home.html"
});
I finally tracked down what is happening but I don't know why?
In my NavBar in my ASP.Net Core MVC _Layout.cshtml my <a> elements look like this:
Employees
Non Employees
This is working fine in Dev through VS 2015 and IIS Express.
The URLs look like this:
http://localhost:2352/#!/employee_list
and everything renders as it should.
But after publishing and running through full IIS (locally that is), the same <a> links give a URL like this:
http://lerd/#/!/employee_list
Notice the '/' between '#' and '!'.
so instead of '/#!/employee_list' I get '/#/!/employee_list.
What in the world is causing this? Has anyone else experienced this?
I just noticed if you manually type the right URL in the browser and hit enter it sticks that extra slash in there. So it's not really the application. It's the browser and maybe IIS.
Well it seems that you need '#' on prod and '#!' in Dev.
So I did this in my layout file setting up the NavBar:
<environment names="Development">
<li>Employees</li>
<li>Non Employees</li>
</environment>
<environment names="Staging,Production">
<li>Employees</li>
<li>Non Employees</li>
</environment>
Please keep in mind, I have not worked with angular JS, nor did I write the code that is causing the error.
I am getting an 404 error on this path:
https://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
but not this path:
http://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
It was noticed that when a user views a certain page in https, the drop down does not load options. Angular Js makes a call to the path mention above which is not an actually file but is used by a php file that based on this path, has a switch that fills in the drop down.
Any ideas on how to get the https version to work? This is on a joomla site and I do have access to the htaccess file if needed. I really just need it to work for a few months while I work on building a new site.
Thanks!
Angularjs is not the issue. Your webserver (Apache/2.2.15 (SuSE) Server at www.helivalues.com Port 443) states the file can not be found. So it looks like something is misconfigured with your apache site.