Ruby on Rails API with Vue.js - Final Components and Testing - 08

====================

PART 8 of 8

Did you know Ruby on Rails can be used as a strict API based backend application? What's the benefit to this? Think of it as a single source of truth for multiple _future_ applications to absorb and use this data directly. Anything from a native mobile application, to a front-end framework, can talk with this data. Many apps can essentially communicate with a "source of truth" in return which means more consistent applications for all.

====================

📰 Subscribe:

💎My latest course:

💻 Previously published at:

💻 Check out the blog:

🦄 Check out my personal site:

🚀 Links:

📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.

☕️ 🙏🏻 Patreon

☕️ Or buy me a coffee

[ericflorence]

oh my god I kept getting an error that Redis couldn't connect and it took me a while to figure it out. If anyone else has the issue all I had to do was reinstall Redis (mac: brew reinstall redis) and then run the server again (brew services start redis) -> Another amazing build Andy, this is my first time really in Vue.js and it was a doozy but I learned so much! Looking forward to Hello Rails and all your other content!

[yvessomda]

Thank for this tutorial, we learn a lot.

[hongotedesco]

Having recently (last few days) gone through this, here are the issues i ran into:
- tailwindcss upgrade: The latest version is very different from the one cited in this demo, not being familiar with tailwind, had to dissect things.
- A cors error during signup. This was painful, and had to trace through both the axios code and the cors module on the rails server. I "solved" this by adding "credentials: true" in the "resource" section in the initializer cors.rb. I say "solve" because i don't know if this is really the correct way. I've only tested signin/signup/signout, and they all work fine, but have not done artists/records since I'm headed in a different direction.

[JosemaLuque]

I have another doubt. I want to acces to each of the artists information individually using its ID, but i have no idea about how I should do this. Could you help?

[michaelmudge]

when trying to deploy this, will i have to reconfigure axios 'base_url_path' to be '/' ?

[baptistemaury]

Little error at the end :

You have an Unpermitted attribute :title, so when you update an Artist and refresh the page, the name go back.

The solution :

replace in Artists.vue

updateArtist (artist) {
this.editedArtist = ''
this.$http.secured.patch(`/api/v1/artists/${artist.id}`, { artist: { title: artist.name } })
.catch(error => this.setError(error, 'Cannot update artist'))
}

by

updateArtist (artist) {
this.editedArtist = ''
this.$http.secured.patch(`/api/v1/artists/${artist.id}`, { artist: { name: artist.name } })
.catch(error => this.setError(error, 'Cannot update artist'))
}

[davidjforer]

Anyone who built this can you actually sign out? I keep getting a syntax error on the sign out and when Andy created this I never saw him sign out once logged in so probably didn't notice it. Not sure here is my error in case someone knows whats happening. Also can't login -> syntax error, unexpected ':', expecting end

[salomaonovacena]

[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'plain')"

found in

---> <Signup> at src/components/Signup.vue
<App> at src/App.vue
<Root>
??