angularjs routing works with hosting url but not custom domain - angularjs

Url's with angular routes are not working when I try to access my site using my domain name. However if I use the same route with my hosting url it works fine.
This does not work (routes to main page and not specific team):
http://visualfpl.com/#/team/177221
This does work (loads team):
http://visualfpl.azurewebsites.net/#/team/177221
I've tried a couple things (forcing route.reload on app run and whitelisting the hosting site) but still having an issue.
Any suggestions? Thanks.

Your domain name site is wrapping your other site in a frame. The frame has it's own "location" or URL or whatever which doesn't have the #/team/177221 part on it, it just has "http://visualfpl.azurewebsites.net/" to start. Load the page at your domain name and "view source" to see what I mean. Also notice as you navigate around the site at your domain name, the address bar of the browser doesn't get updated. It's updating the URL of the frame the site is in.

Related

Custom domain name for github pages only works for homepage, all other 404

I just linked a custom domain I got from google domains to a github pages react app. Currentely, when I go to the custom domain, the homepage of the website works fine, however, when I click on any links, firstly, the react-router doesn't change pages. And Secondly, when I reload the page, it still just loads the homepage and returns a 404 error.
Here is the repository with all the code: https://github.com/Been-H/ridge-road-journal-website
And on google domains, I have these as my type A records:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
And this as my CNAME I have host name www and the data is my github (been-h.github.io
Does anyone know why only the homepage is working and nothing else? Thanks!

Refreshing React page

I'm back (Refreshing React with Express server). I am hoping to figure out this issue.
Quick recap: I am trying to refresh my react website. If I go to www.domain.com/about I will get the:
Not Found
The requested URL was not found on this server.
same if I click on the button to get to /about and hit refresh I will get this error.
My goal
To be able to go to my site, click on another page (i.e. domain.com/anotherpage) hit f5 for refresh and get the same page.
I understand:
The problem is that React just changes the URL when I click on my React app button or link to go to a different page. Then when I refresh it looks for www.domain.com/whatever. Since there is nothing for it, it returns 404.
I also know that if I can get my React app to direct all traffic to index.html. React will handle the rest.
What I have tried:
In my previous post, it was suggested to use my hosting site to redirect traffic to index.html. However, my hosting site lets me adjust the DNS for subdomains but nothing after it. (ie. www.subdomain.domain.com works fine but www.domain.com/whatever doesn't) which I expected but I thought I would try.
I do have an express app however, it doesn't serve the files it just waits for a button to be pressed and then does stuff. I don't need to the server to run to have the website up.
I have tried creating a route in express for this and it looks like:
app.get('/*', (req, res) =>{
res.sendFile(path.join(__dirname + '/public/index.html'));
});
I still get the same 404 error with this.
I have also added an index.html to my server. Thinking it needed the .html file to send. (Thought it might be good).
What I don't know
Where does React look for index.html in production? When I look in the build files under asset-manifest.json there is an "index.html": "/index.html" line of code. Is there where it finds the index file? If so, can I change this to go to index.html on every page request?
Obviously I want the user to be able to refresh the page and get back to it. Can someone point me in the right direction?
Thanks in advance!

PWA loses its params and query params after being added to the home screen

I have created a PWA(Progressive Web App) using Angular6. It works perfectly as expected in the browser. My scenario is to handle all the app data based on the params I get from URL
eg: https://<my-site.com>/app/abc123
where abc123 is my param which I need to add to the home screen app.
So the problem is when user adds the app to the home screen it loses all the params (I have tried using queryparams as well) and that leaves me only with the hostname. I need the whole URL to be added as the App URL. Can you please help.
Thank you for your time and help!
When you add a web app to your homescreen, the browser will check to see if there's a web app manifest.
If the manifest is present, the start_url field in the manifest will be used as the initial page when you open the web app.
If you need to customize the initial page, you'll need to change that start_url value in your web app manifest accordingly.

AngularJS returned 404 error if I typed the URL

I have an angularjs application hosted in my local IIS with route configured. For example '/services' will use servicesController and services.partial.html view.
It worked well if I clicked the link on the main page and the browser address changed to http://localhost/services. But if I refresh or type this URL directly I got 404 error.
Can anyone help me what I did wrong.
when you refresh or type you page, the entire page while be reloaded out of angular's control, in fact its the browser that is taking control. thus you localhost have to return a valid resource for /services. without html being returned, there is no way angular can control the behavior of the route.
basically what you should do is config you server and return the same page for /services as /
Use http://localhost/#/services instead of http://localhost/services and this would work fine as I see.

Site inside Web Tab isn't working properly in IE

A Web Tab is created with pointing to some specific URL. It works fantastic in FF as well as in Chrome. But IE don't want to allow me to login. However I can work with this site outside Salesforce pretty good.
I tried to create VF page and put iframe pointed to the same URL - the same situation.
Maybe there are any other options to achieve my goal?

Resources