I have a question and I don't know if it's possible.
I'm trying to remove the '#' in my jhipster website urls AND I saw that's difficult to do in my code.
exemple:
http://www.exemple.com/#/test -> http://www.exemple.com/test
So, is it possible to do that with an other way ? Like .htaccess or something else ?
I just want to precise, I'm working with an old version of jhipster and it's an angularJS application.
I'm generating the .war and i'm deploying it on a dedicated server with apache2 and my application is using the port 8000 so I made conf for virtual hosts. Maybe I can add something here ?.
Yes you can do that in AngularJs -
Basically you need # for non-html browsers or else without that they will make a http call.(So it is used for old browsers).
You can tell angular to use HTML5 mode-
In route config add html5Mode(true); at the end.
eg-
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/views/home.html'
});
$locationProvider.html5Mode(true);
});
In Html head tag add base tag -
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Related
We are working on a reactjs web application with NestJs for server-side.
At the moment we use ServeStaticModule.forRoot.
The app needs some configuration (e.g. url of analytics server, clientId, redirectUrl …).
Since Create React App doesn’t support server rendering, we added placeholders into the HTML and we want to inject variables to the client.
For example :
<html lang="en">
<head>
<script>
window.CONFIG = __CONFIG__;
</script>
https://create-react-app.dev/docs/title-and-meta-tags#generating-dynamic-meta-tags-on-the-server
How can we replace the CONFIG?
The following approach is for Express.
If you want to modify index.html then one approach is to use app.useStaticAsset(//build path, {index: false}) in main.ts to serve the content while ignoring index.html. Then you can sendFile(//index.html path) in root path to deliver a page.
To replace placeholder config, you can have something like readFileAsync in a respective service or controller to read index.html content and process it before delivering to a client.
Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
I have IIS web server, and I am using the IP address and :80 port to serve the website.
I have two applications. One of them should be served on '/' route, and another one should be accessible on '/admin' route.
I tried multiple advices about "how to serve two websites on one IP and Port", but they do not help me. I also created virtual directory with static files, but still cannot access the second app on '/admin' route
Can you please give me recommendations what do I need to add to "web.config" to make it work. I want the "app1" be on home route, that it, '/', and "app2" be on the "/admin" route, so
111.111.11.11/ - this is "app1"
111.111.11.11/about - this is still "app1"
111.111.11.11/admin - and when the use goes to admin, this is "app2"
First, create child application or virtual directory under the mail application. give full access control isur and iis_iusrs.
Convert all absolute links to relative ones. Base tag works only for relative URLs. The bare minimum plain HTML example.
<img src="/assets/logo.svg"/> to <img src="./assets/logo.svg"/>
Add in your index.html. This tag should be placed in the ... before any other element that uses URLs. The best place to put it right above the ... in the index.html
<head>
...
<base href="%PUBLIC_URL%/">
<title>React App</title>
</head>
<body>
...
</body>
Regards,
Jalpa
I would like to ask for a help on my problem with url in an angular site.
I added this on my app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
the problem is that when i try to put into my url like
wwww.websitename.com/admin
it will throw an server error page.. but if i will input
www.websitename.com/#admin
it will go to the page then the hashtag will be remove
i want it that it will go the page even without putting # on the url.
thank you guys ! :)
You need to make sure that your server is configured to return the same index.html file for any path specified after your domain. You also need to specify your base href for html5mode.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Here is a good article explaining how to configure your angular app to use html5mode.
If you want to enable HTML5 mode for your Angularjs app, you will also have to configure your server so that whenever an unknown route is requested, it serves the index.html file.
For example with expressJS server,
After your routes definition, add a catchall route.
// Add a catchall route here
expressApp.get('*', (req, res) => res.status(200).send({
// #TODO serve index.html here
}));
We have a catalog that loads an AngularJS application dynamically according to the defined subdomain. For example: http://subdomain.billiving.biz
We need to support dynamic title that will be set by AngularJS. I saw in Google documentation that we need to add this link:
<meta name="fragment" content="!">
Anything else we should do to set this correctly?
Thanks
You have to follow HashBang URL standard or HTML5 URL
Something like
angular.module('app', []).config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
Here is the good guide to follow Angular SEO
I eventually ended up using Push-State. This includes two changes:
Enabling Html5Mode:
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode({enabled: true});
}]);
Providing a base href from your app (when working local need full localhost path)
<base href="/">
That's it.