DEV Community: Michelle Loh

Upgrade Rails 6 to Rails 7 and install Bootstrap v5

Michelle Loh — Mon, 02 May 2022 06:00:59 +0000

Let's first upgrade Rails to v7

Upgrade Rails to v7

// In Gemfile

gem 'rails', '~> 7.0.0' # Change to this

// In the terminal

$ bundle update

Upgrade rails packages

In package.json, update all rails packages

$ yarn upgrade @rails/actioncable --latest
$ yarn upgrade @rails/activestorage --latest
$ yarn upgrade @rails/ujs --latest
$ yarn upgrade @rails/webpacker --latest

Run update rails task

// In terminal

$ bin/rails app:update

Verify framework defaults

// In config/application.rb

# old
config.load_defaults 6.1 # Change to 7.0

# new
config.load_defaults 7.0 # After change to 7.0

If you encountered this error

PG::UndefinedTable: ERROR: relation "active_storage_blobs" does not exist

Then do the following:

// In terminal

$ rails active_storage:install

It will create a create_active_storage_tables.active_storage.rb file in db/migrate, then

// In terminal

$ rails db:migrate

Then, go back to Verify framework defaults section, and proceed.
Read this stackoverflow solution

Now, we will proceed to install bootstrap v5.

Install `bootstrap` and `popperjs/core` to dependencies

// In terminal

$ yarn add bootstrap and popperjs/core

So, your package.json file should have these 2 lines added:

"dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3"
}

Note: The versions here might be different but since our purpose is to install bootstrap v5, it must be something similar to 5.x.x.

Change `extract_css` in `default` to `true`

// In config/webpacker.yml

default: &default
  extract_css: true # Change to true

Change `stylesheet_link_tag` to `stylesheet_pack_tag`

Since the original app is still with config of Rails v6, we would use Webpacker instead of Sprockets/Asset Pipeline

// In app/views/layouts/<filename>.html.erb
// My <filename> is application, so in app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> # Change this
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Then, it should look like this:

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> # After changing
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Note: The 'application' is your <filename>

Import bootstrap in `app/javascript`

In app/javascript create a folder stylesheets and create application.scss in the stylesheets folder

// The file structure should look like this
// Note application.scss can be changed to <filename.scss>
app
 |_ javascript
     |_ stylesheets
         |_ application.scss

Then, import the bootstrap in the file

// In app/javascript/stylesheets/application.scss

@import "bootstrap"

Then, put the following code in the bottom of the app/javascript/packs/application.js file

// In app/javascript/packs/application.js

import "bootstrap"
import "../stylesheets/application"

// Remember to change it to <filename>

Now, let's do testing

In app/views/layouts/application.html.erb, put the following code in your <body> tag and before the <%= yield %> tag.

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <%= yield %>
</body>

Check whether the navbar (dropdown etc) is working.

Cheers~ Happy Coding!

Ruby on Rails: Switch From sqlite3 to Postgres using asdf

Michelle Loh — Thu, 03 Mar 2022 07:45:31 +0000

This article will be using asdf to install postgres and then refer to the article Ruby on Rails: Switch From sqlite3 to Postgres by Brenden Thornton to switch from sqlite3 to Postgres in Ruby on Rails.

Install required libraries in Ubuntu

sudo apt-get install build-essential libssl-dev libreadline-dev zlib1g-dev libcurl4-openssl-dev uuid-dev

If you have not installed asdf, kindly checkout Install asdf (ruby, nodejs and yarn) in WSL2 to install asdf, else just follow the following steps:

Add postgres plugin

$ asdf plugin add postgres

Install postgres

asdf install postgres latest

Then, check the version installed (the versions mentioned here is the latest version I downloaded)

$ asdf list
postgres
  14.2

Add to your shell

asdf shell postgres 14.2

Add to global

asdf global postgres 14.2

Start postgres

pg_ctl start

The rest refer Ruby on Rails: Switch From sqlite3 to Postgres from Update Gemfile to the end of the article.

NOTE:

For replacing sqlite3 to postgres in database.yml configuration, remember to switch the database and username to your database name and your username (check the code below with []). You can checkout GitHub on the configuration of database.yml. Note that the [database_name] should be different for different environment.

development:
  <<: *default
  database: [database_name_dev]

test:
  <<: *default
  database: [database_name_test]

production:
  <<: *default
  database: [database_name_prod]

I use

rake db:create:all

instead of

rake db:setup

to create database since I also want to create production database. By default, rake db:setup will not create production database even though we have mentioned production in the database.yml. Checkout Stackoverflow to understand the differences of some of the commands.

rake db:create creates the database for that particular environment (either is development, test or production) but rake db:create:all creates the databases for all these 3 environments.
Remember to separate development database, test database and production database with different names!
Check out "Run" and "Stop" to run and stop postgres in asdf-postgres documentation

