Web api project on one port and Front end - javascript

I have 2 project in 1 visual studio solution - Front end(HTML, CSS and JS) and Web API.They are running on separated ports - the FE on 37056 and API on 6596.In the JS files im targeting the wep api controllers - for example http://localhost:6596/api/Contacts/GetContacts, and the rendering the response from the Wep API on the HTML page.So far so good..
Here is come the problem - in the HTML the URLs are presented http://localhost:37056/about.html, so if for example i want to point to some specific resource returned by the Web API this is not possible.If i type for example http://localhost:37056/api/Contacts/GetContacts there will be wrong request.
How i can to bypass this - i have a blog post in the Front end that are feed with data from WEB api + database.I want to give the user opportunity to http://localhost:37056/api/Blog/Page=1 at the moment this is only possible if he/she navigate to the page called Blog in the Front end and click on specific Post and the URL in the browser will Not change.It will be http://localhost:37056/api/Blog without page numbers and so on (JS is making the requests).
Thanks in advance!

You're concatenating FrontEnd URL (http://localhost:37056) with the BackEnd resource (api/Contacts/GetContacts).
There are two ways to solve this:
Return from BackEnd absolute URL (instead relative) pointing to backend resource. This should be feasible, since backend "knows" it's own URL.
Store in FrontEnd base URL from backend, and concatenate it to relative paths returned.
I suggest using first option, because in case some resources are moved to a new location (for example, external resources stored in third-party servers) you don't need to update front end at all.

Could you use absolute uri instead of relative Uri in html?

Related

How can I create a different URL for every new Object

I have built this site "https://supsurvey.herokuapp.com/SurveyCreate.html"
You create a survey and then it redirects you to a unique URL
https://supsurvey.herokuapp.com/SurveyPage.html#718807c9-3a5b-4745-b953-511afef5e073
In the surveyCreate page I have location.assign (SurveyPage.html#${survey.id}) which is linked to SurveyPage.js and from there I extract the uuid4 using currentUrl.split (#) and then I send a get request to my server which is built in NODE-JavaScript (only for strong survey objects in MongoDB) for the correct survey OBJECT and display it to the user.
I want so so that after you press create Survey you will be redirected to
https://supsurvey.herokuapp.com/SurveyPage/718807c9-3a5b-4745-b953-511afef5e073
So instead of .html#{uuid} to /{uuid}
How do I do that?
I have tried changing to location.assign (SurveyPage/${survey.id})
but it fail because it doesn't find the file without the .html extension
I also tried location.assign (SurveyPage.html/${survey.id}) which also doesn't work.
since you are using NODE for backend - you can build your app using express
https://expressjs.com/en/api.html#req.baseUrl
allows for api like route rewriting to accomplish what you want
can also be done using the more robust Hapi server
https://hapi.dev/
can be done on any language really
slimphp works great for php apps
http://www.slimframework.com/

Differences between MVC routing and SPA routing ?

I know how a MVC application handles routing,
(/foo/bar get) request hits the server
route /foo/bar with get method is found or not found, if found route handles the request by calling a method which serves a view page with corresponding data filled up.
client gets a html document with many links to other pages.
Another link is another procedure just like this one.
However, I have been learning react+meteor pack, which is a SPA (single page application) without ssr(server-side rendering). The most critical part that gets me confused is routing.Let's say I have 3 different routes for my SPA. (/), (/route2), (/route3)
(/route2) request hits the server. What does the server serve ? The whole application code with (/route2) active or what ?
Let s say we are on (/) route and clicked (/route2) route. So what s happening now ? Does react empty the #mainDıv and put related component instead, from where, the bundle.js which already contains all of the views' html as components ?
Is there a way to send only requested page's html and js, and after showing the content, getting other pages' html and js in the background, without client even feels. So that when another route is hit, only data will be on the wire.
Finally , only sending the related page's html - css - js when requested,I don t don't know if such a technique exists, seems to lack the SPA experience, but I am not sure If it would lack SPA expereince. It would be great to explain how to approach this issue.
With a SPA you typically (read: virtually always) configure your server to serve the same bootstrap HTML/Javascript regardless of which URL has been requested. A request for /route2 will get the same HTML response as a request for / or any other URL (unless you have specific exceptions for specific reasons). The SPA always starts with the same bootstrap code and examines the current browser's URL, then dynamically loads content as needed. How exactly that content is loaded and when it is loaded depends on the specific framework/code/circumstances/configuration, but yes, ultimately the contents of the DOM are dynamically being replaced by Javascript.

Detect application version change on a single page application

today a question was raised here and I don't have an evident answer.
Assume that we concatenate and minify all resource files (CSS and Javascript) and declare them in the "Master-Page".
On a multi-page app, if a CSS file changes it will be recharged on the next full page load.
On a single-page app, the user can keep working for days and never recharge the main page where the CSS files are declared. The user will never see the changes until a Ctrl-F5 is issued.
I'm sure someone already thought of this and have an experience to share :)
For me, using WebSockets is not an option. First because it's overkill and second because not all my clients support the technology. Same reason applies to all WebSockets fallbacks... I won't keep hitting my servers because of this.
So, any ideas anyone? :)
BTW, we're using AngularJS if that can help for a specific solution.
Thanks!
I've getting through this same problem. My solution which is opinionated and may not respond to your criterias:
When I package my front-app and my server-app, I share a configuration file containing the current version of the front-app.
Front side: 75% of my routes change implicitly call a Webservice (route change resolve). SO each time I call my server I include a custom HTTP header (or a GET/POST param) containing the client version of the front-app.
Server side : I compare the front-app version (the one in the browser of the user, loaded last time user refreshed/loaded the SPA) with the front-app version of the shared configuration file :
If version matches : I Do nothing.
If version don't match I send a custom HTTP status error code (418 for example)
Then front side: I added a response Interceptor that intercepts any 418 error code and do a force-refresh of the whole app
That's it. Basically the event that "check" if the front-app version is the latest is a route change (that calls a WS via ajax). But you could add some infinite $interval calling a dedicated WS each 5 minutes or so...
I can add some code if needed.
Hope this helps ;)
Assuming that you are using AngularJS' routing via $route service and provider, then you can use $routeChangeSuccess event to perform a server request if there are significant changes that needs to be changed; if there are any then you can do a window.location.reload() to refresh the page and get all the updated resources and htmls.
The following process can be changed depending on how you want to implement it:
1. Setup a config file in your server indicating the app's version. You may also choose to assign different versions for different files but since you have concatenated all your resource files then I guess you may limit your version options in your configuration.
2. Create a service that contains all the necessary information(versions of files from the server) and methods to perform a server request to your server to check against the current file versions stored in the service.
3. Use $routeChangeSuccess event to perform a server request using the service that you have created in step 2, if the request returned a valid confirmation that there were changes then do the force page reload via window.location.reload().
I decided to add my final thoughts as an answer here too:
We went for a reduced solution for now.
As we have a "proxy service" that is (again for now) the only one that interacts with this application, we added the application version on the http header of all responses. If we receive a newer version, a popup appears notifying the user and a full page refresh is issued...
This solution won't work for applications that don't have their own "private" service.

