DEV Community: Milos

RVM Ruby 2.6.0 — built with custom openssl version on Ubuntu 22.04

Milos — Fri, 26 Apr 2024 12:11:45 +0000

Setup: Ubuntu 22.04, rvm, RoR (4.2.X), Ruby 2.1.7

Recently I had a task to update Ruby from 2.1.7 to 2.6.0 while keeping the RoR version to 4.2.X.

After standard rvm install 2.6.0 and bundle install command, I had to bump Rails to 4.2.8 due some incompatibility with gems, and then bundle install yielded some errors for gems, which I had to resolve by installing sudo apt-get install libxml12-dev libcurl14-openssl-dev packages, which coincidently removed libssl1, and the build passed.

But when I ran the RoR app, I got SSL certification issue from the 3rd party service, which was working fine with previous versions of Ruby and Rails: SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate)

So I removed Ruby 2.6.0 and tried to build from scratch, and got issue during ruby install process, apparently I was missing openssl library files. Ruby 2.6.0 was not compatible with the system openssl libs, which was strange since the first time it passed.

It turns out that libssl1 , which was removed was crucial, and the 2.6.0 can’t be built with the new libs which were installed via apt-get install command, but I needed those libs to do bundle install. So it was closed loop.

Solution #1 (which didn’t work)

After digging the web, the most common solution was to do following:

rvm pkg install openssl
rvm install 2.6.0 --with-openssl-dir=/usr/local/rvm/usr

And that passed, Ruby was built, but the problem with the SSL certificate when Rails up was started was still present.

The issue was that version of openssl that comes with rvm is 1.0.1i and the openssl in the libssl1 is 1.0.2n , which can be seen here and here. So there was some incompatibility with openssl version and the SSL certificate. By the way, SSL certificate was issued by Let’s Encrypt, so it wasn’t some custom certificate.

Solution #2 (which worked)

I had to download 1.0.2n openssl from Github and build it, install it and then rebuilt Ruby against it.

Note here I was using Docker, but this can be done outside of the Docker of course.

Here are the steps for building Ruby via rvm against custom version of openssl:

We will need 2 locations
One where we git clone openssl.
One where we will install the cloned version to (we will install it but not for system, just for our usage).
For git clone we will use /tmp.
For install location we will use a/opt/openssla (for this you can create tmp folder somewhere e.g. ~/tmp, or you can use /opt/tmp or /opt, just don’t use something that the system would use)
Run/Add following commands in Dockerfile:

ENV OPENSSL_PREFIX=/opt/openssl
ENV SSL_CERT_FILE=/etc/ssl/certs/ca-certificates.crt

WORKDIR /tmp
RUN git clone --branch OpenSSL_1_0_2n https://github.com/openssl/openssl.git
RUN cd openssl
RUN ./config shared --prefix=$OPENSSL_PREFIX --openssldir=$OPENSSL_PREFIX/ssl
RUN make
RUN make install

RUN rvm install 2.6.0 -C --with-openssl-dir=$OPENSSL_PREFIX
ENV PATH /usr/local/rvm/bin:$PATH
RUN rvm --default use ruby-2.6.0
ENV PATH /usr/local/rvm/bin:/usr/local/rvm/rubies/ruby-2.6.0/bin:$PATH
ENV GEM_HOME /usr/local/rvm/rubies/ruby-2.6.0/lib/ruby/gems/2.6.0

And that’s it. If that was successful you have Ruby complied against custom openssl library.

Important notes:

If you omit ENV SSL_CERT_FILE=/etc/ssl/certs/ca-certificates.crt the build process will not fail, but when you do bundle install it will give you:

Fetching source index from https://rubygems.org/
Could not verify the SSL certificate for
https://rubygems.org/quick/Marshal.4.8/nokogiri-1.13.10-x86_64-linux.gemspec.rz.
There is a chance you are experiencing a man-in-the-middle attack, but most
likely your system doesn't have the CA certificates needed for verification. For
information about OpenSSL certificates, see http://bit.ly/ruby-ssl. To connect
without using SSL, edit your Gemfile sources and change 'https' to 'http'

And you would try to fix this by doing gem update — system or whatever, but the problem is that it needs path to certs.

So don’t forget to add ENV SSL_CERT_FILE=/etc/ssl/certs/ca-certificates.crt.

You have to build/compile openssl as shared library, otherwise rvm will complain. And for that we have shared option in line: RUN ./config shared — prefix=$OPENSSL_PREFIX — openssldir=$OPENSSL_PREFIX/ssl
You can do build against a bit higher version of openssl like 1.1.1 , in that case just do RUN git clone — branch OpenSSL_1_1_1 https://github.com/openssl/openssl.git instead.

Cheers!

Ruby on Rails 4.2.X upgrade issue with meta_request — undefined method normalize_key

Milos — Fri, 26 Apr 2024 09:39:32 +0000

You may find yourself in need to migrate from RoR 4.2.X to the latest version, and that can be quite a task. Facing the same problem, I would like to point out the issue that bugged me for quite a bit, and that is gem meta_request.

Now if you are not using it, this text is not for you, but if you are, you might find this post helpful.

So, initial situation: very old Ruby, very old Rails.

Next step(s): keep the Rails version, update Ruby (in this case to 2.6.0 or at least to 2.3.0)

Last step(s): update Rails to 5.0 and then to 6.0 and so on, by the book.

