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
Related
Inside a Vue component, I run multiple instances of Etherpad editor which are embedded in iframes. Below is an example of that component-
Etherpad.vue (A page component)
<div>
<iframe src="https://mydomain.in/p/1505-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1506-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1507-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
</div>
Now, I prepare a URL for this page suppose its, https://mydomain.in/etherpad/collaborate and share it with others to collaborate on this page. Each user who has access to this URL can type inside these three editors.
The issue
If only a single user is collaborating on this page, things are fine. As soon as other users started working on it, each user is having the following popup of disconnection-
And once a user clicks force reconnects, it appears on the other user's side which is resultant to allow only one user to type at a time.
Environment
vue: 2.6.11
node : 13.14.0"
Etherpad version: 1.8.16,
Web server: Nginx
Browser: Chrome
Authentication: Custom JWT verification (can see in iframe URLs)
Etherpad database type: postgress (database is hosted on a separate machine)
Etherpad client and Vue are being served on the same domain to avoid the cross-domain
cookies, and cross-domain embedding issues.
I am serving Etherpad behind Nginx reverse proxy. On the root
path ('/') I serve the Vue application and on /p/ path requests,
I pass them to the Etherpad node server.
Things I tried to debug
Tested locally, one user in Firefox and another in Chrome, working fine.
Tested with two users with different IP addresses, giving a disconnection popup.
Some answers say to look into the settings to alter the connection limit but didn't mention which settings.
For some users, this issue occurs when pasting a long text but for me, it's happening even when typing a single sentence.
Any help to suggest where to debug or which settings to change even in code or at server configuration would be great.
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.
I'm developing an Angular 5 application and I've built it and dropped the contents of the dist/ directory onto a docker container.
When I navigate the app using the app's navigation (utilizing routerLink) there's no issue with finding the page you are looking for. The reason there is no problem is because Angular manipulates the DOM based on user interaction.
But if the user hits the refresh button on a page other than the index.html, the web server sends a 404 page. This is because Apache (or I guess any server OS) is looking for a page "file" that doesn't exist. Angular's router is in the JavaScript package sent to the browser. Since it isn't on the server, when the server receives a request for a path that isn't index.html, it doesn't find anything in .htaccess and simply returns the 404.
One solution to this problem would be to update the .htaccess file with all of the routes of the Angular application so that it redirects all routes to the index.html. This seems kind of messy though. And how would you preserve the request for the specific page and feed it to Angular?
So the question: Is there a way to make apache aware of an internal page in an Angular app and load the Angular app at that page? Or is .htaccess modification the only way?
.htaccess rewrite is pretty much the goto solution. This page describes it pretty well.
I have an app where I want custom headers decided by the subdomain. I have it working locally, but when I push it out to meteors own servers I only get one single URL to point to the current app.
Currently I have http://myapp.com working fine. In addition I want http://domain1.myapp.com to point to the same application and bring the CSS and header for domain1. This is not solved by cloaking and forwarding, because the program still uses the URL from the page source, http:/myapp.com.
Anyone has any ideas of how to solve this?
I'm writing a desktop application to interact with facebook by using an embedded browser which is running HTML \ javascript from local files.
I was able to use the login dialog to retrieve a token (using the method described in the facebook documentation for desktop applications), but i'm still failing call basic SDK functions, such as FB.init() and FB.getLoginStatus().
When executing FB.init():
FB.init({
appId: '120260327220',
status: true, // check login status
oauth: true // enable OAuth 2.0
});
I get the HTTP response (through HTTP sniffer):
<span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.</span>
And when executing FB.getLoginStatus():
FB.getLoginStatus(function (response) {
if (response.authResponse) {
alert("logged in and connected user, someone you know");
} else {
alert("no user session available, someone you dont know");
}
});
i get nothing!
The application is completely client based, meaning i have no server side, thus there's no URL to register the facebook application with. Running on IE.
Does anyone know if and how i can use the facebook javascript SDK from a local javascript file (for desktop application)?
EDIT: configuring the application URL to be http://localhost is not a valid option, since eventually this script should be able to run on any machine, whether localhost is configured or not.
Thanks.
Related:
The JS SDK is designed to be used on websites (per definition served and accessible over http or https) and we do not plan to support the use of file: or any other protocols.
This is consistent with plugins in general, where http/https URIs are usable as identifiers (open graph amongst others), but where file:// URIs are not.
You can try initializing the SDK inside a web accessible document including using an iframe - note then that you will have to add logic to ensure correct resizing.
As an answer to a Facebook bug report.
As you mentioned that you have an embedded browser within your Desktop app so in this case what you can do is host the app's page that has facebook related functionality over the web and pull this same page's url inside your embedded browser. This way you will be able to provide a valid domain in app's settings and not localhost. Also you can make valid calls to facebook APIs from your page and your Desktop app can then make use of all these facebook related data as they are being pulled onto your embedded browser.
In a nutshell your Desktop app will be much like the Facebook's canvas where the app's page is pulled and displayed inside the canvas. However in your case you will be having a complete control of how, when, where and which parts of the page gets displayed and moreover a properly glued and well structured UI will make the external page and Desktop app blend together and users will never come to know the difference.
Since I got no acceptable answer here are my realizations and what I eneded up doing::
There's no way to use the Facebook SDK on local page due to cross domain ajax issues.
The way to work around it is using JSONP ajax calls to Facebook's graph API (JSONP is allowed for cross domain).
The login process is done by navigation (in a new window) to the login page, with specific URL parameters to set the page's attributes.
If you are using PhoneGap 1.0 and Xcode 4, start by following these instructions: http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-phonegap
My installation looks like: http://cl.ly/AHQ1
Be sure to move the ChildBrowser.js file out of the plugins folder and into the root of your www folder. Also be sure to link to that ChildBrowser.js in your index.html file.
Then follow these 3 steps, http://collingo.com/2011/08/18/installing-childbrowser-ios-phonegap-plugin-in-xcode-4/
Lastly, update your PhoneGap.plist file as mentioned in this post: http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS, mine looks like: http://cl.ly/AHAH
What is the Application URL that you have set on the application's Developer page? I'm just guessing based on the FB.init() error message that you need the to set the URL to be "http://localhost/start page name". When debugging our application we run it locally and have the URL of the application set this way.