DEV Community: Alemaño

Introducing RailsbootUI: Rails View Components for Bootstrap

Alemaño — Sun, 01 Sep 2024 20:44:00 +0000

We're super excited to announce the release of RailsbootUI, our take on a complete view component system for Rails. It brings the full power and flexibility of Bootstrap components right into your Rails environment. With RailsbootUI, integrating Bootstrap into your Rails applications has never been easier and should save you a lot of development time. No need to look enviously at all the Javascript UI component systems anymore!

What is RailsbootUI?

In short, RailsbootUI is designed to streamline the process of using Bootstrap components in your Rails applications. Think of it as a pre-built implementation of a design system in Bootstrap - but uniquely for Rails.

For this, RailsbootUI provides a comprehensive set of pre-built, customizable view components. Under the hood, it uses GitHub's excellent ViewComponent system and provides free and professional components - ButtonComponent, AccordionComponent, ProgressComponent, etc. - everything a modern application needs for consistent styling. The components eliminate the need for manual HTML and CSS coding for Bootstrap elements in Rails. This means you can focus more on building functionality and less on mastering the complexities of UI design.

RailsbootUI comes with both free and paid components. The free components basically map to the existing Bootstrap components, while the pro components are usually sets of our own production-proven components that we found missing in the Bootstrap world.

Here's what you get

Having worked on various applications and client needs over the last years, we found that having a design system translated into components is the best way to feel the Rails advantages (speed, consistency, dev-experience, etc.) not only in the backend but in the frontend world as well. Implementing systems like RailsbootUI in our daily work has been a real game changer. It makes the one framework philosophy of Rails more clear than ever. Every developer can work on a feature from start to finish, without being blocked by some frontend hurdle in terms of design or consistency. In marketing speech, this means:

Easy integration: RailsbootUI is designed to integrate seamlessly with your existing Rails application. Whether you're starting a new project or adding it to an existing one, you'll find the setup process quick and easy.
Extensive component library: RailsbootUI includes a wide range of bootstrap components, from basic elements like buttons and forms to complex components like modals and carousels. Each component is designed to be fully customizable to your specific needs.
Responsive Design: Built on the robust frameworks of Bootstrap and View Components, RailsbootUI components look great on any device, whether it's a desktop, tablet, or smartphone.
Consistency and Reusability: By using RailsbootUI's components, you can ensure a consistent look and feel across your entire application. Reusable components mean less code duplication and easier maintenance.
Customization Options: While RailsbootUI components are ready to use out of the box, they are also highly customizable. You can easily adjust the styling and behavior of components to match your application's unique design requirements. It’s still Bootstrap under the hood, so it boils down do Saas variable changes.
Leverage View Components: By using the underlying view_components gem from GitHub, you get a reliable and maintained framework you can built upon. Tweak, change or just copy any of our components and it should work in your Rails app.

Getting Started

Getting started with RailsbootUI is simple. Ensure you have a proper setup of bootstrap and the gem view_component installed in your Railsapp. After that you just simply download zip files of our components and copy & paste them into your app. After doing so you can call a component of your choice, for example:

<%= render Railsboot::BreadcrumbComponent.new do |breadcrumb| %>
  <% breadcrumb.with_item(text: "Item 1", path: "/item/1") %>
  <% breadcrumb.with_item(text: "Item 2", path: "/item/2") %>
  <% breadcrumb.with_item(text: "Item 3", path: "/item/3", active: true) %>
<% end %>

The HTML-Representation would look like this:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Item 1</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Item 2</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Item 3
    </li>
  </ol>
</nav>

If you want to explore our professional components, you can sign up for an account and purchase either a personal or team license. All licenses are one-time purchases, so you get all future components and improvements for free! All our components are copy & paste offerings, so you can twak and adjust all of them jsut as you need.

What’s more to come?

We are of course continuously improving our components. New components, improvments etc. are happening in the background. Feel free to contact us at support@railsbootui.com if you have the need for any special custom component or have any other feedback.

We would like to see a similar selection of professional UI components in Rails that you might know and love from the Javascript world. The front end of Rails is still underrepresented when it comes to building fast and low-maintenance web applications. Hotwire & Co. have laid the foundation for you to build excellent end-to-end applications with Rails and a solid design system without having to resort to React & Co. RailsbootUI should be a contribution to this. We also have other ideas in mind, so expect more to come!

So head on over to RailsbootUI and start exploring our components!

How To Install Docker and Docker-Compose On Raspberry Pi

Alemaño — Fri, 02 Apr 2021 06:07:53 +0000

Prerequisites

Raspberry Pi with a running Raspbian OS
SSH connection enabled

To do this you can check Raspberry Pi Setup.

1. Update and Upgrade

First of all make sure that the system runs the latest version of the software.
Run the command:

sudo apt-get update && sudo apt-get upgrade

2. Install Docker

Now is time to install Docker! Fortunately, Docker provides a handy install script for that, just run:

curl -fsSL test.docker.com -o get-docker.sh && sh get-docker.sh

3. Add a Non-Root User to the Docker Group

By default, only users who have administrative privileges (root users) can run containers. If you are not logged in as the root, one option is to use the sudo prefix.
However, you could also add your non-root user to the Docker group which will allow it to execute docker commands.

The syntax for adding users to the Docker group is:

sudo usermod -aG docker [user_name]

To add the permissions to the current user run:

sudo usermod -aG docker ${USER}

Check it running:

groups ${USER}

Reboot the Raspberry Pi to let the changes take effect.

4. Install Docker-Compose

