browser-sync not working with single page application - 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

Related

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'

ASP.NET page formatting does not works

I have deployed an ASP.NET website on IIS 7. I was able to access my site using the URL http://**local host**/sitename.aspx and all the formatting of my pages is looking good.
But when I access the same page by using the URL http://**servername**/sitename.aspx from another system or on the same server where I have been deployed, the page formatting is not working properly.
What would be the best solution for this? Thanks
First a fall to check your Js/Css file path where you have not mention static file path with localhost name.
For more detail go to browser and browse your url and press F+12 so development tool will be open and check there for broken url.
I am not sure why you are worrying about formatting soo much. I mean formatting should not affect you much unless you use <pre> in your html.
There are ways to modify the HTTP Response Using Filters. Can you please makesure none of these filters present in your application for release mode.
Generally i use HTTP compression feature of IIS to compress my content, but in browser it looks correct to me.

Single page app in AngularJS and ASP.Net works fine, but when I refresh my page in the browser I get 404 errors

So I've set up an HTML5 single page application, and it's working well. The page is at /App/ and when some one goes to content it looks like /App/Content/1234.
One problem: If the user refreshes the page the server can't find that URL because it doesn't actually exist. If I send them to /App/#/Content/1234, they're golden, but what is the best way to do this? I have a LOT of different styles of URL under /App.
What is the best way to globally catch any request under ~/App/(.*) and redirect it to ~/App/#/$1?
The only route registered in MVC is the standard OOTB route.
Sounds like your server is not re-writing the urls to the app's base URL.
The URL re-writing needed on the web server is server-dependent. For Apache, you'd use mod_rewrite.
Instead, switch Angular to the "Hashbang mode" (the default) so the urls will all store the local state after the # in the url.
I don't want my apps to require server configuration changes, so I recommend hashbang mode.
See AngularJS docs. See section "Hashbang and HTML5 Modes" The HTML5 mode section describes all the configuration issues needed to support HTML5 mode for the urls.
This awesome dude describes how to fix this here.
In brief:
Remove MVC nugets (unless you use MVC controllers for anything) -
you can keep the Web API nugets. Keep WebPages and Razor packages.
Also delete MVC controllers and views.
You can keep using .cshtml
files with some web.config modifications. You'll need this for
bundling.
Finally you add a rewrite rule on web.config to point all urls (excluding content, images, scripts etc) to index.html

ASP.net URL problem: Website Domain not appearing on front of URLs

I create a menu structure from a compiled class that returns an unordered list with ~/ menu options. On my localhost, they show up as http://localhost:port/applicationpath/Default.aspx
I actually have to pass the Application Path to the function to prefix the URLs. The problem, however, is that we moved the application to our development server, and now the URLS show up as:
http://default.aspx/?id=1
http://folder/default.aspx
The website domain doesn't seem to be displaying. Anyone have any clue? Is this an IIS issue?
Ended up using a getRootURL() function within my javascript to do the job.

https - ssl - relative path approach not working?

I am using a master page layout etc, so all the pages have some parts of it coming from one master page or another.
Now, checkout is one of these pages, and it needs to be secure. In my master page, I am using relative path to images and Url's, and these images end up with "http". I thought that if I am using relative path, my master page AND css file automatically use https instead of http if the page is secure? Apparently it does not, when I right click on an image, it still has "http" instead of "https" ans same goes for URL path.
Check out this great article by Ned Batchelder which shows schema relative URLs:
<img src='//fast.cdn.net/pix/smiley.jpg' />
When the images come back as http are you checking this from your local dev or production? I thought I had this problem before but then realized my dev environment was always http and that the relative path would work in production because there it would be https.

Resources