Routing problems with Codeigniter and Backbone.js - .htaccess

Here are the frameworks I am using:
Codeigniter
Codeigniter REST API
Require.js
Backbone.js
Running the app:
The htaccess file redirects everything through the Codeigniter index.php file.
There is a default route setup in Codeigniter to call the "Start" Controller.
The Start Controller calls the Start View (the only view in Codeigniter ).
The Start View holds the template for the entire website and makes a call to start Require.js
Require.js starts up Backbone and app works as expected.
Problem: Routing to other Backbone Views:
Now I want to route via Backbone to other Backbone "views".
The problem is when I try to provide a link like "localhost/otherPage" in an HREF the htaccess file fires, and Codeigniter tries to find that controller and I get a 404 generated by Codeigniter.
I have tried forcing a route in Backbone instead of HREF using `app.navigate("otherPage", {trigger: true});`, but I get the same 404 error generated by Codeigniter.
What direction should I take:
I would like to continue to use Codeigniter for its RESTFUL API, Models and some special validation features.
I also want to use Backbone and Require on the front end.
Can I change the htacess redirect to an index.html file that fires up Require and Backbone. Will the Codeigniter RESTFUL API Controllers still fire properly if I use this approach?
Do I create a view in Codeigniter for each page and have each page start Require + Backbone a new for each view?
I will be looking into Node.js very soon. Should I just trash the Codeigniter aspect of the the framework and go whole hog on Node.js?
Any guidance is much appreciated.

If you're not already doing it, you may want to route via Backbone through the hashtag changes (it's his normal behavior, pushState: false), as modifying the hashtag would in no way result in a server call, thus ignoring Codeigniter's router.
In your example, you would want to navigate to localhost/#otherPage.
Then use Codeigniter's router for your ajax REST calls.

Another way to keep your browser from submitting the http request with the HREF link is to just override it with javascript and jquery. Could be useful if you don't want to always use hashtags as Loamhoof suggested.
Example:
$('#linkID').on('click', function(event) {
event.preventDefault();
backboneRouter.navigate($(event.currentTarget).attr('href'), { trigger:true });
});

Related

How to Redirect VueJS Frontend Route to Express Backend Route?

I tried creating a BACKEND redirect route ('go' route, see below) that would redirect to links stored in my database by some ID. For example, I would have a link:
http://backend:3000/go/slug-name-of-post
The backend ExpressJS route looks like this:
router
.route('/go/:slug')
.get(controller.go)
Where the controller simply performs a redirect after it gets the URL form the database using the SLUG as the key:
url = database.getUrlBySlug(slug)
return res.redirect(url);
This part works great - I can type in backend url and it redirects just fine.
But now I am working on the VueJS FRONTEND and I want to include the links into my frontend webpage but I do not want this links to point to the BACKEND link directly - I want the links to be pointing to my FRONTEND instead. The main reason is that I want to be able to share these links and I want the link name to include my FRONTEND name instead of the BACKEND and the PORT number, etc.
For example, I want to link on my FRONTEND to be:
http://frontend/go/slug-name-of-post
And then I want the front end (Vue-Router??) to redirect to the correct back end, based on whatever the 'slug' is. Where 'slug' is defined in: http://frontend/go/:slug
What is the best way to accomplish this? Do I simply create a Vue-Router route? If so, how do I have it redirect to a different webpage instead of to a component that is on the front end? Or do I need to create some component on the frontend that internally redirects to the backend?
The main issue is I don't want users to see the URL address of my backend when they see the links - or share the links, etc. I want the links to always point to my frontend, hence my frontend has to handle the initial routing. I guess I can have the frontend VUE component do a similar set of ExpressJS backend calls to get the final URL to redirect to and then do the redirect from the frontend?
Thank you in advance.

Use existing ExpressJS app as Firebase app

I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.

Connect from WordPress webpage to a Node.js backend server

Being new to WordPress, I've been doing some research and yet I don't seem to be able to pinpoint a solution for my need.
In short, I would like to allow a WordPress page to access a Node.js backend, the goal is ultimatly to get access to MongoDB via Node.js, retrieve some data and return a dynamically generated webpage to the website.
I was checking WordPress Rest API but all it seems to do is frontend handling of a WordPress website, creating and editing post, etc.
Unless there's a better way of doing it, I was thinking I might just send a get/post request from the WP page (like, with a form's action) and use Express.js to listen to that request, do the whole workflow on Node.js, then maybe use some npm wordpress API (like this one) to create a wordpress client and add a page or post with the DB extracted content.
I would appreciate some guidance, if any, as to how could one connect from WordPress to a Node.js backend.
Thanks a bunch!
There are a lot of ways to do it.
If you only need Node for a particular page then you can use your web server (NGINX/Apache) to reverse proxy a particular path to the Node server.
If you had to you could always use an HTML iframe as well but for some reason I feel like that's bad advise.
The method you described would work too. I was considering using GET/POST requests with Express running on a different port for a project I'm working on that uses Wordpress. I decided to go with the solution linked below.
This is probably the method you're looking for based on your description. Skip to solution three if you have to use Wordpress.
Node JS Reverse Proxy (with Apache)
You can find how to do it with NGINX with a quick search.

React Subdomain Goes to Main Site 404

URLs on my subdomain like react.mysite.com/page1 go to mysite.com/404.html, when refreshed, instead of the appropriate React component.
Can i have a seperate .htaccess for my subdomain? If so what would I write in it so it would look at react.mysite.com and let that handle the rest of the url?
I'm relatively new to React and SPA, so any help would be greatly appreciated.
So you can have multiple .htaccess files.
And the rule is available in this question:
Apache web server doesn't allow me to refresh on /about but on localhost its working fine

Removing Hash from URL in Ember & SP2013

Does anyone have any approaches for switching from Hashes to the HTML5 History API (which is done through Ember's API 1.0.0)? I have an SP site in which the default.aspx page loads Ember then routes currently are off of the root by using hashes ex: http://webserver/#/home.
I implemented a solution using App.Router's location and rootURL (shown above). In addition I used IIS Rewrite rules to perform redirects if a user navigates directly to /home (requesting http://webserver/home redirects the user to http://webserver/pages/default.aspx/home). Ultimately what I'm trying to do is remove "/pages/default.aspx" from being present in window.location.pathname. The problem is that Ember is loaded from default.aspx so none of the other routes work unless the rootURL is in place.
Anyone have any suggestions?
Thanks!

Resources