Using pip:
Docker-Compose usually gets installed using pip3. For that, we need to have python3 and pip3 installed. If you don't have it installed, you can run the following commands:

sudo apt-get install libffi-dev libssl-dev
sudo apt install python3-dev
sudo apt-get install -y python3 python3-pip

Once python3 and pip3 are installed, we can install Docker-Compose using the following command:

sudo pip3 install docker-compose

Using apt:
An easier way is to use apt:

sudo apt install docker-compose

5. Enable the Docker system service to start your containers on boot

This is a very nice and important addition. With the following command you can configure your Raspberry Pi to automatically run the Docker system service, whenever it boots up.

sudo systemctl enable docker

With this in place, containers with a restart policy set to always or unless-stopped will be re-started automatically after a reboot.

6. Run Hello World Container

The best way to test whether Docker has been set up correctly is to run the Hello World container.
To do so, type in the following command:

docker run hello-world

Once it goes through all the steps, the output should inform you that your installation appears to be working correctly.

7. A sample Docker Compose file

This section shows a quick sample of a Docker-Compose file, which starts three containers that once started will automatically come up, if the Raspberry Pi get fully power cycled. To learn more about the sample project, visit Docker Speed Test project on GitHub.

version: '3'
services:
  # Tests the current internet connection speed
  # once per hour and writes the results into an
  # InfluxDB instance
  speedtest:
    image: robinmanuelthiel/speedtest:latest
    restart: always
    environment:
      - LOOP=true
      - LOOP_DELAY=1800
      - DB_SAVE=true
      - DB_HOST=http://influxdb:8086
      - DB_NAME=speedtest
      - DB_USERNAME=admin
      - DB_PASSWORD=password
    privileged: true # Needed for 'sleep' in the loop
    depends_on:
      - influxdb

  # Creates an InfluxDB instance to store the
  # speed test results
  influxdb:
    image: influxdb:1.8.3
    restart: always
    volumes:
      - influxdb:/var/lib/influxdb
    ports:
      - 8083:8083
      - 8086:8086
    environment:
      - INFLUXDB_ADMIN_USER="admin"
      - INFLUXDB_ADMIN_PASSWORD="password"
      - INFLUXDB_DB="speedtest"

  # Displays the results in a Grafana dashborad
  grafana:
    image: grafana/grafana:7.5.2
    restart: always
    ports:
      - 3000:3000
    volumes:
      - grafana:/var/lib/grafana
    depends_on:
      - influxdb

volumes:
  grafana:
  influxdb:

To start the containers using Docker-Compose, run the following command:

docker-compose -f docker-compose.yaml up -d

Find Raspberry Pi Docker Images

Raspberry Pi is based on ARM architecture. Hence, not all Docker images will work on your Raspberry Pi.

Remember that when searching for images to pull from Docker Hub. Apply the Architectures filter to search for supported apps.

How to Upgrade Docker on Raspberry Pi?

Upgrade Docker using the package manager with the command:

sudo apt-get upgrade

How to Uninstall Docker on Raspberry Pi?

You can simply remove docker using the package manager:

sudo apt-get purge docker-ce

Note: Depending on the version of software, you may need to use an additional command to completely remove Docker:

sudo apt-get purge docker-ce-cli

To delete leftover images, containers, volumes and other related data, run the following command:

sudo rm -rf /var/lib/docker

Edited configuration files must be deleted manually.

References

Raspberry Pi Setup

Alemaño — Sat, 27 Mar 2021 18:24:17 +0000

1. Install Operating System on SD Card

The most straight forward way to install any Operating System on your Raspberry Pi is through the official Raspberry Pi Imager. It comes with all the tools needed to prepare and flash an SD card with the Operating System you want to install.

2. Enable SSH access

To enabled SSH we need to add an additional empty file called ssh to the SD card's root directory after is has been flashed with the image.

touch ssh

3. Enable Wifi

To enable Wifi create a file in the root of boot called: wpa_supplicant.conf. Then paste the following into it:

country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
    ssid="NETWORK-NAME"
    psk="NETWORK-PASSWORD"
}

4. Eject the micro SD card

5. Boot the Raspberry Pi

After booting up your device, you can connect to it via SSH by using its IP address.

ssh pi@[Raspberry Pi IP address]

The default username is pi and the standard password is raspberry.

It's highly recommended to change the password on the first connection. You can do this and configure many other useful things in the handy Raspberry Pi Config tool:

sudo raspi-config

6. Update and Upgrade

Start by updating and upgrading the system. This ensures you install the latest version of the software.
Open a terminal window and run the command:

sudo apt-get update && sudo apt-get upgrade

7. Assign the .local Domain to Your Raspberry Pi

If you’re using your Raspberry Pi to host anything on your network, you might want to assign it a .local domain. With this, you’ll immediately be able to access your by a domain rather than remembering its IP address.

If you create a .local address for your Raspberry Pi you’ll be able to access your Pi using a simple web address.

To do this you need to install Avahi Daemon on your Raspberry Pi:

sudo apt-get install avahi-daemon

Once the installation process is complete, you don’t even have to reboot the device. Your Raspberry Pi will begin immediately recognizing local network queries for its hostname (by default “raspberrypi“) at raspberrypi.local.

8. Install git

Sooner or later you will most likely end up needing git, so you can install it now.

sudo apt install git

Disclaimer

This may not be the best way to do it, but it is the way I use and it works for me 😊

This article will be updated as soon as something changes in this process.

If you do something different and you think it is better, do not hesitate to let me know.