Awesome Open Source
Awesome Open Source

PhoenixRoutesJs Build Status Open Source Helpers

Phoenix routes helpers in javascript code


If available in Hex, the package can be installed by adding phoenix_routes_js to your list of dependencies in mix.exs:

def deps do
  [{:phoenix_routes_js, "~> 0.1.1"}]


Two steps configuration:

  1. Add possibility to use view helper by adding use PhoenixRoutesJs.View in template **_web/views/layout_view.ex file:
defmodule Project.LayoutView do
  import PhoenixRoutesJs.View

  1. Add helper render_routes_script to you layout in **_web/templates/layout/app.html.eex before main javascript file:
  <%= render_routes_script(@conn) %>
  <script src="<%= static_path(@conn, "/js/app.js") %>"></script>



Now you can use phoenix routes helpers in browser console and javascript code.


   user_path   GET      /users            UserController :index    Routes.user_path('index')
   user_path   GET      /users/:id/edit   UserController :edit     Routes.user_path('edit', ':id')
   user_path   GET      /users/new        UserController :new      Routes.user_path('new')
   user_path   GET      /users/:id        UserController :show     Routes.user_path('show', ':id')
   user_path   POST     /users            UserController :create   Routes.user_path('create')
   user_path   PATCH    /users/:id        UserController :update   Routes.user_path('update', ':id')
               PUT      /users/:id        UserController :update
   user_path   DELETE   /users/:id        UserController :delete   Routes.user_path('delete', ':id')


Routes object is kept in window.


Now you can access to you helpers in console:

// browser console

Routes.user_path('edit', 1)

//=> /users/1/edit

JavaScript assets

// Somewhere in javascript modules

window.Routes.user_path('edit', 1)

//=> /users/1/edit

JavaScript options:

Routes options:

  • format - Add '.format' to request path string.
  • params - Add query string to request path.
Routes.user_path('index', {format: 'json', params: {filter: 'query', sort: 'acs'}})

//=> "/users.json?filter=query&sort=acs"


The library is available as open source under the terms of the MIT License.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,028
elixir (1,161
phoenix-framework (44
helpers (29
routes (17

Find Open Source By Browsing 7,000 Topics Across 59 Categories