Tell Apache not to freak out over 404, and allow Ember-CLI router/adapter logic handle slug in URL - apache

My new Ember-CLI app uses a user portal slug in the URL to display proper information to the user. For example (fake URL): http://my.server.portals.com/robertplant
I'm using a combination of router and adapter logic to get the user portal name form the url slug, and then display the data related to it. It probably needs some more work, but here's what I have so far:
Router code extract:
Router.map(function () {
this.route('portal', {path: '/:portal_slug'}, function () {
this.resource('account', {path: '/'});
});
});
Adapter code extract (for hitting the right API end point based on portal):
namespace: function () {
var portal = window.location.pathname.match(/^\/([^\/]*).*$/)[0];
return 'abc' + portal + '/api/v1';
}.property().volatile(),
I can hit the app locally (e.g.: http://localhost:4200/robertplant/) with no issues. It runs using Ember-CLI’s built in web server.
However, when I move the app to the server, which runs Apache, and try to hit it (e.g.: http://my.server.portals.com/robertplant), I get:
Not Found
The requested URL /robertplant was not found on this server.
Which makes sense I suppose, since there isn’t really a directory named the same as the slug. However, there has to be a way, I would think, to tell Apache to ignore the problem it thinks it is having, and allow the app router to handle it. The local web server is doing it somehow.
Ideally, the solution would leave the URL displayed the same. Also, re-writing the request to point to something like http://my.server.portals.com?slug=robertplant causes Ember-CLI assets to be looked for at the wrong path (can't set baseUrl dynamically).
I'd appreciate any feedback on how to set up the app in Apache to allow for this to happen.

Solution:
Say the current subdomain is my.portal.com. Create another subdomain that points to the same directory on the server. Name it my2.portal.com
For the first subdomain, add a mod rewrite rule which rewrites something like
http://my.portal.com/joe_blow
as
http://my.portal.com?portal_slug=joe_blow
This allows you to hit the url without a 404.
Set the asset paths (in the generated index.html) to point to the second subdomain. E.g.:
http://my2.portal.com/assets/app_name.js
This allows the app to find the assets without the issues associated with the rewrite or the slug in the url.
Of course, you can also place the assets anywhere else, including an S3 bucket. But in my case, I have a constraint of having to store them on the same server/network for security reasons. And my way you can deploy all the files to the same location.
That's it! Works like a charm.
The only thing I'm not fond of, is having to edit the index file after it's generated. I will try to automate it at some point.

Related

app.MapFallbackToFile causes reload the entire SPA site if the URL typed manually

I use the latest recommended SPA + .Net Core-based Web APi pattern where the FE referenced to BE, FE serves proxy to BE during development, and app.UseDefaultFiles()serves index.html where the SPA resides during production. This pattern means no proxy middleware is required as it was in opposite direction when the BE serves FE as a proxy.
app.UseDefaultFiles(); <-- Here the site is loaded first time
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("/index.html"); <-- Here the site is reloaded if URL typed(changed) manually
Client-side routing is the point. Specifically, I use Vue Router and IIS hosting. When the site is already opened, and a user types URL in the browser, it falls down to app.MapFallbackToFile("/index.html") and then Vue router handles the route.
The problem is that the site is always completely reloading when the URL is just changed (let say from mysite.com/a to mysite.com/b) in this scenario, as I would press F5. It's not always necessarily bad but I would like to control it.
The question is: how to get rid of app.MapFallbackToFile("/index.html") and somehow pass the captured URL to the SPA, as it would be naked SPA without backend which now stays in front of frontend.
If have tried Vue Spa with ASP.NET Core 6 minimal setup and it seems for me, that there is no way to achieve what you want.
When user enters or changes the URL address, the browser navigate away from the page and do a GET request to BE (Backend).
Here is the catch-all fallback route required, otherwise the user gets the 404 error from the web server.
I presume you use the HTML5 History Mode. Here is a part from the Vue Router Docs about this problem.
Since our app is a single page client side app, without a proper
server configuration, the users will get a 404 error if they access
https://example.com/user/id directly in their browser. Now that's
ugly.
Not to worry: To fix the issue, all you need to do is add a simple
catch-all fallback route to your server. If the URL doesn't match any
static assets, it should serve the same index.html page that your app
lives in. Beautiful, again!
If somebody yet knows the solution, please post a new answer.
It would be great to know how to do it!

How would I make Vue Router work with GitHub Pages?

I just deployed my Vue app to my website using GitHub Pages.
The website is successfully hosted at https://astroorbis.com.
Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.
There are other links that have the same error, such as /discord, /github, etc.
I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.
What would be the solution for this?
As stated in this section of the HTML5 mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
So, the solution would be to use something like that
const routes = [
// will match everything and put it under `$route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]
On Netlify, you also need to add the following for it to work
/public/_redirects
/* /index.html 200
So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.
Otherwise maybe just give a try to Netlify with the _redirects configuration.
Maybe this article could help regarding Github pages.
The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).

prevent handling of missing files by other use/get in express

I'd like to keep the contents of the folder /public for use of local files by a local app. However, when a file is missing, instead of getting the 404, the user is getting the index.html page.
What I would like to do is have user get the 404 when accessing any resource that does not exist for anything under /public/*, but have the react app handle everything else from index.html
this is my setup:
app.use('/public', express.static(path.resolve(myPath, 'public')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(myPath, 'index.html'));
}
should the get include a regex to not include public matches, or is there a way to handle this with use?
The problem is that you've explicitly told express to look into your public folder for ANY file that the user requests with this line:
app.use('/public', express.static(path.resolve(myPath, 'public')));
Express, by default, serves NO files. It makes nothing public by default. So, the first thing to do is to remove the line of code that makes that entire directory public. And, then if you want to serve some specific things from that folder, you need to either make very specific routes to only the files you want to be public or you need to move the "public" files out to a directory where everything can be public and then point express.static() at that directory.
Then, you've added another line to respond to any request possible with one file:
app.get('*', (req, res) => {
res.sendFile(path.resolve(myPath, 'index.html'));
}
This is just not really how you should be using express at all. Here are some steps to think through:
Figure out which static files you want Express to serve automatically (without a specific route being made for each file).
Then, organize those files so they are in their own sub-directory on your server hard drive.
Then, you can point express.static() at that directory without any fear of it serving files you don't want to be automatically public.
Think about organizing things into a hierarchy (not required, but sometimes simpler to manage) so that css files might be one place, client-side js another place, etc... such as /css/css files here and /js/js files here when laying out your hierarchy. Then, you can control the serving of each type of file separately if wanted and it may make maintenance easier (since separate people often maintain CSS files and JS files).
Then, design specific routes you want handled for other types of files.
Then, add an error handler route which determines what should be returned to the browser when no other route handler was found. How to do that is described here. Also, note that Express has a different default error handler based on whether the NODE_ENV environment variable is set to production or not.
Don't use * routes that handle everything with the same content, including things you don't want to provide a specific page for. You don't want search engines to index things that you don't have original content for and you don't want users to bookmark unintended URLs just because you happen to be using * in a route handler.
I was able to resolve it by adding
app.get('/public/*', (req, res) => {
res.status(404).send(req.path + ' not found');
})

rails angularjs html5mode webrick or nginx rewrite rule configure how?

i have angularjs app with html5mode enabled.
I have tried to run app in IE8 and it seems that URL is being prefixed with #! is it suppose to be - back button works etc..hashbang mode
I have tried to run app in modern browser and it seems that history api also work. All fine.
But if i hit http://localhost:3000/notes directly in address bar in both browsers i get routing error from webrick/rails app. I thought angular will take over of this request and handle it.
I have NOT setup anything on server side as angular guide say:
Using this mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)
Is that why i am getting route error from webrick? And if i will able to setup rewriting rule how the hell it works? I thought if i rewrite something like http://localhost:3000/notes -> http://localhost:3000(index if u wish) the "/notes" - where i want to jump in is gone and angular app will never know where to route..
And if there is no way to tell webrick what and how to rewrite. How do you do in your development environment?
Thank you a lot.
You need to configure your server to return the same data for /notes as if it were the / route. Not a redirect (since that will remove notes). Basically you need a catchall route that returns if it doesn't match anything else. Either that or enumerate the known routes (i.e., /, /notes, /other, etc.), and have all of those return the same document. At that point, angular will detect the path and act accordingly.

Dynamically setting the BaseUrl within configuration in Symfony2

I know that within Symfony2's configuration, there is no reference to the base url, as there is no request; the application could either run in cli or within a web server, and therefore we cannot rely on request. But still, I have configuration that asks for stylesheets or javascript base url (such as the JQueryHelperBundle, where you can set your jquery local path - being the local url). The thing is, is there a way to dynamically set a base url for the configuration, without having to change it so that:
The application can move from any directory under development, whether www/myproject or www/foo/myproject without having to change the settings
Production would work the same, except that rewriting the base url with apache would be detected (virtualhosting is common, where the baseurl is mapped to the web directory as '/').
Is there a way to get that base url information? Would using the difference between $_SERVER['DOCUMENT_ROOT'] minus the kernel root dir be a way to detect such base url? But what about virtualhost rebasing the url to / on the web directory? Hardcoding the base url completely couples the project to where it stands in development, and moving project around would require to change the base url everytime, which is annoying.
So, is there a way to dynamically detect the base url within Symfony2's configuration, according to the environment, without depending on the request?
I had to do that in a service, so I injected the router service in my own service and then:
$baseUrl = $router->getContext()->getHost();
But I considered it more as an hack that a real fixture of Symfony2 framework. For instance, in Controller you can generate absolute url easily (example from the symfony book):
$router->generate('blog_show', array('slug' => 'my-blog-post'), true);
And in the twig template, you have the {{ url }} function
I hope this help