Updating Ruby went fine more or less, keep in mind that the Rails is still the same version, also bundle install yielded minor hiccups/errors but nothing that can’t be resolved.

But upon landing/opening home page I got

NoMethodError: undefined method normalize_key ActiveSupport::Cache::Store

Now normalize_key is Rails 5+ function, and I had 4.2.X, how the hell is that being called then?

The answer is meta_request!

Yes, bundler picked up latest possible version, since it says it is compatible with Rails(i.e. railties >= 3.0.0) and in it, meta_request on line uses normalize_key call, which is Rails 5 feature(from v5.0.0.1).

So to fix this issue just do:

gem 'meta_request', '~> 0.7.4'

until you bump your Rails to 5+.

Cheers!

Angular Material Datepicker Icon + TailwindCSS

Milos — Mon, 30 Dec 2019 10:42:48 +0000

This is a quick note/fix for any1 who uses Angular Material Datepicker and TailwindCSS. I have faced small cosmetic issue when trying to use Angular Material Calendar in my TailwindCSS based application.

Problem was that the Datepicker icon had an offset, and it was really annoying. Like so:

So the fix for it is to set:

svg {
  display: inline;
}

But I had to set it before "tailwindcss/utilities" are loaded or after the components are loaded :).
So my tailwind-build.css (this file can be named whatever you want) looks like this:

@import "tailwindcss/base";
@import "tailwindcss/components";

/* Custom component styling goes here*/
@import "./app/some_path_blah_blah/common.css";

@import "tailwindcss/utilities";

And in my common.css I added:

...
svg {
  display: inline;
}

So the Datepicker should look like this:

Cheers!

TailwindCSS & Angular8

Milos — Wed, 11 Dec 2019 15:13:54 +0000

This is a simple tutorial about integrating TailwindCSS library into the Angular8 application.

If you haven't heard of TailwindCSS you can check it out here. In a nutshell TailwindCSS is the upcoming CSS library, which I hope will eventually replace the Bootstrap in the near future. Why would you use TailwindCSS you may wonder? Well first of all it is great for responsive applications, highly customisable, preloaded with, I would say 90% of CSS classes you would normally use to build a web application, etc.
So lets get cracking :)

The complete code can be found on GitHub repo:

LaptopTheOne / tailwindcss-angular-demo

This is a simple demo on how to integrate TailwindCSS library into the Angular8 application

First of all you need to create simple Angular8 app and install some additional NPM packages:

ng new tailwindcss-demo
...IMPORTANT! select CSS when asked...

cd tailwindcss-demo
npm i -D tailwindcss postcss-import autoprefixer postcss-cli @fullhuman/postcss-purgecss

After that run following command from the root of the application:

npx tailwind init

This will create new file called tailwind.config.js

Then create new file, also in the root of the application called postcss.config.js and add this code into it:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/index.html',
      ],
      defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    }),
  ],
};

What this code effectively do is it strips the unused CSS from you application leaving only used TailwindCSS classes.

After this create also one new file in ./src/tailwind-build.css and put this code in:

/* ./src/tailwind.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Open angular.json file and edit like so (there are 2 occurrences that need to be edited one under build other under test key):

// this is under build key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],
// this is under test key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],

In package.json file, add under scripts section following:

...
"scripts": {
...
  "tailwind-build": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css",
  "tailwind-watch": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css --watch",
...
},
...

Run

npm run tailwind-build

and notice that the new file has been created under ./src/styles-tailwind.css. That file is the final output of the tailwind build process and it contains ALL the CSS elements from TailwindCSS. If you investigate a bit, you will notice that this file is ~ 787KiB

+--------------------------------------------------------------+
| Size         | 787.36 KiB                                    |
|--------------------------------------------------------------|
| Gzipped      | 85.43 KiB                                     |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 11:51:05                  |
+--------------------------------------------------------------+

which is a lot btw. This will be reduces as we progress, don't worry :). And remember we did not even used TailwindCSS anywhere in our project yet, so let's start using it :)

In our app.component.html you can remove everything or add following line at the end of the file (this is just for testing purposes, and to se if we have integrated TailswindCSS properly):

<div class="text-4xl text-center text-blue-500 bg-red-200 mt-8">TailwindCSS Example Works</div>

Now run

npm start

and you should be able to see 'TailwindCSS Example Works' text styled using TailwindCSS.

Also you can run:

npm run tailwind-watch

from another terminal window, and whenever you modify ./src/tailwind-build.css file build process will be triggered automatically, and fresh ./src/styles-tailwind.css file will be created.

What about that size ~ 787KiB?

If you look closer in postcss.config.js file you will notice that when the env is production purgecss will remove any unused css code from all .html files, and therefore the size of ./src/styles-tailwind.css will be significantly reduced. If you run your code in the production environment:

NODE_ENV=production npm run tailwind-build

you will notice that ./src/styles-tailwind.css is now ~ 9KiB which is nice:

+--------------------------------------------------------------+
| Size         | 8.99 KiB                                      |
|--------------------------------------------------------------|
| Gzipped      | 2.86 KiB                                      |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 13:06:37                  |
+--------------------------------------------------------------+

So make sure that you use this approach when deploying to production.

And that makes the end of this article. I hope you found it useful.
Give TailwindCSS a try, and you will see why it so well accepted by community.

Cheers!