DEV Community: florianfelsing

How to Add Custom Folders to the Rails Asset Pipeline

florianfelsing — Fri, 23 Sep 2022 10:29:13 +0000

Sometimes you may find yourself in the situation of wanting to add a custom folder to the Rails assets pipeline in order to keep your Rails application neatly organized.

Say, for example, you would like to have additional folders called "fonts" or "icons" for placing your custom fonts and icons there, keeping them out of the "images" folder.

This can be achieved very easily.

Go to config/assets.rb, where you will find the following line, which is telling you what to do:

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path

In order to register a custom folder within your application's assets folder, go ahead and add the following line:

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")

Rails.root returns a Pathname object, which is plain old Ruby and adds it to the assets paths of your application.

Now you can reference a downloaded font - say, for example in a stylesheet - like this:

@font-face {
  font-family: "Inter";
  src: url("Inter-Medium.woff2") format("woff2"),
       url("Inter-Medium.woff") format("woff"),
       url("Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

Further reading: https://guides.rubyonrails.org/asset_pipeline.html

The Best Ruby on Rails Tutorials, Courses & Resources (2023 and Beyond)

florianfelsing — Wed, 27 Jul 2022 14:52:00 +0000

Last Update: 2022-01-13

I'll keep this article always up to date, so come back from time to time.

Rails Tutorials for Beginners

FREE App Academy Open by App Academy
$$$ Ruby on Rails Tutorial by Michael Hartl
$$$ Full Stack Rails by Hrishi Mittal
FREE Ruby on Rails by The Odin Project

Advanced Rails Tutorials

$$$ Rebuilding Rails by Noah Gibbs
$$$ Sustainable Web Development with Ruby on Rails by David Bryant Copeland

Rails Testing

$$$ The Complete Guide to Rails Testing by Jason Swett

Turbo & Hotwire

FREE Learn Hotwire by Building a Forum by Andrea Fomera
$$$ Hotwire for Rails Developers by The Pragmatic Studio
FREE The Turbo Rails Tutorial by Alexandre Ruban
$$$ The Rebuilding turbo-rails Tutorial by Alexandre Ruban
$$$ The Rails and Hotwire Codex by Ayush Newatia

JavaScript

$$$ UnPacked: A Single-Page App with Vue.js and Rails by The Pragmatic Studio
$$$ The Complete React on Rails Course by Hrishi Mittal

Other Tutorials

$$$ Learn Enough Action Cable to be Dangerous by Michael Hartl
$$$ Advanced CableReady by Julian Rubisch

DevOps

$$$ Docker for Beginners by Jason Swett
$$$ Dive Into Docker by Nick Janetakis

YouTube Channels

Mentorship

Podcasts

Did I miss anything important? Is any of the linked to resources above no longer available our outdated? Please let me know in the comments!

How To Set up a Ruby on Rails 7 Development Environment on Ubuntu 22.04 LTS

florianfelsing — Wed, 01 Jun 2022 14:36:55 +0000

In this post I will go through the steps required to set up a development environment for Ruby on Rails 7 on Ubuntu 22.04 LTS.

I will be running Ubuntu on a virtual machine using VirtualBox, however, the steps are basically the same when Ubuntu is your main OS.

Before You Start

Before you get started, run these commands to update the list of available packages and to upgrade them, if an upgrade is available.

sudo apt update
sudo apt upgrade

Google Chrome

Feel free to go with any browser you are comfortable working with in your development environment. Personally, I like working with Google Chrome.

If you also like using Chrome, just download the .deb package via this page and install.

VSCode

My go-to code-editor is Microsoft Visual Studio Code. The fastest way to install it goes via terminal. Simply execute the following command and you should be good to go:

sudo snap install --classic code

In case you run VSCode on multiple machines and would like to automatically sync your settings between them, don't forget to turn on Settings Sync via the head icon on the bottom left of the screen.

Git

Any developer needs Git, so let's install it.

The quickest option here is install with default packages, which is fine unless you explicitly need to run the latest version of Git with all the newest available features.

sudo apt install git

By running git --version you can now check, which Git version is installed on your machine.

There are also some standard configurations that I like to apply right away.

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
git config --global init.defaultBranch main
git config --global alias.co checkout
git config --global credential.helper "cache --timeout=86400"

This is what the above commands will do (in this exact order):

Configure your username
Configure your email address
Set the name of the default branch to "main" (as opposed to "master")
Create "co" as an alias for "checkout" - that way you won't need to write "git checkout main" anymore and go with "git co main" instead
Make Git remember credentials for 24 hours

Don't forget to replace the "Your Name" and "your.email@example.com" values, before you execute those commands.

By running git config --list you should now be able to confirm that all of the above settings have been applied successfully.

rbenv and Ruby

For managing my apps' Ruby environments, I like to roll with rbenv (short for RuBy ENVironment).

Install rbenv by executing the following commands:

# Install dependencies required to install Ruby
sudo apt install git curl libssl-dev libreadline-dev zlib1g-dev autoconf bison build-essential libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev

# Install rbenv via GitHub
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash

# Add ~/.rbenv/bin to $PATH
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc

# Load rbenv automatically
echo 'eval "$(rbenv init -)"' >> ~/.bashrc

# Apply changes to current Shell sessions
source ~/.bashrc

Now run type rbenv. If the output is as in the screenshot below, you have done everything correctly up to this point.

Next, you'll want to run the following commands:

# Download Ruby build plugin via GitHub
git clone https://github.com/rbenv/ruby-build.git

# Install Ruby build plugin
cat ruby-build/install.sh
PREFIX=/usr/local sudo ./ruby-build/install.sh

Now everything is set up and ready to install Ruby. The next command will show you the latest stable releases for each Ruby implementation:

rbenv install -l

I'll go with the (at the time of writing) latest Ruby version 3.1.2.

These commands will install it via rbenv and make it the global (= standard) Ruby version to run on your system:

rbenv install 3.1.2
rbenv global 3.1.2
rbenv rehash

To conclude this segment, let's also install some gems that you will definitely need in your Rails development environment:

gem install bundler
gem install rails
rbenv rehash

Feel free to install any other gems at this point, that you know you'll need later on.

SQLite

When you are developing with Rails, there is a high chance that at some point you will run into an SQLite database, especially with small projects that have been mostly set up for testing and experimenting.

Install SQLite3 by running the following command:

sudo apt install sqlite3

Confirm that running sqlite3 –version works and shows you the SQLite version installed on your system now.

PostgreSQL

Run the following command to install PostgreSQL on your machine:

sudo apt-get install postgresql postgresql-contrib

Since we are not intending to connect to PostgreSQL databases from other machines, we can follow the [simple PostgreSQL setup] guide (https://help.ubuntu.com/community/PostgreSQL) as described in the linked article.

"Since the only user who can connect to a fresh install is the postgres user, here is how to create yourself a database account (which is in this case also a database superuser) with the same name as your login name and then create a password for the user:"

sudo -u postgres createuser --superuser $USER
sudo -u postgres psql

You will also want to create a password for your user:

postgres=# \password <username>

Running the above command will trigger a dialogue that will allow you to set it.

Lastly, also pay attention to this advice given on ubuntu.com:

Client programs, by default, connect to the local host using your Ubuntu login name and expect to find a database with that name too. So to make things REALLY easy, use your new superuser privileges granted above to create a database with the same name as your login name:

So let's do just this:

sudo -u postgres createdb $USER

You should be able to run psql without any error messages now.

nvm and Node.js

Just like with Ruby, we will want to use a version manager with Node to help us manage any conflicts between versions and dependencies.

The version manager will be nvm and you can install it using this command:

# Download and run nvm install script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Apply these changes to current Shell session using source ~/.bashrc before you continue so that the nvm command becomes available.

Now run the following command to install and use the latest stable version of Node:

nvm install --lts

If everything went well, node -v should now return you the latest stable Node version.

I hope this guide was helpful to you. And please let me know in case you have any questions, suggestions or comments.

How To Run an Ubuntu VM on Windows 11

florianfelsing — Sat, 28 May 2022 16:33:05 +0000

In this post, I will show you how to create an Ubuntu VM (virtual machine) on Windows 11, using VirtualBox.

The Ubuntu version used in this guide is going to be 22.04 LTS, however, the process should look pretty much identical for other versions of Ubuntu.

Download and Install VirtualBox

Download the VirtualBox platform packages for Windows hosts on this page and then simply install the software on your computer.

Download an Ubuntu Image

Download an Ubuntu image, in this case Ubuntu 22.04 LTS.

The .iso file is over 3 GB in size, so depending on your connection, this step may take a while.

Creating the Ubuntu Virtual Machine

Open VirtualBox and click "New".

Enable Expert Mode, give your VM a name, choose "Linux" as type and indicate, which version of Linux you will be using.

Also, make sure to allocate your VM enough memory. In my case, I went with 4 GB, although less should easily do in most cases. As a minimum, I'd recommend you go with 2 GB.

This is a value you can change easily later on, so don't worry about it too much.

When you are done, click the "Create" button.

In the next window, confirm the directory where your VM file is going to be stored.

Unless you know what you are doing, choose "VDI (VirtualBox Disk Image)" as the hard disk file type and decide, how much space you would like to allocate to your virtual machine.

The latter is a bit more complicated to change later on than for example the available RAM, so best go with a value that will be enough for quite a while. In my case, I went with dynamically allocated 100 GB. As a minimum, I'd recommend 15 GB.

The main advantage of dynamic allocation is that on your host OS only the actual space used by the VM will be used, whereas with fixed allocation, the amount of space you choose will be taken immediately.

Fixed allocation can have a performance benefit, however, in most cases you will not notice the difference at all.

Click the "Create" button.

Optimal Settings

Before you move on to the next step, choose "Settings". Then apply the optimal settings described next.

Attention: These are no hard-written rules, so take them with a grain of salt and feel free to adapt to your own needs.

System > Motherboard: Enable EFI
System > Processor: Set CPU cores to half of your available cores
System > Display: Increase video memory to 128 MB, enable 3D acceleration

Installing Ubuntu

Start your virtual machine now and choose the Ubuntu image your downloaded earlier as your startup disk.

Choose "Try or install Ubuntu" and simply follow the normal Ubuntu installation flow, choosing the settings you deem adequate.

If you need help at any time, you may consult this guide:

What To Do After Ubuntu Has Been Installed?

Congratulations, Ubuntu should now be up and running. Here is a list of things you might want to do before you proceed:

Change screen resolution to the resolution of your monitor, as the default will be 800 x 600
Run any updates that Ubuntu is suggesting
Switch between windowed mode and full screen mode by pressing your host key + F; your host key is the one displayed on the bottom right of your VM instance, in my case "STRG-Rechts" (German for "CTRL-right"
Connect with your Google account, as this will give you instant access to your Google Drive files from within Ubuntu
Install Guest Additions (more below)
Set up a shared folder (more even further below)

Note: There are some cases where the native resolution of your monitor just won't show up, despite everything apparently having been set up correctly. I've published a Shell script on GitHub that can help you fix this, by forcing the desired screen resolution.

Installing Guest Additions

This point is specific to Ubuntu as a virtual machine. Guest Additions is an additional piece of software that improves
integration between your virtual machine your host OS.

In order to install Guest Additions, first boot to the Desktop, then select Devices > Insert Guest Additions CD.

In some cases you can now simply install Guest Additions and you are good to go.

It's also possible, however, that clicking the "Run Software" button won't do anything. In this case, do a right click and open the CD folder in your terminal.

Execute by typing this command:

sudo ./VBoxLinuxAdditions.run

If installing guest additions didn't work for you before, your terminal will now give you some information about why it didn't work.

In my case, a required package was missing, which I was able to install by executing the following commands:

sudo apt-get update
sudo apt-get install build-essential gcc make perl dkms

After that, everything went smoothly.

Installing Guest Additions can sometimes be a bit tricky - so feel free to comment in case you are struggling and I will try to help.

Setting up a Shared Folder

In order to set up a shared folder, again go to your VMs settings and this time navigate to "Shared Folders".

Now choose a path for your shared folder on the host OS and apply the same settings you can see in the screenshot below.

When you start your VM again now, the shared folder should already be showing up, however, it is likely that you are receiving the following error message when you try to open it:

This location could not be displayed. You do not have the permissions necessary to view the contents of "Shared_Folder"

In order to fix this simply run this command:

sudo adduser $USER vboxsf

Then reboot your VM and you should be good to go.