I'm currently working on a application with a Ruby on Rails backend and Vue.js frontend. It's a single page application. I'm using the webpacker gem to build my main JS file.
I've added vue-router and and a couple frontend routes. I'm able to navigate using <router-link> which correctly renders the appropriate component. What I can't figure out is how do I setup my frontend routes so that someone can directly navigate to a URL without hitting my Rails routes.
For example if I type /sample-route I'd like to hit my Vue.js route and not my Rails route. I still want to be able to make API calls to my Rails routes as well. For example /api/users.
My problem was solved by adding <router-view></router-vew> into my main Vue.js component.
Here's my rails routes file as well:
Rails.application.routes.draw do
namespace :api do
# api routes here
end
root 'application#index'
get '/*path', to: 'application#index'
end
Depending on how many routes you have, you can add your Vue routes to routes.rb and send them to your root Vue application route. e.g. Webpacker is rendering your js pack with controller#action vue_controller#app. Your Vue app router uses /user/profile. In routes.rb, add a route:
get "/user/profile" => "vue_controller#app" # <- The controller action rendering your Vue pack
If it seems unmaintainable to redefine every Vue route in routes.rb, you may want to look into a universal fallback route that sends them to the vue app controller action. As long as you don't change the route, but just respond with the Vue controller action, the Vue router will take care of rendering the right components for that route when the page loads.
In Rails 4, you can use something like the answers in this SO question to help you out with setting up a "catch-all" route Rails catch-all route.
EDIT: Using a catch all route does lead to some problems with 404's. If the user requests a route that doesn't exist, the Rails app will still send them the Vue pack. To fix this, you would need to add some unknown route handling in your Vue router to render something like a 404 page.
There is one more approach which will be useful and handles sub-routes as well (having separate vue apps per page in a single rails app):
routes.rb
Rails.application.routes.draw do
# this route entry will take care of forwarding all the page/* urls to the index
get 'page_controller/*path', to: 'page_controller#index', format: false
end
Additionally, please handle the api and index routes separately based on the design.
vue-routes.js
const router = new VueRouter({
mode: 'history',
base: '/page_url',
routes: [
...
]
});
Related
I am trying to set the base address www.myplace.com/admin to be directed to www.myplace.com/admin/adminhub within the namespace coding below. I have tried every combination I can think of, but to no avail. I was trying to follow the same code used for the / of the app.
namespace :admin do
...
get "adminhub"
get 'admin', to: 'adminhub'
end
Sounds like you want to redirect the browser to the new URL. You can do this with the redirect helper in the routes.
get '/admin', to: redirect('/admin/adminhub')
This allows you to redirect from one path to another. See the Redirection section in the Rails Routing Guide for more details.
So in our Rails 4.2 application, there is the alchemy_cms gem which requires its routes to be mounted last in config/routes.rb.
SampleApp::Application.routes.draw do
#other routes for the rails app here
# :
# :
mount Alchemy::Engine => '/'
end
We get routes like "/somehacker/routingurl" which then falls out to the Alchemy::Engine to handle, resulting in a default 500 error. If I wanted to do a custom 404 error, then the proper way to do it is to build a custom 404 page and have Alchemy handle the redirect? Otherwise since the Alchemy docs specify that it has to be the last route in config/routes.rb, there won't be a way to add a catchall route to redirect to some kind of error page I assume.
EDIT:
One of the problems is that there are some routes that are like the invalid "somehacker" route above that do need to be parsed by the Alchemy routing engine, such as "/en/us" where "en" is a valid locale. This is why I initially thought to put the route handling in the Alchemy engine's routes file.
If it is difficult for you to configure and use the Alchemy cms gem to redirect unknown routes into a custom defined page, you can use the bellow method to implement the same with a small coding tweak given bellow:
Rails 4.XXX
1. First Method.
(routes.rb)
You can still use a simple get to redirect all unknown routes.
get '*path', to: 'home#index'
If you wish to provide routing to both POST and GET requests you can still use match, but Rails wants you to specify the request method via via.
match "*path" => "home#index", via: [:get, :post]
Remember that routes.rb is executed sequentially (matching the first route that fits the supplied path structure), so put wildcard catching at the bottom of your matchings.
Here you can replace the home#index with any custom path that you defined in you application, also note that it is important to keep this redirection code only at the bottom of routes.rb.
2. You can follow the bellow tutorial on the same problem in a different perspective to solve can be found.
Custom 404 error page with Rails 4
In a Rails and Ember project, I decided to use EmberCLI Rails because I want to do integration tests with Capybara and all my favorite testing gems.
I installed it and it works when I go to the home page.
I added routes on ember like this :
import Ember from 'ember'
import config from './config/environment'
Router = Ember.Router.extend(location: config.locationType)
Router.map ->
#resource 'users'
export default Router
When I go on http://localhost:3000/users, I have a no route matches error. I understand why this is happening, Rails does not load routes of embers. Is there a solution to do it or is it just impossible with EmberCli-Rails for now?
Your Rails app needs a wildcard route so it knows to handle those requests through your Ember app controller. Can you try adding a route in routes.rb:
get '/:all', to: "ember#index"
substituting ember#index with whatever you have set up as the controller and action for your Ember app.
I'm creating an engine that needs to insert some routes into the application's router. For this particular gem, I'd rather not application's routes.rb if possible. Is there a way to insert routes at a particular location in the router via code? I'm looking for an API that does something like:
Rails.application.routes.insert("resources :foos", :before => "some string in routes.rb")
If I create a config/routes.rb inside the engine and define some routes, this kind of works. Rails is smart enough to mix the engine's routes into the application's routes, but it tacks them on at the end of the route list. I need them to appear at the beginning so the engine's routes take priority.
I'm aware that I can namespace the routes by mounting the engine in the application's routes.rb, but this creates a routing structure that I don't really want. I want the engine's routes to look they are a part of the application by defining some routes in the actual application.
I have a workaround which is to add the following to the application's routes.rb.
Rails.application.routes.draw do
MyEngine.setup_routes(self)
#...other routes below
end
MyEngine.setup_routes looks like
def self.setup_routes(map)
map.get 'a_path', :to => 'a_controller#a_path'
end
This at least allows me to control the point where the routes get defined in the application's route list, but the user still has to manually update his routes.rb (or I have to build an installer that does it). It seems like there should be a way to tell rails to tack some routes onto the start of the route list...
I just switched to rails not long ago and I'm loving it. Everything works well in my rails 3.1 application, but now at the end I want to somehow handle routes like www.myapp.com/something (off course, I dont have something controller). I get a routing error when I visit this page, but I was wandering if there was a way to do something about it, even if it's only redirecting these routes to my root_url. I tried to find the answer online with no luck.
Yes, you can put a globbing route at the very end of your routes.rb to catch all misses:
match '/*paths', :to => 'some_controller#some_action'
in your Controller / action you can access the globbed path with
params[:paths]
more information http://guides.rubyonrails.org/routing.html#route-globbing
of course you can redirect without using an extra controller by using the redirect inline rack endpoint
match '/*paths' => redirect('/')