Cheers~ Happy Coding!

Install wsl2(GUI), asdf, dart, flutter, and android studio

Michelle Loh — Tue, 05 Oct 2021 03:16:33 +0000

Install VMware Workstation Player and Ubuntu

Download here: VMware Workstation Player
Note that I download the 16.0 version (you may choose to download the latest version)
Follow video: Install Ubuntu 20.04 LTS on VMware Workstation Player (whole video)

Update Software Updater

You can directly click the software updater icon (it will automatically check for updates)

Restart VMware

Install Visual Studio Code

In Ubuntu Software, install VSCode

Setup in VSCode

After installation, open up VSCode, download plugins for Flutter and Dart
Restart VSCode

Install Android Studio

In Ubuntu Software, install Android Studio
Open Android Studio, finish installation according to recommendation settings (you may customise the settings)

Setup in Android Studio

After installation, open up Android Studio, on your left, click Plugins and search for Flutter
When install Flutter plugins, Android Studio will ask to install Dart, allow it to install Dart
Restart Android Studio by clicking Restart IDE after installation

Install asdf

Open Linux terminal (Ctrl + Alt + T)
In your terminal, type code . to open up VSCode
Close Linux terminal and open another terminal in VSCode
Download package information from all configured sources by typing the following code ```

$ sudo apt-get update

- Follow the documentation in [asdf virtual manager Documentation](http://asdf-vm.com/) to install `asdf`

$ sudo apt install curl git
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1

- Add the following lines at the end of `.bashrc` file

. $HOME/.asdf/asdf.sh
. $HOME/.asdf/completions/asdf.bash

- Save the `.bashrc` file and close the file
- Call `code ~/.bashrc` in your terminal to double check whether the lines is saved

---

## Close and refresh terminal
- Close your terminal by clicking the rubbish bin icon
- Reopen the terminal

---

## Install flutter and dart using asdf
- Install flutter and dart plugins

$ asdf plugin add flutter
$ asdf plugin add dart

- List all flutter and dart versions

$ asdf list all flutter
$ asdf list all dart

(The picture below shows the all the flutter versions)
![Flutter-versions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dmumugu4b548jlsa1rg.png)
- Install dart and the flutter stable version (mine here is 2.5.2-stable)

$ asdf install flutter 2.5.2-stable
$ asdf install dart 2.14.3

- After installation, put the versions in global

$ asdf global flutter 2.5.2-stable
$ asdf global dart 2.14.3

- Open flutter doctor to check

$ flutter doctor

![CMD-line-missing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfe7geg2hsd44u6x5tcp.png)

---

## Fix cmdline-tools component is missing
- Follow video: [Fix-missing-cmdline-tools](https://www.youtube.com/watch?v=XHZ1CyIBKD8&list=PLW1T-ydybWi4pW7Tg9KNHWvsyC_j5RS_p&index=5)
- Check again using `flutter doctor`
![flutter-license](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw4f0q3m5ur6brajgkh0.png)

## Support license
- Agree the license

$ flutter doctor --android-licenses

- Check again using `flutter doctor`
![All-done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk93fdka0wrxxo9djgp5.png)

---

## Copy the installed PATH
- Find where flutter and dart are installed

$ asdf where flutter
$ asdf where dart

- Remember the following lines(or copy them to a text file)

/home/[user]/.asdf/installs/flutter/2.5.2-stable
/home/[user]/.asdf/installs/dart/2.14.3

NOTE: the [user] above is refer to the user name in Linux

---

## Export Flutter PATH in VSCode
- Open the Command Palette in VSCode (Ctrl + Shift + P)
- Type out the `Flutter: New Project`
![Command-Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79fhijle4blnarn50d60.png)
- It will show `Could not find a Flutter SDK`
![Flutter-SDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa3471t9b1jvbkzlfk6f.png)
- Select `Locate SDK`
- Go to `home > [user]`
- List out the hidden files `Ctrl + H`
- Go to `asdf > installs > flutter`
- Select `2.5.2-stable` as SDK (note that my version file may differ from yours)

---

## Export Dart PATH in VSCode
- Open the Command Palette in VSCode (Ctrl + Shift + P)
- Type out the `Dart: New Project`
- It will show `Could not find a Dart SDK`
- Select `Locate SDK`
- Go to `home > [user]`
- List out the hidden files `Ctrl + H`
- Go to `asdf > installs > dart`
- Select `2.14.3` as SDK (note that my version file may differ from yours)

---

## Export PATH in Android Studio
- Open your Android Studio
- Go to `Customize > All Settings`
![Customize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry7tex830ie9j8i6065l.png)
- Go to `Appearance > Path Variables` and Click the `+` icon
![PATH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8tcy3zos2og16ibe6qg.png)
- Set the PATH Variables (You can refer the picture below)

For Flutter

Name: FLUTTER_SDK
Value: /home/[user]/.asdf/installs/flutter/2.5.2-stable

For Dart

Name: DART_SDK
Value: /home/[user]/.asdf/installs/dart/2.14.3

![lIKE-THIS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlk1spel1ovdfx29byih.png)
- Finally, click `OK` and `OK`

---

## Refresh VSCode and Android Studio
- Close your VSCode and Android Studio
- Open VSCode and Android Studio
- Now, you are good to go😉

Install asdf (ruby, nodejs and yarn) in WSL2

Michelle Loh — Mon, 30 Aug 2021 10:03:10 +0000

What is WSL2

Read Microsoft WSL2 Documentation

What is asdf

Read asdf virtual manager Documentation

Install WSL2

Video Reference: WSL 2: Getting started (Watch from Overview until PowerShell Commands (0:00 - 8.23))

Before installing asdf

In your Ubuntu, type code . to open up Visual Studio Code (VS Code)
Open your terminal in VS Code
In your terminal, it should be in already be Linux not Windows (You are in Windows if you have something like PS C:\Users\>), go to linux by typing wsl

$ PS C:\Users\>wsl

# Go to root directory
$ <user_name>: cd /

Do the following to get dependencies for wsl2 (else you might get the error when install ruby: BUILD FAILED (Ubuntu 20.04 using ruby-build 20210804))

For more information related to solving this problem: read here

$ sudo apt-get update
$ sudo apt install autoconf bison build-essential libssl-dev libyaml-dev libreadline-dev zlib1g-dev libncurses-dev libffi-dev libgdbm-dev

Install asdf

Follow the documentation of in asdf virtual manager Documentation

$ sudo apt install curl git
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.8.1

Add . $HOME/.asdf/asdf.sh and . $HOME/.asdf/completions/asdf.bash in the end of .bashrc file
Call code ~/.bashrc in your terminal

Close and refresh terminal

Close your terminal by clicking the rubbish bin icon
Reopen the terminal

Add plugins

$ asdf plugin add ruby
$ asdf plugin add nodejs
$ asdf plugin add yarn

Install language

Install ruby, nodejs and yarn latest version (or you can specify the version needed)

$ asdf install ruby latest
$ asdf install nodejs latest
$ asdf install yarn latest

Check the version installed (the versions mentioned here is the latest version I downloaded)

$ asdf list
nodejs
  16.8.0
ruby
  3.0.2
yarn
  1.22.11

Add to your shell

$ asdf shell ruby 3.0.2
$ asdf shell nodejs 16.8.0
$ asdf shell yarn 1.22.11

Add to global

$ asdf global ruby 3.0.2
$ asdf global nodejs 16.8.0
$ asdf global yarn 1.22.11

Install gems

Check where is languages installed

$ type -a ruby
ruby is /home/<user>/.asdf/shims/ruby

$ type -a node
node is /home/<user>/.asdf/shims/node

$ type -a yarn
yarn is /home/<user>/.asdf/shims/yarn
yarn is /mnt/c/Program Files (x86)/Yarn/bin/yarn

Check which ruby and gems your directory is referring to (in case you have more than 1 ruby version installed)

$ which ruby
/home/<user>/.asdf/shims/ruby

$ which gem
/home/<user>/.asdf/shims/gem

If not in .asdf/shims, do asdf reshim ruby 3.0.2 (specify the version yourself, mine here is 3.0.2)
Install gems

$ gem install rails

The rest can follow Installing Ruby on Rails Using asdf (starting 5:24)

DEV Community: Michelle Loh

Upgrade Rails 6 to Rails 7 and install Bootstrap v5

Upgrade Rails to v7

Upgrade rails packages

Run update rails task

Verify framework defaults

Install bootstrap and popperjs/core to dependencies

Change extract_css in default to true

Change stylesheet_link_tag to stylesheet_pack_tag

Import bootstrap in app/javascript

Now, let's do testing

Cheers~ Happy Coding!

Ruby on Rails: Switch From sqlite3 to Postgres using asdf

Install required libraries in Ubuntu

Add postgres plugin

Install postgres

Start postgres

Install wsl2(GUI), asdf, dart, flutter, and android studio

Install VMware Workstation Player and Ubuntu

Update Software Updater

Restart VMware

Install Visual Studio Code

Setup in VSCode

Install Android Studio

Setup in Android Studio

Install asdf

For Flutter

For Dart

Install asdf (ruby, nodejs and yarn) in WSL2

What is WSL2

What is asdf

Install WSL2

Before installing asdf

Install asdf

Close and refresh terminal

Add plugins

Install language

Install gems

References

Install `bootstrap` and `popperjs/core` to dependencies

Change `extract_css` in `default` to `true`

Change `stylesheet_link_tag` to `stylesheet_pack_tag`

Import bootstrap in `app/javascript`