I'm using React app for web development and there is a concept called "share company profile". While sharing the URL it shows something went wrong and in the LinkedIn post inspector it show like below: But on Facebook it works fine since it's a React app. I have placed all meta and OG tags in index.html itself.
while giving the base url in inspector its working fine but with params like /company/IN-Gowtham-28/ not working
If that is a valid URL and your app is a SPA (single page app) made with react, the only thing I can think of is your default redirection. Let me explain:
A react SPA creates only 1 page (/index.html) which includes your entire app, including the router and subsequent pages. so if you try to load /another/page/ that will return a 404 as there's no HTML file at the location. In order to avoid that, your web server should redirect all HTML requests to /index.html. depending on your server or hosting of choice there are several ways to do that. from there, react (react-router) will show the proper page depending on URL location.
Related
I am new to next.js and I am using dynamic routing in one of my project. Everything works fine on local host. When I open the dynamic page it opens up alright, and on refresh the same page appears again after loading up. But when I am hosting it on live domain, then although the page opens up fine, but on refresh it redirects to homepage as if it doesn't recognize the url.
Below is the api call in the dynamic route page.
Page Structure
API call in [pid].js
The call to the dynamic page:
I have also tried using getServerSideProps but same issue.
Since this is my first time asking a question at stack overflow so I might have missed some detail. Anyways, any help regarding this matter would be tremondously appreciated.
I think that I have tried almost everything, I just want the dynamic route to render correctly on refresh on live server but I can't seem to find any solution.
I am working on a website using VueJS and just figured out how to do url parameters, which works well on my local machine. I can navigate to a page, and copy the full link including parameters in my browser and the page loads the same way.
Example: I type localhost:8080 to load the index site, navigate to localhost:8080/param1/param2 to go to another site, everything works fine. I can even type in localhost:8080/param1/param2 DIRECTLY (without going to index page first) and it works too.
However, after a build and upload to my web hosting provider, I can not type in the url with parameters DIRECTLY, it only works when navigating from index page.
I can the following error:
404 Error
I have almost no experience with routing and web hosting and even after extensive research could not find a solution online. Any help would be greatly appreciated.
Additional information based on comments I've received:
Web host:
I have a login to Plesk where I can manage my settings. There I have "Apache & nginx" settings which look like this:
Apache Settings
nginx Settings
This is due to the fact that SPA's do not have different HTML pages for different URL's like conventional pages. So, you have to either redirect all the requests to the index.html page in the server settings or set the history property to this history: createWebHashHistory().
Let me know if this works.
P.S: Sorry I don't know how to configure the settings for this in Apache or Nginx
am using page.js for routing in a Grails application using '/' to point /HomeController/index to serve up a single page web application. I just installed Grails Spring Security Core plugin, and I am using the Grails scaffolding to create the User Admin/Permissions views with the goal of serving them in the traditional multi-page way to avoid having to do a lot of UI work on admin pages. The bulk of the application will be served using single page architecture, with just the admin pages being served multi-page.
In their documentation, page.js says, "By default when a route is not matched, page.js will invoke page.stop() to unbind itself, and proceed with redirecting to the location requested. This means you may use page.js with a multi-page application without explicitly binding to certain links." But, I cannot get it to work...
I am using page.js like so:
page('/', SCM.Dashboard.home);
page('/hx', SCM.HX.summary);
page('/hx/vendor', SCM.HX.vendors);
page('/hx/customer', SCM.HX.customers);
page('/customer/list', SCM.Customer.list);
page('/maintenance/activity', SCM.Maintenance.activity);
page();
When I click a link to '/user', based on their documentation, I expect it to forward directly to 'http://domain.com/user'. It adds the correct path to browser location bar (http://domain.com/user), but the browser never forwards to the page. In order to see the page, I have to click the link, and after the location bar has changed, if I refresh the browser window, the correct page appears - obviously unacceptable. Yet, I cannot find in their documentation how to implement this correctly. I have experimented with various settings for hours with no luck. If I comment out the page.js code above, the multi-page admin pages work fine, and I am able to navigate from page to page no problem. Has anyone solved this problem?
I just upgraded from version 1.4.0 to version 1.5.0 and it links between the Single page (Main app) and Multi-page (Admin functionality) portions of the application seamlessly with no configuration needed!! Excellent feature addition!
I have the following requirement for my application (Android, iOS):
When the application launches it displays a login.html page (which is part of the application). After logging in, the application's webview should be occupied with home.jsp from an external domain. When user clicks on logout button in home.jsp it has to navigate back to login page . On click of logout when we usewindow.location.href="login.html" then it tries to find the page on xxx domain.
Is there a way to detect this navigation URL and override the URL from javascript or phonegap properties in the application?
When I inspect window.location.href in an android emulator I get file:///android_asset/www/index.html
But I think Nathans idea of moving it to the server is a good one. You could also have one on the device if you really need to. (PErhaps you should ask the person specifiying the app achitecture how they would do it :) )
The answer is going to vary depending on how you've implemented the mentioned WebView where home.jsp is being displayed in. You did not provide any code or any specific information so the answer is going to be the same - somewhat vague...
If you've opened a new WebView, then you can't control it from JavaScript. You'll need to control it via Java or Objective-C code (you did not mention which environment you're developing for...).
For example, if you'll look in the your-app\android\native\src\com\your-app\your-app.java file, you'll see how the native layer loads the application's index.html file after the Worklight JavaScript framework has been loaded.
Similarly, you could re-use this approach in your own application to close and re-load login.html.
If you're in fact doing the mentioned re-direct from the comments, meaning you're re-using the current webview but replacing its content with external content, then I think it is expected that you've lost the context of the application, and when looking for login.html - it doesn't find it... because you've moved from app-context to web-context. They do not know each other.
I think you should not do this re-direct. Instead, you need to open a new WebView using a Cordova plug-in, and in this new WebView to display your external content.
In this Overlayed WebView, you can detect any urls that are clicked on and if the sign-out URL was detected, then close the WebView.
You can see parts of this in action in the Integrating server-generated pages in hybrid applications tutorial and accompanying sample project.
In the sample project, you can see the functions provided (where you can add yours) in android\nativeResources\src\com\IncludeExternalPages\IncludeExternalPages.java.
I can't be signed out if I want to get a like button for a facebook page. Yet, if I sign in, generated code adds an "appid". It shows me a list of facebook apps but there's no choice for making a button NOT for one of those apps. I just want a button for a regular facebook company page.
Is this something new or a weird bug?
Using the code that this gives me, then throws a warning in console:
"Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains."
This seems to imply that I need to make an app just to use a like button, which makes no sense.
There is no alternative. You have to create a new app for this purpose. Or using app id of any of the existing app on that page will also work fine. Anyways all the apps on the page shares same page like.