diff --git a/Gemfile b/Gemfile
index 19ebae43..9ba7f175 100644
--- a/Gemfile
+++ b/Gemfile
@@ -54,8 +54,8 @@ group :development do
   # Makes spring watch files using the listen gem. (https://github.com/jonleighton/spring-watcher-listen)
   gem 'spring-watcher-listen', '~> 2.0.0'
 
-  # Brings Rails named routes to javascript (http://github.com/railsware/js-routes)
-  gem 'js-routes', require: false
+  # Brings Rails named routes to modern javascript (https://github.com/elmassimo/js_from_routes)
+  gem 'js_from_routes'
 end
 
 group :test do
diff --git a/Gemfile.lock b/Gemfile.lock
index a6b457ae..603dc190 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -108,8 +108,8 @@ GEM
       rails (>= 5)
     jbuilder (2.11.1)
       activesupport (>= 5.0.0)
-    js-routes (1.4.14)
-      railties (>= 4)
+    js_from_routes (1.0.1)
+      railties
     listen (3.4.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -267,7 +267,7 @@ DEPENDENCIES
   image_processing (~> 1.10)
   inertia_rails (>= 1.2.2)
   jbuilder (~> 2.7)
-  js-routes
+  js_from_routes
   listen (~> 3.3)
   oj
   pagy
diff --git a/app/javascript/Layouts/Main.vue b/app/javascript/Layouts/Main.vue
index d7f718b7..efe8ae35 100644
--- a/app/javascript/Layouts/Main.vue
+++ b/app/javascript/Layouts/Main.vue
@@ -8,7 +8,7 @@
           <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link
               class="mt-1"
-              :href="$routes.root()"
+              :href="routes.dashboard"
               aria-label="Home"
               role="navigation"
             >
@@ -62,20 +62,20 @@
                 <inertia-link
                   class="block px-6 py-2 hover:bg-indigo-600 hover:text-white"
                   role="navigation"
-                  :href="$routes.edit_user($page.props.auth.user.id)"
+                  :href="routes.profile"
                 >
                   My Profile
                 </inertia-link>
                 <inertia-link
                   class="block px-6 py-2 hover:bg-indigo-600 hover:text-white"
                   role="navigation"
-                  :href="$routes.users()"
+                  :href="routes.users"
                 >
                   Manage Users
                 </inertia-link>
                 <inertia-link
                   class="block w-full text-left px-6 py-2 hover:bg-indigo-600 hover:text-white"
-                  :href="$routes.destroy_user_session()"
+                  :href="routes.signOut"
                   method="delete"
                   as="button"
                 >
@@ -108,6 +108,10 @@ import Icon from '@/Shared/Icon.vue'
 import Logo from '@/Shared/Logo.vue'
 import MainMenu from '@/Shared/MainMenu.vue'
 
+import DashboardRequests from '@/requests/DashboardRequests'
+import UsersRequests from '@/requests/UsersRequests'
+import SessionsRequests from '@/requests/Users/SessionsRequests'
+
 export default {
   components: {
     MinimalLayout,
@@ -117,5 +121,15 @@ export default {
     Logo,
     MainMenu,
   },
+  computed: {
+    routes () {
+      return {
+        dashboard: DashboardRequests.pathFor('list'),
+        profile: UsersRequests.pathFor('edit', this.$page.props.auth.user),
+        users: UsersRequests.pathFor('list'),
+        signOut: SessionsRequests.pathFor('destroy'),
+      }
+    },
+  },
 }
 </script>
diff --git a/app/javascript/Pages/Auth/Login.vue b/app/javascript/Pages/Auth/Login.vue
index 4529a4c0..9d10c488 100644
--- a/app/javascript/Pages/Auth/Login.vue
+++ b/app/javascript/Pages/Auth/Login.vue
@@ -7,7 +7,7 @@
       />
       <form
         class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden"
-        @submit.prevent="form.post($routes.user_session())"
+        @submit.prevent="login(form)"
       >
         <div class="px-10 py-12">
           <flash-messages />
@@ -68,6 +68,7 @@ import FlashMessages from '@/Shared/FlashMessages.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import Logo from '@/Shared/Logo.vue'
 import TextInput from '@/Shared/TextInput.vue'
+import SessionsRequests from '@/requests/Users/SessionsRequests'
 
 export default {
   metaInfo: { title: 'Login' },
@@ -89,5 +90,10 @@ export default {
       }),
     }
   },
+  methods: {
+    login (form) {
+      SessionsRequests.create({ form })
+    },
+  },
 }
 </script>
diff --git a/app/javascript/Pages/Contacts/Edit.vue b/app/javascript/Pages/Contacts/Edit.vue
index 472f55d7..66366c58 100644
--- a/app/javascript/Pages/Contacts/Edit.vue
+++ b/app/javascript/Pages/Contacts/Edit.vue
@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-500 hover:text-indigo-800"
-        :href="$routes.contacts()"
+        :href="ContactsRequests.pathFor('list')"
       >
         Contacts
       </inertia-link>
@@ -21,7 +21,7 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="form.put($routes.contact(contact.id))"
+        @submit="ContactsRequests.update({ params: contact, form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button
@@ -53,12 +53,17 @@ import ContactForm from './Form.vue'
 import TrashedMessage from '@/Shared/TrashedMessage.vue'
 import _ from 'lodash'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo() {
     return {
       title: `${this.form.contact.first_name} ${this.form.contact.last_name}`,
     }
   },
