Ready System with a Modern Stack and Many Features Using Ruby 3.2, Rails 7.0 and Avo 2
Tags: ruby, rails, avo, tailwindcss
Published: 2023-09-18 00:50:59

Avo is much more than an admin panel, and you don't need to spend a lot of time understanding that. Built on top of Ruby on Rails, one of the most productive languages ​​and frameworks, it has a modern stack using Tailwind CSS, [Turbo](https://github.com/hotwired/turbo) and [Stimulus JS](https://github.com/hotwired/stimulus). Better to leave the Avo overview for a next post.

If you still don't know Avo, you should at least appreciate all the care they took to deliver an interface that, in my opinion, is very good, guaranteeing a better experience for users.

So let's download from GitHub and run locally a system with many of its features.

TL;DR:
1. Get a Avo 2 Pro trial license;
2. Ruby 3.2 language and the Rails 7.0 framework installed;
3. Download the Avo demo from GitHub;
4. Configure to access PostgreSQL;
5. Change the Gemfile to use the latest Ruby 3.2;
6. Enter Avo license
7. Install packages and dependencies;
8. Build CSS assets;
9. Create and initialize the database;
10. Start the Rails server;
11. Ready, browse to your heart's content;

## 1. Get a Avo 2 trial license
Avo, in addition to the community version, has other types of licensing. To have broad access to the features, we will use an Avo 2 Pro trial license.

Access the [Avo](https://avohq.io/), and click on `Sign Up`. After completing registration, click on your `profile icon` and select `Subscriptions`, then `Choose a plan`, choose the `Pro` version and click on `Start 30 day trial`. The system URL is not required, click `Subscribe`. Now you will have your key to use the Avo 2 Pro version for 30 days.

![Avo Licenses](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g33uqihy2bn3bb94ol3d.png)

## 2. Ruby 3.2 language and the Rails 7.0 framework installed
You probably installed Ruby with asdf, Rbenv or RVM. Check if you have ruby ​​and rails installed:

```
$ ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) +YJIT [x86_64-linux]
$ rails -v
Rails 7.0.8
```

## 3. Download the Avo demo from GitHub
Avo 3 is in the final testing phase for release, but in this tutorial we will use the latest stable version of Avo 2 compatible with the repository [demo](https://github.com/avo-hq/main.avodemo.com). Download the `pre-avo-3` branch to your Ruby on Rails project folder.

```
$ git clone -b pre-avo-3 https://github.com/avo-hq/main.avodemo.com
Cloning into 'main.avodemo.com'...
remote: Enumerating objects: 2540, done.
remote: Counting objects: 100% (682/682), done.
remote: Compressing objects: 100% (290/290), done.
remote: Total 2540 (delta 495), reused 503 (delta 388), pack-reused 1858
Receiving objects: 100% (2540/2540), 7.92 MiB | 1.65 MiB/s, done.
Resolving deltas: 100% (1463/1463), done.
```

## 4. Configure to access PostgreSQL

Go to the main.avodemo.com project folder.

```
$ cd main.avodemo.com
```


Open the project in your favorite editor or IDE.

```
$ code .
```

The Avo 2 demo uses features that are not supported in SQLite3, so we need to configure PostgreSQL username, password and other necessary parameters in the `config/database.yml` file. Don't forget to configure it for development and test environments, or configure it on default for all environments.

Save Changes.

If you have not yet used PostgreSQL from within a Ruby on Rails application, you will need to install the `libpq-dev` package, required by the pg gem.

```
$ sudo apt install libpq-dev
```


## 5. Change the Gemfile to use the latest Ruby 3.2
Open the Gemfile and update the file to match the latest version of Ruby 3.2 installed on your machine. 

```
ruby "3.2.2"
```

Save Changes.

## 6. Enter Avo license

Edit the `config/initializers/avo.rb` file
and check if the `pro` license type is defined and if the key code obtained in step 1 was inserted or passed as an environment variable.

```
config.license = 'pro'
config.license_key = 'dd8....586b'
```

In your case, you will put the full key in the file or environment variable.

## 7. Install packages and dependencies

All commands from here onwards must be executed in the project root directory.

```
$ bundle install
Using rake 13.0.6
Using concurrent-ruby 1.2.0
Using i18n 1.12.0
(... many packages ...)
```

## 8. Build CSS assets

```
$ rails tailwindcss:build
(...)

Done in 501ms.
```

## 9. Create and initialize the database

```
$ rails db:setup --trace
** Invoke db:setup (first_time)
** Invoke db:create (first_time)
** Invoke db:load_config (first_time)
** Invoke environment (first_time)
** Execute environment
** Execute db:load_config
** Execute db:create
Created database 'avodemo_development'
Created database 'avodemo_test'
** Invoke environment 
** Invoke db:schema:load (first_time)
** Invoke db:load_config 
** Invoke db:check_protected_environments (first_time)
** Invoke db:load_config 
** Execute db:check_protected_environments
** Execute db:schema:load
** Invoke db:seed (first_time)
** Invoke db:load_config 
** Execute db:seed
** Invoke db:abort_if_pending_migrations (first_time)
** Invoke db:load_config 
** Execute db:abort_if_pending_migrations
** Execute db:setup
```

Note that the `rails db:migrate` command will not work. If necessary, drop the database with `rails db:drop` and run `rails db:setup` again.

## 10. Start the Rails server

You are ready to start your Rails server. Note that the Avo 2 demo was configured to use port `3020`, rather than the default port 3000.

```
$ rails server
=> Booting Puma
=> Rails 7.0.4 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.4 (ruby 3.2.2-p53) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 246413
* Listening on http://127.0.0.1:3020
* Listening on http://[::1]:3020
Use Ctrl-C to stop


```
## 11. Ready, browse to your heart's content

If the Avo 2 Pro license key was not entered correctly, you will be informed after authenticating in the system.

![Authentication screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ng78vps562566vv5znvp.png)



![Inside Avo, on the dashboard screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozma727n5hxu7pqjb0lg.png)