Facebook Javascript - URL not allowed

can someone tell me why I am getting this Error:
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.
At my facebook app I tried some URLs like "example.com", since I do not have a server to upload my stuff yet.
But I have used some App Ids that work for sure and still get the error, so I need to add something to my html stuff?
Thanks for any help. :)
You need to provide the URL of the actual app that you're using to access your facebook app using the API. Even if it is localhost, you need to set the correct URL in order to be able to test.
Check the FB developers documentation for more details
In Canvas URL at the end add / and if you're using a Tab than the filename must be specified

Dynamic response with tracking pixels?

I am testing out some tracking pixel functionality in an ASP.Net 4 MVC architecture.
This article gives a nice way of setting a tracking pixel (image) that you can use to read a visitor's environment parameters and do some logging on the server side before completing the response.
What I would like to do is inject some Javascript, based on the account ID that the pixel came from. In the example above, the ID would be set by setting some query string parameters.
By the looks of that code, it can only be used to log data, as the response type is of type image.
Is it possible to accomplish this using the method shown above? If not, can I get some recommendations/sources on how to accomplish this using Javascript and tying this back into my .Net architecture where based on some logic, I can add some additional Javascript to the response?
If I have no other choice to go the JS route, I'm guessing it would be something along the lines of the Google Analytics tracking script that includes some parameters sent back through JS.
Thanks.
If the client is requesting an image and expecting an image, then that is what you need to return. Look at this type of HTML that would generate an image request:
<img src="test.jpg">
Clearing the client is expecting image bits to come back and anything besides that is going to mess up the display of that image.
If you want to put server-supplied javascript into the page, then simply have the client request some javascript like this:
<script src="test.js"></script>
Your server can then do it's logging upon that request and return whatever javascript it wants to from that request. If you want to return different javascript for every request, then you will need to defeat caching in the browser (there are a number of was to do that) so that the javascript is always requested from the server.
In general, I'm guessing that you don't need to return different javascript for every request. But rather, you can put a common block of javascript in the client page and that javascript can examine the environment and branch based upon what it finds. That's how Google Analytics works. One common piece of javascript is served to the client, that code examines the environment and then makes an ajax request with different parameters set that causes the right information to be recorded on the server.

Categories