I wanted to write this blog for the specific purpose of documenting what went into creating this portfolio app. I am doing this partly to refresh myself on earlier parts of the project, but also to have a record of what worked and what didn't that might help me on future projects. This app was built as part of a
Udemy course - Dissecting Rails 5 by Jordan Hudgens. I decided that I wanted to use the most current version of Rails, which was Rails 7. I had no idea how much of a difference that would make. I was clueless as to just how much Rails and the dependencies used in the course have changed since 2016.
To start with, I could never get importmaps to work properly with jQuery. It went on from there. The course used Bootstrap4.0.0-alpha6, and I started out trying to use Bootstrap5.2. That proved to be too much for me due to the breaking changes in that framework. So, I changed the version in the gemfile and did Bundle Install. All appeared to be well, however 5.2 was persisting in my app no matter what I tried. The problem was that in the process of consulting SO (Stack Overflow) I had come across the "rails assets:precompile" command in an attempt to fix things. I did later learn about "assets:clean", but it was entirely too long before I discovered that the clean command only removes the latest version of precompiled assets, and as such older version of the CSS assets were persisting. Finally I discovered "rails assets:clobber" which removes all precompiled assets. That immediately fixed the bootstrap version problem. Now my app in its infancy was starting to visually look like the instructors version.
As it went on it became apparent that the jQuery that Bootstrap requires for collapsible menus was not working. I decided at this point that I needed to consult a different source of information to learn some things about Rails 7. After searching, there was not very much out there besides the rails guides, which can be a little much for someone just getting started with Rails. I came across an
e-book that was a tutorial on building an applicant tracking system using Rails 7, Hotwire, Turbo, Stimulus, Stimulus Reflex, and MRUJS - CableCar. I found it to be very helpful and the app in that tutorial worked perfectly every step of the way. It became apparent to me that I could benefit a lot from using the dependencies and configuration that was used in that book.
So, I rebuilt the app from the start, setup with esbuild, chokidar and bootstrap (the correct version). I then went through the old app, starting at the top, and copied and pasted all of the relevant files over to the new build. I recreated the file structure to the point where we had gotten through the course and made sure the SCSS, controllers, concerns, models, helpers, views, and routes all matched. I had to do some searching about what to do with the DB schema. It turns out you can just copy it and then do "rails db:schema:load" to update the database. After that, you can do future migrations as needed. The original migration files don't have to be copied. I now know that I could have copied the migrations as long as the time/date stamps of the file names stayed in the same order, I could have just re-run the migrations. I then updated the gemfile and did the bundle install to get those dependencies back where they were. I did use a different version of the devise gem that was provided by the ebook author who had updated the gem to make it work better with Rails 7. In my previous version of the app, all "destroy" operations, including logging out had to be done with a button, instead of a link. At this point, I was able to successfully import jQuery and progress forward with the course. I think that it took 9 days all in all from discovering that jQuery didn't work. I spent two days googling for SO answers, 4 days going through the e-book, and then I spent about 3 days getting the app built again and now in good working order to move forward.
It didn't take too long before I hit another roadblock. We were using sortableJS to implement drag and drop operations for the portfolio page and it used Coffeescript, which is deprecated in Rails 7. So, I turned to the e-book that had helped so much thus far, and implemented the drag and drop using Stimulus, the way we had done on that project.
The next section was on working with forms in Rails. Wouldn't you know it, things have changed and now "form_with" has replaced "form_for". That part was only a small hiccup. We were doing a nested form and using the Cocoon gem, which has not been maintained for about 3 years and would not work for me. It was also using UJS, which is not included in Rails 7 MRUJS replaces it. So, I found another gem... Vanilla Nested, which worked with vanilla Javascript to allow you to add nested form elements. It should have worked very easily, but I created this speedbump. I misinterpreted the docs and didn't get that the id of the element in the partial had to match a param in the form element calling it. It took reaching out to the creator of the gem to get that answer. He graciously answered and solved it within minutes, from his native country of Brazil. That was pretty surreal for me, and brought home that the people writing these gems for free are truly part of the community and are willing to help out people in need.
With that solved, we moved onto the next feature, adding little messages using the Gritter gem. That gem was quite out of date and would not work. At this point was when I really learned that much of the issue I was having stemmed from the way that Hotwired and Turbo work, and any gem that has not been updated to work with them will break. The new features in Rails add many paths that make these gems no longer necessary. I implemented toast messages in the manner that was provided in the e-book, using Stimulus. This worked quite well, and the biggest headache I had was figuring out that the SVG close icon we were using was not showing up because it was basically sized down to a single pixel. Once I set an explicit width, it showed up just fine.
The next step was to create a comment mechanism for blog posts. I followed along with the lesson, but I was pretty sure that I would be using the comment form implementation from the e-book. It turned out that in this case, it was an overly complicated implementation that used a slide-out panel that had previously used in another part of the book. The thing that made it really difficult was that it was all styled in Tailwind CSS and I was using Bootstrap. I quickly realized that making the translation between the two would be quite tedious and time consuming. I was here to learn Rails, not to try and master two different CSS/SCSS frameworks. So, this time I turned to google and found a straightforward implementation for a polymorphic comment feature from
gorails. Even though it was from 2014, it still worked well and I was able to style it in the manner of the Udemy course with Bootstrap. Things were moving along. I had begun to understand that every stage would be fraught with challenges, but that I would be able to overcome them with enough googling.
The next hurdle came pretty quickly in the form of adding markdown to the blog text input. As I was now expecting, the gem would not work in Rails 7. Thankfully the e-book had used ActionText with Trix as an editor, so it was fairly simple to get that implemented. The tricky part turned out to be getting the Trix editor CSS styles to work properly. The toolbars would not display correctly and it seemed nothing I could do would fix it, until I finally found the right SO answer which was to add:
to app/config/assets.rb. After that, the Trix stylsheets took affect and all was fixed.
After that, it was time to deploy to Heroku and then figure out how to get my google domain to work. Here are some of the things that I needed to do to accomplish that.
It took more searching and browsing the Heroku docs, Google docs, and SO pages to get it all to work. However, I did get there and I am thrilled to be writing my first blog on my very own personal portfolio app. I plan to keep adding to it and tweaking things to my liking. Any projects that I complete in the future will be added to the portfolios section of this app. If anybody read this, thanks for taking the time.
Stuart