DEV Community: Mauricio Ackermann

How to preview emails with ActionMailer::Preview on Rails

Mauricio Ackermann — Tue, 14 Jul 2020 18:36:17 +0000

We know how it's a pain to test ** e-mails** in our dev environment. Thinking of it, on Rails 4.1, the ActionMailer::Preview was released, making it possible to view e-mails without actually sending them. Let's learn how to use this tool.

First of all, we need to create a new mailer in our project.

rails generate mailer Welcome
Running via Spring preloader in process 5087
      create  app/mailers/welcome_mailer.rb
      invoke  erb
      create    app/views/welcome_mailer
      invoke  test_unit
      create    test/mailers/welcome_mailer_test.rb
      create    test/mailers/previews/welcome_mailer_preview.rb

It's possible to see that Rails created to files inside test filter: test/mailers/welcome_mailer_test.rb and test/mailers/previews/welcome_mailer_preview.rb. In our case, we are going to use test/mailers/previews/welcome_mailer_preview.rb to preview our templates.

Now let's create a method inside WelcomeMailer that will be responsible for sending a welcome message to users that signup in our system, assuming we have a model User with an e-mail attribute. To do that, we need to open the file app/mailers/welcome_mailer.rb

class WelcomeMailer < ApplicationMailer

  def send_welcome_email(user)
    @user = user
    mail({
      to: user.email,
      from: 'eu@mauricioackermann.com.br',
      subject: 'Seja bem-vindo ao sistema Maurício Ackermann'
      })
  end

end

Since WelcomeMailer is inheriting from ApplicationMailer, he will use the mailer default layout

class ApplicationMailer < ActionMailer::Base
  default from: 'from@example.com'
  layout 'mailer'
end

app/layouts/mailer.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      /* Email styles need to be inline */
    </style>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

At last, we need to create an e-mail template. Let's create a file send_welcome_email.html.erb inside the folder app/views/welcome_mailer, which will be our e-mail view.

<p>Hello, <%= @user.name %></p>
<p><strong>Thank you</strong> for registering in our system!</p>

Now that we have our mailer and template done let's test it. All e-mail previews are in test/mailers/previews. Open the file created by our generator, welcome_mailer_preview.html.erb.

class WelcomeMailerPreview < ActionMailer::Preview

  def send_welcome_email
    WelcomeMailer.send_welcome_email(User.new(name: 'Maurício Ackermann', email: 'eu@mauricioackermann.com.br'))
  end

end

Now to visualize the e-mail, we start the server and access the link
http://localhost:3000/rails/mailers/welcome_mailer/send_welcome_email

Did you know about this Rails feature? I hope this post helps you debugging your projects

How and When to use Yarn on Rails?

Mauricio Ackermann — Tue, 14 Jul 2020 06:50:28 +0000

Yarn is a package manager similar to NPM, which runs over NodeJS, created and managed by Facebook, to replace NPM, making the package manager faster, once it parallelizes the packages installation.

The advantage of using it with Rails is that you facilitate the management of CSS and Javascript libraries in your project. Its behaviour is similar to Ruby gems, but in a front-end universe.

On Rails, it's common to search for gems that make more comfortable the use of those libraries in our projects, but we become dependent on updates from their developers. Yarn is the right solution for all these problems.

To install Yarn on Mac, simply run.

brew install yarn

Now let's see how to apply it in our projects.

To start, let's create a new Rails project:

rails new rails-yarn
cd rails-yarn/

And now we start Yarn in our project with the following command:

yarn init

Your bash is going to make a bunch of questions about your project. You don't need to answer any of them if you don't want and you can always change it later in your package.json

yarn init v1.5.1
question name (rails-yarn):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author (Maurício Ackerman):
question license (MIT):
question private (true):
success Saved package.json
✨  Done in 8.22s.

Observe that when the command finishes running, a new file package.json gets created in your root directory. This file is responsible for all your project information, as well as its dependencies.

{
  "name": "rails-yarn",
  "private": true,
  "dependencies": {},
  "version": "1.0.0",
  "main": "index.js",
  "author": "Mauricio Ackermann",
  "license": "MIT"
}

And now we can add dependencies to our project:

$ yarn add jquery
yarn add v1.5.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.6.0", while you're on "1.5.1".
info To upgrade, run the following command:
$ curl -o- -L https://yarnpkg.com/install.sh | bash
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.3.1
info All dependencies
└─ jquery@3.3.1
✨  Done in 0.78s.

Observe that on the third line, it says: info No lockfile found. and on the 8th line, we have the following output: success Saved lockfile.. Yarn uses a file called yarn.lock to save information about all dependencies versions, similar to what we have on our Ruby Gemfile.lock, which assures consistency between all our ho, avoiding different versions on different environments.

Yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


jquery@^3.3.1:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"

Now that we installed the library let's add it to our project. To do so, we need to edit the file app/assets/javascripts/application.js adding jQuery.

//= require jquery

And it's done! Your project has jQuery set up and running, thanks to Yarn. It's essential to add to your .gitignore the node_modules folder to avoid committing all libraries to your git repository.

When you clone a repo, to install the dependencies, you just need to run:

yarn install

What do you think about this alternative to manage your libraries? Simple and fast, not to mention that it is also a best practice. Leave your comments and thoughts about how Yarn may help your project.

In a future post, I will talk about the Webpack in Rails projects, replacing Sprockets.

Apollo Server + Prisma + Mongo - Anyone with this stack?

Mauricio Ackermann — Tue, 31 Dec 2019 01:47:16 +0000

Anyone using this stack? I'm about to start a new GraphQL project with NodeJS and I was thinking of using this stack. Can you please share your experience and thoughts about it?