Implementing and deploying a Music Playlist Ruby on Rails app on Heroku
Today I will show a quick and simple way to build a Ruby on Rails project and deploying to Heroku.
If you haven’t already installed ruby on your device you can install it using rbenv. You can use this for listing all the ruby version available and choose one:
For this project, we will use the latest Ruby version
The first step is to ensure you have Ruby and Rails installed on your machine. You can check that using these commands:
- For Ruby
- For Rails
After you have everything installed, create a new Ruby on Rails project using the following command:
For this tutorial I will name the project “playlist-project”, so I will use this command to generate the rails project:
The last part of the command, “-d postgresql” is for installing PostgreSQL. We use this database because is scalable, runs as a service and it fits much better with Heroku. By default Ruby on Rails uses sqlite3 database, a small database ideal just for development.
After running that command in your terminal, go to the root of your project using:
Before you start the server, run this command to create the database:
And that’s it 🚀, you already have a functional Ruby on Rails project that can be viewed on your local machine by running:
Your server listens to “localhost:3000”, so by accessing that URL on your browser you will see a welcome page generated by rails.
Next, we need a way to create, show, and delete a list of songs or videos for our playlist.
Ruby on Rails is a MVC framework, so to do that first we need to add a new controller to our application using the following command:
The methods defined here will be used later in the “View” part of the project.
First, we will create the “new” method:
The next step is to create a model for our playlist:
This will create a migration for adding a new table in the database with those two attributes and a model. The model will be used to work with the database, insert, retrieve, or update elements from the database.
After the migration is created we need to tell the database to load this migration
The next move is to create a view for that “new” method. In the “app/views” path we can see a directory created by that command used before, named “playlist”. Here we need to create an html file with the name of the method we want to use, like “new.html.erb”.
In this view, we need to create a form for adding new entities for our playlist.
And update the “new” method.
This is how your “new.html.erb” page looks like:
After this we need to configure a route for our view. To do that we need to go to “config/routes.rb” and use this:
This will ensure CRUD operations for our playlist, like create, read, update, and delete.
Now we need to add another method in the playlist controller for saving the new entity in the database.
We will create a new method call “show” to display one record from the playlist.
And creating a view file in the “app/views/playlist” path, named “show.html.erb”:
Show page for one of the entities:
The previous method shows only one entity of the playlist, next we need to show all the entities using another method called “index”: “app/controllers/playlist_controller.rb”
The most important part after adding a new method to the controller is to create the associated view.
The index view will be the home page for our app. To do that we need to configure the “root” in the “app/config/routes.rb”:
Maybe you want to edit a specific entity of the playlist because of a mistype. To do that, you need to create a new method in the playlist controller to handle this request.
And then, create a new view template: “app/views/playlist/edit.html.erb”
This is how “edit” page will look like It is almost the same with the “new” page:
That it’s not enough for editing an existing playlist entity. We also need an “update” method in our controller. The reason is that the previous “form_with” method point to the update action. In “app/controllers/playlist_controller.rb”
To have access to this method, we need to include a link on the “index” page for all of the entities of the playlist. In the “app/views/playlist/index.html.erb” add this:
The last thing that we need for this CRUD application is the delete/destroy method. In “app/controllers/playlist_controller.rb”
And after update the “index.html.erb” file:
When you want to use the “Destroy” method, first you need to confirm that action and only after the entity will be deleted:
Deploying to Heroku
The last step is to deploy our application on Heroku. In order to do that, you need to initialize and add your project to git:
To create a new Heroku application, run this:
To upload your newly created project to Heroku, you need to push all your files with:
Create a new database by running all the migrations to Heroku:
You can now visit your app to Heroku dashboard. By pressing the “Open app” button, it will start the application. Or you can start it by using this command from your terminal:
That’s all, now you have a basic Ruby on Rails project deployed to Heroku. Good job!🚀