NEXTJS not finding JS when rewriting url to external domain - next.js

I am trying to setup a URL rewrite in my next.config.js pointing a path to another subdomain e.g.
localhost:3010/xyz shows localhost:3021/foo/baz/bar
Both are separate NEXT services.
However when trying it just between localhost ports localhost:3010/xyz shows a blank page, if I change the rewrite to look point to our production environment, so:
localhost:3010/xyz shows https://example.com/foo/baz/bar
the page renders but none of the JS or images are loaded.
I see in my Console:
So it looks like it is looking for the JS on the localhost, not the production environment.
I have disabled all security headers but it made no difference

Related

NGINX fails to rewrite the html

I try to set up two different services under the same NGINX in this way:
When I hit /discovery/ from the browser, I see the result HTML page but the browser cannot load some resources that are in another directory:
So the browser request for /eureka/css/wro.css instead of /discovery/eureka/css/wro.css because, seems that NGINX does not translate properly the URLs in the HTML page.
In the source HTML, everything seems correct:
Is there any specific configuration that I miss in NGINX?

Can I get the browsersync proxy to not update a particular URL?

Details:
I create virtual hosts for development like http://project.client.dev and then use browsersync for live reloading and whatnot, which creates a proxy at http://localhost:3000. This causes all URLs on the page to be written to http://localhost:3000, which in 99% of cases is exactly what I want, but sometimes I want to link to that original http://project.client.dev path instead.
Question:
Is it possible to have browsersync not update just particular URLs? Like, add a class of do-not-update or something and have those stay http://project.client.dev instead of being updated to http://localhost:3000?
Use Case:
I build WordPress websites. When I'm clicking around the site's front-end I want those http://localhost:300 addresses so live reloading occurs. On the back-end however, I don't want those paths ending up in the database or, worse yet, browsersync reloading my admin screens while I'm editing content. Typically I just open one tab on the front-end and one on the back-end using the respective domains, but I'd like to add an in-development link to the footer that says "edit page ID 123" and opens the current front-end page up on the back-end for editing; problem is, it opens the http://localhost:3000 version of the back-end and I need to manually update the URL every time (provided I remember to do so).
I think is it not possible at this moment to exclude some URLs. But have a look at the documentation : https://www.browsersync.io/docs/options

browser-sync not working with single page application

I have a single page application that does not use hash URLs I want to use the history API. I am using the middleware historyApiFallback() in browserSync server options. However, this is only working for one level deep URLs:
http://localhost:3000/main correctly resolves to index.html
BUT
http://localhost:3000/main/a is NOT working. The browser shows "connected to browser sync" and then a blank page is displayed.
Anyone knows what could be the issue here?
The issue was that the URLs for js and css resources weren't correctly setup. This post helped me fixed the issue: mod_rewrite to index.html breaks relative paths for deep URLs

Server-Side routing for single page app

I am trying to get my Dart Polymer 1.0 single page app working with pushState. I have set up nginx to route all requests to the dev server which runs when executing pub serve. Nginx also takes care of always requesting index.html instead of the real url.
The problem I am facing is that as soon as I load a url with at least one folder, the js cannot be loaded anymore.
Example
Requesting project.local loads the index.html file and works fine. The same is true for project.local/test. As soon as I try going to project.local/test/something, it stops working because the file index.bootstrap.initialize.dart is requested from project.local/test/index.bootstrap.initialize.dart and not from project.local/index.bootstrap.initialize.dart.
Source code
The whole project can be found at https://github.com/agileaddicts/blitzlicht. The index.html is where the magic happens.
How do I tell the transformer to put absolute urls into the html instead of relative ones?
you should by able to upgrade to the last version of polymer by changing the version of reflectable.
reflectable: >=0.5.0
and perhaps add this in you pubspec
- $dart2js:
$include: '**/*.bootstrap.initialize.dart'

Wordpress : To load all asset files coming from HTTP to HTTPS?

I'm using Wordpress HTTPS plugin to force Admin mode to run under HTTPS.Its fine for Admin Panel.
But still, once i'm under HTTPS mode, every front pages are broken because of, it is saying some front-pages Asset Files are coming as normal HTTP (without 'S') which are then getting blocked to load onto page.
Than resulted in rendering the page looking messy.
So to be more clear again,
When i call the site in HTTPS / SSL mode .. some asset files, like:
http://www.my-another-site.com/something.js
http://www.my-another-site.com/something.css
http://www.my-another-site.com/something.jpg
... etc
.. are BROKEN. (Because i'm in https mode and those above files are coming as http)
So how to make Wordpress to FORCE LOAD those whatever files?(I DON'T CARE WHETHER IT IS SECURE OR NOT. Just want the site under https://... to be rendering properly.)
You could try using a protocol relative URL (dropping both the http and https from the URLs) - see this answer.
According to this answer you'll need to be on a recent version of WordPress (I'd assume 3.5) for it to work with wp_enqueue_script.

Resources