+  constants: {
+    ContactsRequests,
+  },
   components: {
     LoadingButton,
     ContactForm,
@@ -86,12 +91,12 @@ export default {
   methods: {
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {
-        this.$inertia.delete(this.$routes.contact(this.contact.id))
+        ContactsRequests.destroy(this.contact)
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this contact?')) {
-        this.$inertia.put(this.$routes.restore_contact(this.contact.id))
+        ContactsRequests.restore(this.contact)
       }
     },
   },
diff --git a/app/javascript/Pages/Contacts/Index.vue b/app/javascript/Pages/Contacts/Index.vue
index 2edcea85..375c68a3 100644
--- a/app/javascript/Pages/Contacts/Index.vue
+++ b/app/javascript/Pages/Contacts/Index.vue
@@ -29,7 +29,7 @@
       </search-filter>
       <inertia-link
         class="btn-indigo"
-        :href="$routes.new_contact()"
+        :href="ContactsRequests.pathFor('new')"
       >
         <span>Create</span>
         <span class="hidden md:inline">Contact</span>
@@ -65,7 +65,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center focus:text-indigo-500"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 aria-label="Edit"
               >
                 {{ contact.name }}
@@ -79,7 +79,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -91,7 +91,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -101,7 +101,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -111,7 +111,7 @@
             <td class="border-t w-px">
               <inertia-link
                 class="px-4 flex items-center"
-                :href="$routes.edit_contact(contact.id)"
+                :href="pathToEdit(contact)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -146,8 +146,11 @@ import pickBy from 'lodash/pickBy'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import throttle from 'lodash/throttle'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo: { title: 'Contacts' },
+  constants: { ContactsRequests },
   components: {
     Icon,
     Pagination,
@@ -175,24 +178,22 @@ export default {
   watch: {
     form: {
       handler: throttle(function() {
-        let query = pickBy(this.form)
-        this.$inertia.get(
-          this.$routes.contacts(
-            Object.keys(query).length ? query : { remember: 'forget' },
-          ),
-          {},
-          {
-            preserveState: true,
-            preserveScroll: true,
-            replace: true,
-            only: ['contacts'],
-          },
-        )
+        const query = pickBy(this.form)
+        ContactsRequests.list({
+          query: Object.keys(query).length ? query : { remember: 'forget' },
+          preserveState: true,
+          preserveScroll: true,
+          replace: true,
+          only: ['contacts'],
+        })
       }, 150),
       deep: true,
     },
   },
   methods: {
+    pathToEdit (contact) {
+      return ContactsRequests.pathFor('edit', contact)
+    },
     reset() {
       this.form = mapValues(this.form, () => null)
     },
diff --git a/app/javascript/Pages/Contacts/New.vue b/app/javascript/Pages/Contacts/New.vue
index 26fcc1ef..b020174b 100644
--- a/app/javascript/Pages/Contacts/New.vue
+++ b/app/javascript/Pages/Contacts/New.vue
@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-400 hover:text-indigo-600"
-        :href="$routes.contacts()"
+        :href="ContactsRequests.pathFor('list')"
       >
         Contacts
       </inertia-link>
@@ -13,7 +13,7 @@
       <contact-form
         v-model="form"
         :organizations="organizations"
-        @submit="form.post($routes.contacts())"
+        @submit="ContactsRequests.create({ form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
           <loading-button
@@ -34,8 +34,13 @@ import Layout from '@/Layouts/Main.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import ContactForm from './Form.vue'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+
 export default {
   metaInfo: { title: 'Create Contact' },
+  constants: {
+    ContactsRequests,
+  },
   components: {
     LoadingButton,
     ContactForm,
diff --git a/app/javascript/Pages/Dashboard/Index.vue b/app/javascript/Pages/Dashboard/Index.vue
index e0a74a3f..48791edb 100644
--- a/app/javascript/Pages/Dashboard/Index.vue
+++ b/app/javascript/Pages/Dashboard/Index.vue
@@ -5,18 +5,17 @@
     </h1>
     <p class="mb-8 leading-normal">
       Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how
-      <a
-        class="text-indigo-800 underline hover:text-orange-600 font-bold"
-        href="https://inertiajs.com"
-      >
-        Inertia.js
-      </a> works with
-      <a
-        href="https://rubyonrails.org/"
-        class="text-indigo-800 underline hover:text-orange-600 font-bold"
-      >
-        Ruby on Rails
-      </a>.
+      <ExternalLink href="https://inertiajs.com">Inertia.js</ExternalLink>
+      works with
+      <ExternalLink href="https://rubyonrails.org/">Ruby on Rails</ExternalLink>.
+    </p>
+    <p class="mb-8 leading-normal">
+      This demo is running on
+      <ExternalLink href="https://vite-rails.netlify.app/">Vite ⚡️ Rails</ExternalLink>
+      instead of Webpacker, which provides a
+      <ExternalLink href="https://vite-rails.netlify.app/features">faster development experience</ExternalLink>
+      thanks to
+      <ExternalLink href="https://vite-rails.netlify.app/features">Vite</ExternalLink>.
     </p>
 
     <p
@@ -37,7 +36,7 @@
     <div class="mb-8 flex">
       <inertia-link
         class="btn-indigo"
-        :href="$routes.error_500()"
+        :href="error500Path"
       >
         500 error
       </inertia-link>
@@ -57,11 +56,16 @@
 
 <script>
 import Layout from '@/Layouts/Main.vue'
+import ExternalLink from '@/Shared/ExternalLink.vue'
 import * as timeago from 'timeago.js'
+import DashboardRequests from '@/requests/DashboardRequests'
 
 export default {
   metaInfo: { title: 'Dashboard' },
   layout: Layout,
+  components: {
+    ExternalLink,
+  },
   props: {
     git: {
       type: Object,
@@ -69,6 +73,9 @@ export default {
     },
   },
   computed: {
+    error500Path () {
+      return DashboardRequests.pathFor('exampleException')
+    },
     relativeCommitTime() {
       return timeago.format(this.git.commit_time)
     },
diff --git a/app/javascript/Pages/Organizations/Edit.vue b/app/javascript/Pages/Organizations/Edit.vue
index 7b3f2143..1a94efe4 100644
--- a/app/javascript/Pages/Organizations/Edit.vue
+++ b/app/javascript/Pages/Organizations/Edit.vue
@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-500 hover:text-indigo-800"
-        :href="$routes.organizations()"
+        :href="OrganizationsRequests.pathFor('list')"
       >
         Organizations
       </inertia-link>
@@ -20,7 +20,7 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <organization-form
         v-model="form"
-        @submit="form.put($routes.organization(organization.id))"
+        @submit="OrganizationsRequests.update({ params: organization, form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
           <button
@@ -69,7 +69,7 @@
           <td class="border-t">
             <inertia-link
               class="px-6 py-4 flex items-center focus:text-indigo-500"
-              :href="$routes.edit_contact(contact.id)"
+              :href="pathToEditContact(contact)"
             >
               {{ contact.name }}
               <icon
@@ -82,7 +82,7 @@
           <td class="border-t">
             <inertia-link
               class="px-6 py-4 flex items-center"
-              :href="$routes.edit_contact(contact.id)"
+              :href="pathToEditContact(contact)"
               tabindex="-1"
             >
               {{ contact.city }}
@@ -91,7 +91,7 @@
           <td class="border-t">
             <inertia-link
               class="px-6 py-4 flex items-center"
-              :href="$routes.edit_contact(contact.id)"
+              :href="pathToEditContact(contact)"
               tabindex="-1"
             >
               {{ contact.phone }}
@@ -100,7 +100,7 @@
           <td class="border-t w-px">
             <inertia-link
               class="px-4 flex items-center"
-              :href="$routes.edit_contact(contact.id)"
+              :href="pathToEditContact(contact)"
               tabindex="-1"
             >
               <icon
@@ -131,10 +131,16 @@ import OrganizationForm from './Form.vue'
 import TrashedMessage from '@/Shared/TrashedMessage.vue'
 import _ from 'lodash'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+import OrganizationsRequests from '@/requests/OrganizationsRequests'
+
 export default {
   metaInfo() {
     return { title: this.form.organization.name }
   },
+  constants: {
+    OrganizationsRequests,
+  },
   components: {
     Icon,
     LoadingButton,
@@ -161,16 +167,17 @@ export default {
     }
   },
   methods: {
+    pathToEditContact (contact) {
+      return ContactsRequests.pathFor('edit', contact)
+    },
     destroy() {
       if (confirm('Are you sure you want to delete this organization?')) {
-        this.$inertia.delete(this.$routes.organization(this.organization.id))
+        OrganizationsRequests.destroy(this.organization)
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this organization?')) {
-        this.$inertia.put(
-          this.$routes.restore_organization(this.organization.id),
-        )
+        OrganizationsRequests.restore(this.organization)
       }
     },
   },
diff --git a/app/javascript/Pages/Organizations/Index.vue b/app/javascript/Pages/Organizations/Index.vue
index ab808cde..abbb1695 100644
--- a/app/javascript/Pages/Organizations/Index.vue
+++ b/app/javascript/Pages/Organizations/Index.vue
@@ -70,7 +70,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center focus:text-indigo-500"
-                :href="$routes.edit_organization(organization.id)"
+                :href="pathToEdit(organization)"
               >
                 {{ organization.name }}
                 <icon
@@ -83,7 +83,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_organization(organization.id)"
+                :href="pathToEdit(organization)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -93,7 +93,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_organization(organization.id)"
+                :href="pathToEdit(organization)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -103,7 +103,7 @@
             <td class="border-t w-px">
               <inertia-link
                 class="px-4 flex items-center"
-                :href="$routes.edit_organization(organization.id)"
+                :href="pathToEdit(organization)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -139,6 +139,7 @@ import SearchFilter from '@/Shared/SearchFilter.vue'
 import Modal from '@/Shared/Modal.vue'
 import NewOrganization from '@/Pages/Organizations/_New.vue'
 import throttle from 'lodash/throttle'
+import OrganizationsRequests from '@/requests/OrganizationsRequests'
 
 export default {
   metaInfo: { title: 'Organizations' },
@@ -172,24 +173,22 @@ export default {
   watch: {
     form: {
       handler: throttle(function() {
-        let query = pickBy(this.form)
-        this.$inertia.get(
-          this.$routes.organizations(
-            Object.keys(query).length ? query : { remember: 'forget' },
-          ),
-          {},
-          {
-            preserveState: true,
-            preserveScroll: true,
-            replace: true,
-            only: ['organizations'],
-          },
-        )
+        const query = pickBy(this.form)
+        OrganizationsRequests.list({
+          query: Object.keys(query).length ? query : { remember: 'forget' },
+          preserveState: true,
+          preserveScroll: true,
+          replace: true,
+          only: ['organizations'],
+        })
       }, 150),
       deep: true,
     },
   },
   methods: {
+    pathToEdit (organization) {
+      return OrganizationsRequests.pathFor('edit', organization)
+    },
     reset() {
       this.form = mapValues(this.form, () => null)
     },
diff --git a/app/javascript/Pages/Organizations/_New.vue b/app/javascript/Pages/Organizations/_New.vue
index 79af9429..2461033f 100644
--- a/app/javascript/Pages/Organizations/_New.vue
+++ b/app/javascript/Pages/Organizations/_New.vue
@@ -2,7 +2,7 @@
   <organization-form
     v-model="form"
     class="bg-white max-w-3xl"
-    @submit="submit"
+    @submit="submit(form)"
   >
     <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
       <loading-button
@@ -19,6 +19,7 @@
 <script>
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import OrganizationForm from './Form.vue'
+import OrganizationsRequests from '@/requests/OrganizationsRequests'
 
 export default {
   components: {
@@ -34,11 +35,11 @@ export default {
     }
   },
   methods: {
-    submit() {
-      this.form.post(this.$routes.organizations(), {
+    submit(form) {
+      OrganizationsRequests.create({ form,
         onSuccess: () => {
           this.$emit('success')
-          this.form.reset('organization')
+          form.reset('organization')
         },
       })
     },
diff --git a/app/javascript/Pages/Users/Edit.vue b/app/javascript/Pages/Users/Edit.vue
index 38f60f82..5765eafb 100644
--- a/app/javascript/Pages/Users/Edit.vue
+++ b/app/javascript/Pages/Users/Edit.vue
@@ -4,7 +4,7 @@
       <h1 class="font-bold text-3xl">
         <inertia-link
           class="text-indigo-500 hover:text-indigo-600"
-          :href="$routes.users()"
+          :href="UsersRequests.pathFor('list')"
         >
           Users
         </inertia-link>
@@ -28,7 +28,7 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <user-form
         v-model="form"
-        @submit="submit"
+        @submit="submit(form)"
       >
         <div
           v-if="can.edit_user"
@@ -61,6 +61,7 @@ import Layout from '@/Layouts/Main.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import UserForm from './Form.vue'
 import TrashedMessage from '@/Shared/TrashedMessage.vue'
+import UsersRequests from '@/requests/UsersRequests'
 
 export default {
   metaInfo() {
@@ -68,6 +69,9 @@ export default {
       title: `${this.form.user.first_name} ${this.form.user.last_name}`,
     }
   },
+  constants: {
+    UsersRequests,
+  },
   components: {
     LoadingButton,
     UserForm,
@@ -96,19 +100,19 @@ export default {
     }
   },
   methods: {
-    submit() {
-      this.form.put(this.$routes.user(this.user.id), {
-        onSuccess: () => this.form.reset('password', 'photo'),
+    submit(form) {
+      UsersRequests.update({ params: this.user, form,
+        onSuccess: () => form.reset('password', 'photo'),
       })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {
-        this.$inertia.delete(this.$routes.user(this.user.id))
+        UsersRequests.destroy(this.user)
       }
     },
     restore() {
       if (confirm('Are you sure you want to restore this user?')) {
-        this.$inertia.put(this.$routes.restore_user(this.user.id))
+        UsersRequests.restore(this.user)
       }
     },
   },
diff --git a/app/javascript/Pages/Users/Index.vue b/app/javascript/Pages/Users/Index.vue
index e7f50ddb..32493c86 100644
--- a/app/javascript/Pages/Users/Index.vue
+++ b/app/javascript/Pages/Users/Index.vue
@@ -47,7 +47,7 @@
       <inertia-link
         v-if="can.create_user"
         class="btn-indigo"
-        :href="$routes.new_user()"
+        :href="UsersRequests.pathFor('new')"
       >
         <span>Create</span>
         <span class="hidden md:inline">User</span>
@@ -80,7 +80,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center focus:text-indigo-500"
-                :href="$routes.edit_user(user.id)"
+                :href="pathToEdit(user)"
                 aria-label="Edit"
               >
                 <img
@@ -100,7 +100,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_user(user.id)"
+                :href="pathToEdit(user)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -110,7 +110,7 @@
             <td class="border-t">
               <inertia-link
                 class="px-6 py-4 flex items-center"
-                :href="$routes.edit_user(user.id)"
+                :href="pathToEdit(user)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -120,7 +120,7 @@
             <td class="border-t w-px">
               <inertia-link
                 class="px-4 flex items-center"
-                :href="$routes.edit_user(user.id)"
+                :href="pathToEdit(user)"
                 tabindex="-1"
                 aria-label="Edit"
               >
@@ -152,9 +152,13 @@ import mapValues from 'lodash/mapValues'
 import pickBy from 'lodash/pickBy'
 import SearchFilter from '@/Shared/SearchFilter.vue'
 import throttle from 'lodash/throttle'
+import UsersRequests from '@/requests/UsersRequests'
 
 export default {
   metaInfo: { title: 'Users' },
+  constants: {
+    UsersRequests,
+  },
   components: {
     Icon,
     SearchFilter,
@@ -186,24 +190,22 @@ export default {
   watch: {
     form: {
       handler: throttle(function() {
-        let query = pickBy(this.form)
-        this.$inertia.get(
-          this.$routes.users(
-            Object.keys(query).length ? query : { remember: 'forget' },
-          ),
-          {},
-          {
-            preserveState: true,
-            preserveScroll: true,
-            replace: true,
-            only: ['users'],
-          },
-        )
+        const query = pickBy(this.form)
+        UsersRequests.list({
+          query: Object.keys(query).length ? query : { remember: 'forget' },
+          preserveState: true,
+          preserveScroll: true,
+          replace: true,
+          only: ['users'],
+        })
       }, 150),
       deep: true,
     },
   },
   methods: {
+    pathToEdit (user) {
+      return UsersRequests.pathFor('edit', user)
+    },
     reset() {
       this.form = mapValues(this.form, () => null)
     },
diff --git a/app/javascript/Pages/Users/New.vue b/app/javascript/Pages/Users/New.vue
index b0fe217e..e00a34ed 100644
--- a/app/javascript/Pages/Users/New.vue
+++ b/app/javascript/Pages/Users/New.vue
@@ -3,7 +3,7 @@
     <h1 class="mb-8 font-bold text-3xl">
       <inertia-link
         class="text-indigo-400 hover:text-indigo-600"
-        :href="$routes.users()"
+        :href="UsersRequests.pathFor('list')"
       >
         Users
       </inertia-link>
@@ -12,7 +12,7 @@
     <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
       <user-form
         v-model="form"
-        @submit="form.post($routes.users())"
+        @submit="UsersRequests.create({ form })"
       >
         <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
           <loading-button
@@ -32,9 +32,13 @@
 import Layout from '@/Layouts/Main.vue'
 import LoadingButton from '@/Shared/LoadingButton.vue'
 import UserForm from './Form.vue'
+import UsersRequests from '@/requests/UsersRequests'
 
 export default {
   metaInfo: { title: 'Create User' },
+  constants: {
+    UsersRequests,
+  },
   components: {
     LoadingButton,
     UserForm,
diff --git a/app/javascript/Shared/ExternalLink.vue b/app/javascript/Shared/ExternalLink.vue
new file mode 100644
index 00000000..86b5efdb
--- /dev/null
+++ b/app/javascript/Shared/ExternalLink.vue
@@ -0,0 +1,3 @@
+<template>
+  <a class="text-indigo-800 underline hover:text-orange-600 font-bold"><slot/></a>
+</template>
diff --git a/app/javascript/Shared/FileInput.vue b/app/javascript/Shared/FileInput.vue
index f84c28c3..0f00d984 100644
--- a/app/javascript/Shared/FileInput.vue
+++ b/app/javascript/Shared/FileInput.vue
@@ -78,7 +78,7 @@ export default {
   },
   methods: {
     filesize(size) {
-      let i = Math.floor(Math.log(size) / Math.log(1024))
+      const i = Math.floor(Math.log(size) / Math.log(1024))
       return (
         (size / Math.pow(1024, i)).toFixed(2) * 1 +
         ' ' +
diff --git a/app/javascript/Shared/Link.vue b/app/javascript/Shared/Link.vue
new file mode 100644
index 00000000..3e3a593b
--- /dev/null
+++ b/app/javascript/Shared/Link.vue
@@ -0,0 +1,20 @@
+<template>
+  <button
+    :disabled="loading"
+    class="flex items-center"
+  >
+    <div
+      v-if="loading"
+      class="btn-spinner mr-2"
+    />
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+  },
+}
+</script>
diff --git a/app/javascript/Shared/MainMenu.vue b/app/javascript/Shared/MainMenu.vue
index 25b42b03..b379887a 100644
--- a/app/javascript/Shared/MainMenu.vue
+++ b/app/javascript/Shared/MainMenu.vue
@@ -3,7 +3,7 @@
     <div class="mb-4">
       <inertia-link
         class="flex items-center group py-3"
-        :href="$routes.root()"
+        :href="routes.root"
         role="navigation"
         aria-label="Dashboard"
       >
@@ -20,7 +20,7 @@
     <div class="mb-4">
       <inertia-link
         class="flex items-center group py-3"
-        :href="$routes.organizations()"
+        :href="routes.organizations"
         role="navigation"
         aria-label="Organizations"
       >
@@ -37,7 +37,7 @@
     <div class="mb-4">
       <inertia-link
         class="flex items-center group py-3"
-        :href="$routes.contacts()"
+        :href="routes.contacts"
         role="navigation"
         aria-label="Contacts"
       >
@@ -54,7 +54,7 @@
     <div class="mb-4">
       <inertia-link
         class="flex items-center group py-3"
-        :href="$routes.reports()"
+        :href="routes.reports"
         role="navigation"
         aria-label="Reports"
       >
@@ -74,17 +74,30 @@
 <script>
 import Icon from '@/Shared/Icon.vue'
 
+import ContactsRequests from '@/requests/ContactsRequests'
+import DashboardRequests from '@/requests/DashboardRequests'
+import OrganizationsRequests from '@/requests/OrganizationsRequests'
+import ReportsRequests from '@/requests/ReportsRequests'
+
 export default {
   components: {
     Icon,
   },
+  computed: {
+    routes () {
+      return {
+        root: DashboardRequests.pathFor('list'),
+        organizations: OrganizationsRequests.pathFor('list'),
+        contacts: ContactsRequests.pathFor('list'),
+        reports: ReportsRequests.pathFor('list'),
+      }
+    },
+  },
   methods: {
     isUrl(...urls) {
-      let currentUrl = this.$page.url.substr(1)
+      const currentUrl = this.$page.url.substr(1)
 
-      if (urls[0] === '') {
-        return currentUrl === ''
-      }
+      if (urls[0] === '') return currentUrl === ''
 
       return urls.filter(url => currentUrl.startsWith(url)).length
     },
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 8f8a45c5..473925ed 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -16,14 +16,14 @@ Vue.use(PortalVue)
 import MatomoTracker from '@/utils/matomo-tracker'
 Vue.use(MatomoTracker)
 
+import ConstantsMixin from '@/utils/ConstantsMixin'
+Vue.mixin(ConstantsMixin)
+
 import { app, plugin } from '@inertiajs/inertia-vue'
 import { InertiaProgress as progress } from '@inertiajs/progress'
 Vue.use(plugin)
 progress.init()
 
-import Routes from '@/utils/routes.js'
-Vue.prototype.$routes = Routes
-
 const el = document.getElementById('app')
 
 const pages = import.meta.glob('../Pages/**/*.vue')
diff --git a/app/javascript/requests/ContactsRequests.js b/app/javascript/requests/ContactsRequests.js
new file mode 100644
index 00000000..e504522d
--- /dev/null
+++ b/app/javascript/requests/ContactsRequests.js
@@ -0,0 +1,30 @@
+// JsFromRoutes CacheKey 1f9213ad2b3718e6adac5e0a4ca2e5ad
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  destroy: options =>
+    request('delete', '/contacts/:id', options),
+
+  update: options =>
+    request('patch', '/contacts/:id', options),
+
+  restore: options =>
+    request('put', '/contacts/:id/restore', options),
+
+  list: options =>
+    request('get', '/contacts', options),
+
+  create: options =>
+    request('post', '/contacts', options),
+
+  new: options =>
+    request('get', '/contacts/new', options),
+
+  edit: options =>
+    request('get', '/contacts/:id/edit', options),
+}
diff --git a/app/javascript/requests/DashboardRequests.js b/app/javascript/requests/DashboardRequests.js
new file mode 100644
index 00000000..414d6210
--- /dev/null
+++ b/app/javascript/requests/DashboardRequests.js
@@ -0,0 +1,15 @@
+// JsFromRoutes CacheKey 45f938265bc3955f933a9ee50f9cdf11
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  exampleException: options =>
+    request('get', '/error-500', options),
+
+  list: options =>
+    request('get', '/', options),
+}
diff --git a/app/javascript/requests/OrganizationsRequests.js b/app/javascript/requests/OrganizationsRequests.js
new file mode 100644
index 00000000..e9926ffa
--- /dev/null
+++ b/app/javascript/requests/OrganizationsRequests.js
@@ -0,0 +1,27 @@
+// JsFromRoutes CacheKey c7c604d846c07f06e0b78f6f6301b7f4
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  restore: options =>
+    request('put', '/organizations/:id/restore', options),
+
+  list: options =>
+    request('get', '/organizations', options),
+
+  create: options =>
+    request('post', '/organizations', options),
+
+  edit: options =>
+    request('get', '/organizations/:id/edit', options),
+
+  update: options =>
+    request('patch', '/organizations/:id', options),
+
+  destroy: options =>
+    request('delete', '/organizations/:id', options),
+}
diff --git a/app/javascript/requests/ReportsRequests.js b/app/javascript/requests/ReportsRequests.js
new file mode 100644
index 00000000..4cd39a5e
--- /dev/null
+++ b/app/javascript/requests/ReportsRequests.js
@@ -0,0 +1,12 @@
+// JsFromRoutes CacheKey a11c3bdb0c463fa4aa987c0c2dca5d0d
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  list: options =>
+    request('get', '/reports', options),
+}
diff --git a/app/javascript/requests/Users/SessionsRequests.js b/app/javascript/requests/Users/SessionsRequests.js
new file mode 100644
index 00000000..45b72fbd
--- /dev/null
+++ b/app/javascript/requests/Users/SessionsRequests.js
@@ -0,0 +1,18 @@
+// JsFromRoutes CacheKey ae25c6737092d7b9028721c1ad375c8b
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  new: options =>
+    request('get', '/login', options),
+
+  create: options =>
+    request('post', '/login', options),
+
+  destroy: options =>
+    request('delete', '/logout', options),
+}
diff --git a/app/javascript/requests/UsersRequests.js b/app/javascript/requests/UsersRequests.js
new file mode 100644
index 00000000..5dc07e86
--- /dev/null
+++ b/app/javascript/requests/UsersRequests.js
@@ -0,0 +1,30 @@
+// JsFromRoutes CacheKey 41703f8eb19c8096ec9ac2fa9d2047ff
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+import { request } from '@/services/ApiService'
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+  restore: options =>
+    request('put', '/users/:id/restore', options),
+
+  list: options =>
+    request('get', '/users', options),
+
+  create: options =>
+    request('post', '/users', options),
+
+  new: options =>
+    request('get', '/users/new', options),
+
+  edit: options =>
+    request('get', '/users/:id/edit', options),
+
+  update: options =>
+    request('patch', '/users/:id', options),
+
+  destroy: options =>
+    request('delete', '/users/:id', options),
+}
diff --git a/app/javascript/services/ApiService.js b/app/javascript/services/ApiService.js
new file mode 100644
index 00000000..065e7e4c
--- /dev/null
+++ b/app/javascript/services/ApiService.js
@@ -0,0 +1,25 @@
+import { Inertia } from '@inertiajs/inertia'
+import { formatUrl } from '@/utils/UrlHelper'
+
+// Public: Makes an AJAX request to the Rails server.
+//
+// method - One of 'get', 'post', 'path', 'put', 'delete'.
+// url - The url of the request.
+// options - Can be the "params" as a shorthand, or an Object with the following:
+//   params: The query string parameters to interpolate in the URL.
+//   data: The body of the request, should be a plain Object.
+//   form: An InertiaJS form to be submitted.
+//   path: Whether to return a raw path instead of making a request.
+//
+// Returns a Promise for the request.
+export function request (method, url, attrs) {
+  const { params = (attrs.data || attrs), data = {}, form, path, ...options } = attrs
+
+  url = formatUrl(url, params)
+
+  if (path) return url
+  if (form) return form[method](url, options)
+
+  const args = method === 'delete' ? [{ ...options, data  }] : [data, options]
+  return Inertia[method](url, ...args)
+}
diff --git a/app/javascript/utils/ConstantsMixin.js b/app/javascript/utils/ConstantsMixin.js
new file mode 100644
index 00000000..10c7a707
--- /dev/null
+++ b/app/javascript/utils/ConstantsMixin.js
@@ -0,0 +1,6 @@
+export default {
+  // Internal: Allows to define constants in a separate section of the component.
+  beforeCreate () {
+    Object.assign(this, this.$options.constants)
+  },
+}
diff --git a/app/javascript/utils/PathHelper.js b/app/javascript/utils/PathHelper.js
new file mode 100644
index 00000000..ff1726fc
--- /dev/null
+++ b/app/javascript/utils/PathHelper.js
@@ -0,0 +1,7 @@
+// Public: Convenience function added to all generated requests objects.
+export function pathFor (name, options) {
+  if (!this) throw new Error(`Called pathFor helper on a detached function. Make sure to use YourRequests.pathFor('${name}') instead.`)
+  const requestFn = this[name]
+  if (!requestFn) throw new Error(`Unknown path helper ${name} for ${JSON.stringify(this)}`)
+  return requestFn({ ...options, path: true })
+}
diff --git a/app/javascript/utils/UrlHelper.js b/app/javascript/utils/UrlHelper.js
new file mode 100644
index 00000000..d0033159
--- /dev/null
+++ b/app/javascript/utils/UrlHelper.js
@@ -0,0 +1,30 @@
+import { hrefToUrl, mergeDataIntoQueryString } from '@inertiajs/inertia'
+import { snakeCase } from 'lodash'
+
+const INTERPOLATION_PLACEHOLDER = /:[^\W\d]+/g
+
+// Public: Replaces any placeholder in the string with the provided parameters.
+function interpolate (template, params) {
+  let value = template.toString()
+  for (const paramName in params) {
+    value = value.replace(`:${snakeCase(paramName)}`, params[paramName])
+  }
+  const missingParams = value.match(INTERPOLATION_PLACEHOLDER)
+  if (missingParams) {
+    const missing = missingParams.join(', ')
+    const provided = params && Object.keys(params).join(', ')
+    throw new TypeError(`Missing ${missing} for ${template}. Params provided: ${provided}`)
+  }
+  return value
+}
+
+// Public: Formats a url, replacing segments like /:id/ with the parameter of
+// that name.
+//
+// Example:
+//   formatUrl('/users/:id', { id: '5' }) returns '/users/5'
+//   formatUrl('/users', { query: { id: '5' } }) returns '/users?id=5'
+export function formatUrl (urlTemplate, { query, ...params } = {}) {
+  const url = interpolate(urlTemplate, params)
+  return query ? mergeDataIntoQueryString('get', hrefToUrl(url), query)[0] : url
+}
diff --git a/app/javascript/utils/routes.js b/app/javascript/utils/routes.js
index ec7aa9e1..e69de29b 100644
--- a/app/javascript/utils/routes.js
+++ b/app/javascript/utils/routes.js
@@ -1,578 +0,0 @@
-/*
-File generated by js-routes 1.4.11
-Based on Rails 6.0.3.4 routes of Pingcrm::Application
- */
-
-export default (function() {
-  var DeprecatedGlobbingBehavior, NodeTypes, ParameterMissing, ReservedOptions, SpecialOptionsKey, UriEncoderSegmentRegex, Utils, result, root,
-    hasProp = {}.hasOwnProperty,
-    slice = [].slice;
-
-  root = typeof exports !== "undefined" && exports !== null ? exports : this;
-
-  ParameterMissing = function(message, fileName, lineNumber) {
-    var instance;
-    instance = new Error(message, fileName, lineNumber);
-    if (Object.setPrototypeOf) {
-      Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
-    } else {
-      instance.__proto__ = this.__proto__;
-    }
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(instance, ParameterMissing);
-    }
-    return instance;
-  };
-
-  ParameterMissing.prototype = Object.create(Error.prototype, {
-    constructor: {
-      value: Error,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-
-  if (Object.setPrototypeOf) {
-    Object.setPrototypeOf(ParameterMissing, Error);
-  } else {
-    ParameterMissing.__proto__ = Error;
-  }
-
-  NodeTypes = {"GROUP":1,"CAT":2,"SYMBOL":3,"OR":4,"STAR":5,"LITERAL":6,"SLASH":7,"DOT":8};
-
-  DeprecatedGlobbingBehavior = false;
-
-  SpecialOptionsKey = "_options";
-
-  UriEncoderSegmentRegex = /[^a-zA-Z0-9\-\._~!\$&'\(\)\*\+,;=:@]/g;
-
-  ReservedOptions = ['anchor', 'trailing_slash', 'subdomain', 'host', 'port', 'protocol'];
-
-  Utils = {
-    configuration: {
-      prefix: "",
-      default_url_options: {},
-      special_options_key: "_options",
-      serializer: null
-    },
-    default_serializer: function(object, prefix) {
-      var element, i, j, key, len, prop, s;
-      if (prefix == null) {
-        prefix = null;
-      }
-      if (object == null) {
-        return "";
-      }
-      if (!prefix && !(this.get_object_type(object) === "object")) {
-        throw new Error("Url parameters should be a javascript hash");
-      }
-      s = [];
-      switch (this.get_object_type(object)) {
-        case "array":
-          for (i = j = 0, len = object.length; j < len; i = ++j) {
-            element = object[i];
-            s.push(this.default_serializer(element, prefix + "[]"));
-          }
-          break;
-        case "object":
-          for (key in object) {
-            if (!hasProp.call(object, key)) continue;
-            prop = object[key];
-            if ((prop == null) && (prefix != null)) {
-              prop = "";
-            }
-            if (prop != null) {
-              if (prefix != null) {
-                key = prefix + "[" + key + "]";
-              }
-              s.push(this.default_serializer(prop, key));
-            }
-          }
-          break;
-        default:
-          if (object != null) {
-            s.push((encodeURIComponent(prefix.toString())) + "=" + (encodeURIComponent(object.toString())));
-          }
-      }
-      if (!s.length) {
-        return "";
-      }
-      return s.join("&");
-    },
-    serialize: function(object) {
-      var custom_serializer;
-      custom_serializer = this.configuration.serializer;
-      if ((custom_serializer != null) && this.get_object_type(custom_serializer) === "function") {
-        return custom_serializer(object);
-      } else {
-        return this.default_serializer(object);
-      }
-    },
-    clean_path: function(path) {
-      var last_index;
-      path = path.split("://");
-      last_index = path.length - 1;
-      path[last_index] = path[last_index].replace(/\/+/g, "/");
-      return path.join("://");
-    },
-    extract_options: function(number_of_params, args) {
-      var last_el, options;
-      last_el = args[args.length - 1];
-      if ((args.length > number_of_params && last_el === void 0) || ((last_el != null) && "object" === this.get_object_type(last_el) && !this.looks_like_serialized_model(last_el))) {
-        options = args.pop() || {};
-        delete options[this.configuration.special_options_key];
-        return options;
-      } else {
-        return {};
-      }
-    },
-    looks_like_serialized_model: function(object) {
-      return !object[this.configuration.special_options_key] && ("id" in object || "to_param" in object);
-    },
-    path_identifier: function(object) {
-      var property;
-      if (object === 0) {
-        return "0";
-      }
-      if (!object) {
-        return "";
-      }
-      property = object;
-      if (this.get_object_type(object) === "object") {
-        if ("to_param" in object) {
-          if (object.to_param == null) {
-            throw new ParameterMissing("Route parameter missing: to_param");
-          }
-          property = object.to_param;
-        } else if ("id" in object) {
-          if (object.id == null) {
-            throw new ParameterMissing("Route parameter missing: id");
-          }
-          property = object.id;
-        } else {
-          property = object;
-        }
-        if (this.get_object_type(property) === "function") {
-          property = property.call(object);
-        }
-      }
-      return property.toString();
-    },
-    clone: function(obj) {
-      var attr, copy, key;
-      if ((obj == null) || "object" !== this.get_object_type(obj)) {
-        return obj;
-      }
-      copy = obj.constructor();
-      for (key in obj) {
-        if (!hasProp.call(obj, key)) continue;
-        attr = obj[key];
-        copy[key] = attr;
-      }
-      return copy;
-    },
-    merge: function() {
-      var tap, xs;
-      xs = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-      tap = function(o, fn) {
-        fn(o);
-        return o;
-      };
-      if ((xs != null ? xs.length : void 0) > 0) {
-        return tap({}, function(m) {
-          var j, k, len, results, v, x;
-          results = [];
-          for (j = 0, len = xs.length; j < len; j++) {
-            x = xs[j];
-            results.push((function() {
-              var results1;
-              results1 = [];
-              for (k in x) {
-                v = x[k];
-                results1.push(m[k] = v);
-              }
-              return results1;
-            })());
-          }
-          return results;
-        });
-      }
-    },
-    normalize_options: function(parts, required_parts, default_options, actual_parameters) {
-      var i, j, key, len, options, part, parts_options, result, route_parts, url_parameters, use_all_parts, value;
-      options = this.extract_options(parts.length, actual_parameters);
-      if (actual_parameters.length > parts.length) {
-        throw new Error("Too many parameters provided for path");
-      }
-      use_all_parts = actual_parameters.length > required_parts.length;
-      parts_options = {};
-      for (key in options) {
-        if (!hasProp.call(options, key)) continue;
-        use_all_parts = true;
-        if (this.indexOf(parts, key) >= 0) {
-          parts_options[key] = value;
-        }
-      }
-      options = this.merge(this.configuration.default_url_options, default_options, options);
-      result = {};
-      url_parameters = {};
-      result['url_parameters'] = url_parameters;
-      for (key in options) {
-        if (!hasProp.call(options, key)) continue;
-        value = options[key];
-        if (this.indexOf(ReservedOptions, key) >= 0) {
-          result[key] = value;
-        } else {
-          url_parameters[key] = value;
-        }
-      }
-      route_parts = use_all_parts ? parts : required_parts;
-      i = 0;
-      for (j = 0, len = route_parts.length; j < len; j++) {
-        part = route_parts[j];
-        if (i < actual_parameters.length) {
-          if (!parts_options.hasOwnProperty(part)) {
-            url_parameters[part] = actual_parameters[i];
-            ++i;
-          }
-        }
-      }
-      return result;
-    },
-    build_route: function(parts, required_parts, default_options, route, full_url, args) {
-      var options, parameters, result, url, url_params;
-      args = Array.prototype.slice.call(args);
-      options = this.normalize_options(parts, required_parts, default_options, args);
-      parameters = options['url_parameters'];
-      result = "" + (this.get_prefix()) + (this.visit(route, parameters));
-      url = Utils.clean_path(result);
-      if (options['trailing_slash'] === true) {
-        url = url.replace(/(.*?)[\/]?$/, "$1/");
-      }
-      if ((url_params = this.serialize(parameters)).length) {
-        url += "?" + url_params;
-      }
-      url += options.anchor ? "#" + options.anchor : "";
-      if (full_url) {
-        url = this.route_url(options) + url;
-      }
-      return url;
-    },
-    visit: function(route, parameters, optional) {
-      var left, left_part, right, right_part, type, value;
-      if (optional == null) {
-        optional = false;
-      }
-      type = route[0], left = route[1], right = route[2];
-      switch (type) {
-        case NodeTypes.GROUP:
-          return this.visit(left, parameters, true);
-        case NodeTypes.STAR:
-          return this.visit_globbing(left, parameters, true);
-        case NodeTypes.LITERAL:
-        case NodeTypes.SLASH:
-        case NodeTypes.DOT:
-          return left;
-        case NodeTypes.CAT:
-          left_part = this.visit(left, parameters, optional);
-          right_part = this.visit(right, parameters, optional);
-          if (optional && ((this.is_optional_node(left[0]) && !left_part) || ((this.is_optional_node(right[0])) && !right_part))) {
-            return "";
-          }
-          return "" + left_part + right_part;
-        case NodeTypes.SYMBOL:
-          value = parameters[left];
-          delete parameters[left];
-          if (value != null) {
-            return this.encode_segment(this.path_identifier(value));
-          }
-          if (optional) {
-            return "";
-          } else {
-            throw new ParameterMissing("Route parameter missing: " + left);
-          }
-          break;
-        default:
-          throw new Error("Unknown Rails node type");
-      }
-    },
-    encode_segment: function(segment) {
-      return segment.replace(UriEncoderSegmentRegex, function(str) {
-        return encodeURIComponent(str);
-      });
-    },
-    is_optional_node: function(node) {
-      return this.indexOf([NodeTypes.STAR, NodeTypes.SYMBOL, NodeTypes.CAT], node) >= 0;
-    },
-    build_path_spec: function(route, wildcard) {
-      var left, right, type;
-      if (wildcard == null) {
-        wildcard = false;
-      }
-      type = route[0], left = route[1], right = route[2];
-      switch (type) {
-        case NodeTypes.GROUP:
-          return "(" + (this.build_path_spec(left)) + ")";
-        case NodeTypes.CAT:
-          return "" + (this.build_path_spec(left)) + (this.build_path_spec(right));
-        case NodeTypes.STAR:
-          return this.build_path_spec(left, true);
-        case NodeTypes.SYMBOL:
-          if (wildcard === true) {
-            return "" + (left[0] === '*' ? '' : '*') + left;
-          } else {
-            return ":" + left;
-          }
-          break;
-        case NodeTypes.SLASH:
-        case NodeTypes.DOT:
-        case NodeTypes.LITERAL:
-          return left;
-        default:
-          throw new Error("Unknown Rails node type");
-      }
-    },
-    visit_globbing: function(route, parameters, optional) {
-      var left, right, type, value;
-      type = route[0], left = route[1], right = route[2];
-      value = parameters[left];
-      delete parameters[left];
-      if (value == null) {
-        return this.visit(route, parameters, optional);
-      }
-      value = (function() {
-        switch (this.get_object_type(value)) {
-          case "array":
-            return value.join("/");
-          default:
-            return value;
-        }
-      }).call(this);
-      if (DeprecatedGlobbingBehavior) {
-        return this.path_identifier(value);
-      } else {
-        return encodeURI(this.path_identifier(value));
-      }
-    },
-    get_prefix: function() {
-      var prefix;
-      prefix = this.configuration.prefix;
-      if (prefix !== "") {
-        prefix = (prefix.match("/$") ? prefix : prefix + "/");
-      }
-      return prefix;
-    },
-    route: function(parts_table, default_options, route_spec, full_url) {
-      var j, len, part, parts, path_fn, ref, required, required_parts;
-      required_parts = [];
-      parts = [];
-      for (j = 0, len = parts_table.length; j < len; j++) {
-        ref = parts_table[j], part = ref[0], required = ref[1];
-        parts.push(part);
-        if (required) {
-          required_parts.push(part);
-        }
-      }
-      path_fn = function() {
-        return Utils.build_route(parts, required_parts, default_options, route_spec, full_url, arguments);
-      };
-      path_fn.required_params = required_parts;
-      path_fn.toString = function() {
-        return Utils.build_path_spec(route_spec);
-      };
-      return path_fn;
-    },
-    route_url: function(route_defaults) {
-      var hostname, port, protocol, subdomain;
-      if (typeof route_defaults === 'string') {
-        return route_defaults;
-      }
-      hostname = route_defaults.host || Utils.current_host();
-      if (!hostname) {
-        return '';
-      }
-      subdomain = route_defaults.subdomain ? route_defaults.subdomain + '.' : '';
-      protocol = route_defaults.protocol || Utils.current_protocol();
-      port = route_defaults.port || (!route_defaults.host ? Utils.current_port() : void 0);
-      port = port ? ":" + port : '';
-      return protocol + "://" + subdomain + hostname + port;
-    },
-    has_location: function() {
-      return (typeof window !== "undefined" && window !== null ? window.location : void 0) != null;
-    },
-    current_host: function() {
-      if (this.has_location()) {
-        return window.location.hostname;
-      } else {
-        return null;
-      }
-    },
-    current_protocol: function() {
-      if (this.has_location() && window.location.protocol !== '') {
-        return window.location.protocol.replace(/:$/, '');
-      } else {
-        return 'http';
-      }
-    },
-    current_port: function() {
-      if (this.has_location() && window.location.port !== '') {
-        return window.location.port;
-      } else {
-        return '';
-      }
-    },
-    _classToTypeCache: null,
-    _classToType: function() {
-      var j, len, name, ref;
-      if (this._classToTypeCache != null) {
-        return this._classToTypeCache;
-      }
-      this._classToTypeCache = {};
-      ref = "Boolean Number String Function Array Date RegExp Object Error".split(" ");
-      for (j = 0, len = ref.length; j < len; j++) {
-        name = ref[j];
-        this._classToTypeCache["[object " + name + "]"] = name.toLowerCase();
-      }
-      return this._classToTypeCache;
-    },
-    get_object_type: function(obj) {
-      if (obj == null) {
-        return "" + obj;
-      }
-      if (typeof obj === "object" || typeof obj === "function") {
-        return this._classToType()[Object.prototype.toString.call(obj)] || "object";
-      } else {
-        return typeof obj;
-      }
-    },
-    indexOf: function(array, element) {
-      if (Array.prototype.indexOf) {
-        return array.indexOf(element);
-      } else {
-        return this.indexOfImplementation(array, element);
-      }
-    },
-    indexOfImplementation: function(array, element) {
-      var el, i, j, len, result;
-      result = -1;
-      for (i = j = 0, len = array.length; j < len; i = ++j) {
-        el = array[i];
-        if (el === element) {
-          result = i;
-        }
-      }
-      return result;
-    },
-    namespace: function(root, namespace, routes) {
-      var index, j, len, part, parts;
-      parts = namespace ? namespace.split(".") : [];
-      if (parts.length === 0) {
-        return routes;
-      }
-      for (index = j = 0, len = parts.length; j < len; index = ++j) {
-        part = parts[index];
-        if (index < parts.length - 1) {
-          root = (root[part] || (root[part] = {}));
-        } else {
-          return root[part] = routes;
-        }
-      }
-    },
-    configure: function(new_config) {
-      return this.configuration = this.merge(this.configuration, new_config);
-    },
-    config: function() {
-      return this.clone(this.configuration);
-    },
-    make: function() {
-      var routes;
-      routes = {
-// contact => /contacts/:id(.:format)
-  // function(id, options)
-  contact: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"contacts",false],[2,[7,"/",false],[2,[3,"id",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]),
-// contacts => /contacts(.:format)
-  // function(options)
-  contacts: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"contacts",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// destroy_user_session => /logout(.:format)
-  // function(options)
-  destroy_user_session: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"logout",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// edit_contact => /contacts/:id/edit(.:format)
-  // function(id, options)
-  edit_contact: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"contacts",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"edit",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// edit_organization => /organizations/:id/edit(.:format)
-  // function(id, options)
-  edit_organization: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"organizations",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"edit",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// edit_user => /users/:id/edit(.:format)
-  // function(id, options)
-  edit_user: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"users",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"edit",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// error_500 => /error-500(.:format)
-  // function(options)
-  error_500: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"error-500",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// new_contact => /contacts/new(.:format)
-  // function(options)
-  new_contact: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"contacts",false],[2,[7,"/",false],[2,[6,"new",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]),
-// new_user => /users/new(.:format)
-  // function(options)
-  new_user: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"users",false],[2,[7,"/",false],[2,[6,"new",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]),
-// new_user_session => /login(.:format)
-  // function(options)
-  new_user_session: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"login",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// organization => /organizations/:id(.:format)
-  // function(id, options)
-  organization: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"organizations",false],[2,[7,"/",false],[2,[3,"id",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]),
-// organizations => /organizations(.:format)
-  // function(options)
-  organizations: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"organizations",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// reports => /reports(.:format)
-  // function(options)
-  reports: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"reports",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// restore_contact => /contacts/:id/restore(.:format)
-  // function(id, options)
-  restore_contact: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"contacts",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"restore",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// restore_organization => /organizations/:id/restore(.:format)
-  // function(id, options)
-  restore_organization: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"organizations",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"restore",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// restore_user => /users/:id/restore(.:format)
-  // function(id, options)
-  restore_user: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"users",false],[2,[7,"/",false],[2,[3,"id",false],[2,[7,"/",false],[2,[6,"restore",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]]]),
-// root => /
-  // function(options)
-  root: Utils.route([], {}, [7,"/",false]),
-// user => /users/:id(.:format)
-  // function(id, options)
-  user: Utils.route([["id",true],["format",false]], {}, [2,[7,"/",false],[2,[6,"users",false],[2,[7,"/",false],[2,[3,"id",false],[1,[2,[8,".",false],[3,"format",false]],false]]]]]),
-// user_session => /login(.:format)
-  // function(options)
-  user_session: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"login",false],[1,[2,[8,".",false],[3,"format",false]],false]]]),
-// users => /users(.:format)
-  // function(options)
-  users: Utils.route([["format",false]], {}, [2,[7,"/",false],[2,[6,"users",false],[1,[2,[8,".",false],[3,"format",false]],false]]])}
-;
-      routes.configure = function(config) {
-        return Utils.configure(config);
-      };
-      routes.config = function() {
-        return Utils.config();
-      };
-      routes.default_serializer = function(object, prefix) {
-        return Utils.default_serializer(object, prefix);
-      };
-      Utils.namespace(root, null, routes);
-      return Object.assign({
-        "default": routes
-      }, routes);
-    }
-  };
-
-  result = Utils.make();
-
-  if (typeof define === "function" && define.amd) {
-    define([], function() {
-      return result;
-    });
-  }
-
-  return result;
-
-}).call(this);
diff --git a/app/views/js_from_routes.js.erb b/app/views/js_from_routes.js.erb
new file mode 100644
index 00000000..5fe64339
--- /dev/null
+++ b/app/views/js_from_routes.js.erb
@@ -0,0 +1,25 @@
+//
+// DO NOT MODIFY: This file was automatically generated by JsFromRoutes.
+<%
+if routes.any?(&:path_only?)
+  %>import { formatUrl } from '@/utils/UrlHelper'<%
+end
+%><% if routes.any?(&:path_only?) && routes.any?(&:request_method?) %><%= "\n" %><% end %><%
+if routes.any?(&:request_method?)
+  %>import { request } from '@/services/ApiService'<%
+end
+%>
+import { pathFor } from '@/utils/PathHelper'
+
+export default {
+  pathFor,
+
+<% routes.each_with_index do |route, index| %>
+<% if index > 0 %><%= "\n" %><% end
+%>  <%= route.helper %>: options =>
+    <% if route.path_only?
+       %>formatUrl(<% else
+       %>request('<%= route.verb %>', <% end
+                                    %>'<%= route.path %>', options),
+<% end %>
+}
diff --git a/bin/assets b/bin/assets
new file mode 100755
index 00000000..21ddb68e
--- /dev/null
+++ b/bin/assets
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+# Compiles the app assets in production mode.
+RAILS_ENV=production bin/rake assets:precompile
diff --git a/bin/serve b/bin/serve
new file mode 100755
index 00000000..bbc6da8d
--- /dev/null
+++ b/bin/serve
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+# Starts the Rails server in production mode.
+RAILS_SERVE_STATIC_FILES=true RAILS_ENV=production bin/rails s
diff --git a/config/initializers/js_from_routes.rb b/config/initializers/js_from_routes.rb
new file mode 100644
index 00000000..330e9796
--- /dev/null
+++ b/config/initializers/js_from_routes.rb
@@ -0,0 +1,5 @@
+if Rails.env.development?
+  JsFromRoutes.config do |config|
+    config.template_path = Rails.root.join('app', 'views', 'js_from_routes.js.erb')
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 29d2d80e..f85650f5 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -3,29 +3,31 @@
 
   devise_for :users, skip: [ :sessions, :passwords, :registrations ]
   as :user do
-    get 'login', to: 'users/sessions#new', as: :new_user_session
-    post 'login', to: 'users/sessions#create', as: :user_session
-    match 'logout', to: 'users/sessions#destroy', as: :destroy_user_session, via: Devise.mappings[:user].sign_out_via
+    get 'login', to: 'users/sessions#new', as: :new_user_session, export: :true
+    post 'login', to: 'users/sessions#create', as: :user_session, export: :true
+    match 'logout', to: 'users/sessions#destroy', as: :destroy_user_session, via: Devise.mappings[:user].sign_out_via, export: :true
   end
 
-  resources :reports, only: [:index]
-  resources :users, except: [ :show ] do
+  resources :reports, only: [ :index ], export: :true
+  resources :users, except: [ :show ], export: :true do
     member do
       put 'restore'
     end
   end
-  resources :organizations, except: [ :show, :new ] do
+  resources :organizations, except: [ :show, :new ], export: :true do
     member do
       put 'restore'
     end
   end
-  resources :contacts, except: [ :show ] do
+  resources :contacts, except: [ :update, :show, :destroy ], export: :true do
     member do
-      put 'restore'
+      delete :destroy, export: true
+      patch :update, export: true
+      put :restore, export: true
     end
   end
 
-  get '/error-500' => 'dashboard#example_exception'
+  get '/error-500' => 'dashboard#example_exception', export: :true
 
-  root 'dashboard#index'
+  root 'dashboard#index', export: :true
 end
diff --git a/lib/generators/routes_generator.rb b/lib/generators/routes_generator.rb
deleted file mode 100644
index 3fe1b93d..00000000
--- a/lib/generators/routes_generator.rb
+++ /dev/null
@@ -1,18 +0,0 @@
-# Use it with: "rails generate routes"
-#
-require 'js-routes'
-
-JsRoutes.setup do |config|
-  config.exclude = [
-    /rails_/
-  ]
-  config.compact = true
-end
-
-class RoutesGenerator < Rails::Generators::Base
-  desc 'This generator creates named routes for the client side'
-
-  def create_initializer_file
-    create_file "app/javascript/utils/routes.js", JsRoutes.generate
-  end
-end