Sometimes it's always challenging to integrate a mailing system in Rails API for beginners. In this blog, I'll explain step by step on how to integrate Sendgrid in a Ruby on Rails-React application. The blog is beginner friendly and easy to understand.
Setting up Sendgrid mailing system in Rails has always scared beginners in Rails as they think its a complex process. Just to let you know, there is nothing complex with setting up Sendgrid in Rails application.
There are two ways of setting up Sendgrid email system in a web application, that is using Sendgrid Web API and Sendgrid SMTP Relay. In this blog, I will discuss setting up Sendgrid using Web API which is the most recommended way. Let's begin the journey.
Create a Rails application
Lets begin by creating up our rails application. Use the rails new sendgrid --api to create a API rails application.
Get into the direcory of the rails application using the command cd sendgrid. Genrate a user resource with the username and email as the attributes. Both are strings. The command is rails g resource user username email.
. Run rails db:migrate to run the migrations.
. Start the rails server using the command rails s.
With that done, we shall have our routes, controller, and models already created. Let's go ahead and add some codes in the user controller and user model.
Add Validations in user model
Let's add some validations to make sure the input fields are not empty.
class User < ApplicationRecord
validates :username, presence: true
validates :email, presence: true
end
Add controller actions in user controller
We are done with the user model, let's now modify our user_controller file to create a new user and validate if username or email is empty. Head to the controllers folder and edit the user_controller.rb file. Let's first create our index method that we shall use to test our API to see if we have our data in properly stored. Edit the userController class to look this this way
class UsersController < ApplicationController
# Get all users
def index
users= User.all
render json: users
end
end
Let's add a create method to add a user to the database
# Create a user
def create
@user = User.create!(user_params)
render json: {body: @user, message: "User created successfully"}, status: :created
end
We need to create two private methods, one for permitting user parameters and the other for validating user input.
# Private methods
private
def user_params
params.permit(:username, :email)
end
# Invalid entity response
def invalid_entry(invalid)
render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity
end
Then add a rescue for the invalid user entity at the top of the class
rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry
Our user controller class should be looking similar to this at the moment
class UsersController < ApplicationController
rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry
# Get all users
def index
users= User.all
render json: users
end
# Create a user
def create
@user = User.create!(user_params)
render json: {body: @user, message: "User created successfully"}, status: :created
end
# Private methods
private
def user_params
params.permit(:username, :email)
end
# Invalid entity response
def invalid_entry(invalid)
render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity
end
end
Let's have our user controller looking that way at the moment. We shall come back to edit it when setting up Sendgrid.
Next, let's add CORS by uncommenting the code in cors.rb in initializers folder in config directory. The code in cors.rb should look like this
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins "*"
resource "*",
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
To make sure our cors configuration is working, we need to uncomment the cors gem in gem file and the run bundle install to install the necessary dependencies. Restart the rails server.
Test APIs using postman
We need to test our APIs and see if they are working perfectly. Open postman and try creating a new user using the post method, and then get all the users created using the get method.
- Create a user
- Get all users
Okay, our API endpoints are working fine.
Now, let's get our front-end working
Create React App
The next step is creating a react application with a user simple user signup page. Let's begin by creating our react application. Use the command npx create-react-app client to create a react app called client 
. Get in the react app directory using the command cd client and run npm start to run the react application.
Create a sign up page
Create a Signup.js file in the clients src folder. Create a functional component called Signup and add the following code in it.
import React from 'react'
function Signup() {
return (
<div style={{width: "300px", marginLeft: "auto", marginRight: "auto"}}>
<h2>User Signup</h2>
<form style={{display: "flex", flexDirection: "column"}}>
<label htmlFor='username'>Username:</label>
<input type={'text'} id= "username" name='username' /><br/>
<label htmlFor='email'>Email:</label>
<input type={'text'} id= "email" name='email' /><br/>
<button type='submit'>Submit</button>
</form>
</div>
)
}
export default Signup
Edit the App.js with the following code
import './App.css';
import Signup from './Signup';
function App() {
return (
<div className="App">
<Signup />
</div>
);
}
export default App;
Add the functionalities on Signup.js to enable the form to send data to the server using the API endpoint.
import React, { useState } from 'react'
function Signup() {
const [data, setData] = useState({
username: '',
email: '',
})
const [errors, setErrors] = useState([])
const [message, setMessage] = useState('')
const [success, setSuccess] = useState(false)
function handleChange(e){
let name = e.target.name
let value = e.target.value
setData({...data, [name]: value})
}
// POST user data
function handleSubmit(e){
e.preventDefault()
fetch('http://localhost:3000/users',{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).then(res=>{
if(res.ok){
res.json().then(user=>{
setMessage(user.message)
setSuccess(true)
})
}else{
res.json().then(err=>setErrors(err.errors))
}
})
}
return (
<div style={{width: "300px", marginLeft: "auto", marginRight: "auto"}}>
<h2>User Signup</h2>
{success? <h3 style={{color: "green"}}>{message}</h3>:
<div>
{errors.map(err=><p key={err} style={{color: "red"}}>{err}</p>)}
</div>}
<form style={{display: "flex", flexDirection: "column"}} onSubmit={handleSubmit}>
<label htmlFor='username'>Username:</label>
<input type={'text'} id= "username" name='username' onChange={handleChange} /><br/>
<label htmlFor='email'>Email:</label>
<input type={'text'} id= "email" name='email' onChange={handleChange}/><br/>
<button type='submit'>Submit</button>
</form>
</div>
)
}
export default Signup
Set up sendgrid
First, you need to create an account with sendgrid. Fill in all the details required while setting the account. Wait for your account to be verified. NOTE: Any user can create the account even if you don't have a company or organization. Once your account has been verified and you can view your dashboard, on the left menu, click on email API and the Integration guide. Your dashboard will display two options for email set up. Use Web API and click choose to select it.
.
Next, select Ruby as your language
Enter the name of your API key and click create API to create the key. Follow the instructions on creating the environment variable that shall store the API key. Create the environment variable in the root of your rails application. echo "export SENDGRID_API_KEY='YOUR API KEY'" > sendgrid.env
Add the file to the git ignore so that it is not sent to your github account. This is done to avoid exposing your API key which on exposure, may lead to suspension of your Sendgrid account. echo "sendgrid.env" >> .gitignore
Set the source source ./sendgrid.env. We will later move this API key to a credentials.yml.enc to keep it safe for use.
Next, add the sendgrid gem, gem 'sendgrid-ruby' to the gem file and run bundler or bundle install to install the dependencies. Restart the rails server. Copy the code given under send your first email into a ruby file in your application. Replace the sample details given with your details and then try and run the file separately on the terminal using the command, ruby filename.rb. You will get an email sent to the "to" email. The next step is just moving the code to a class and reusing the class where necessary.
Add the API key into the credentials.yml.enc file
We have come a long way and we are almost there, hang in tight, don't let go. The credentials.yml.enc file (Located in the config directory) is encrypted and therefore cannot be edited directly. To edit the file, type the following command on the terminal EDITOR="code --wait" rails credentials:edit. Code basically represents the code editor you are using. I'm using VS code thus setting the editor to code. You can read more about editing this file on rails Custom Credentials or stackoverflow. When the file opens on your code edit in the edit mode, add the sendgrid API key as follows: sendgrid: YOUR API KEY. The API key should not be in quotes. Save and exit from the file to save changes.
Create the email_service.rb file
I'll have the email file created in a services folder in the apps folder. Create services folder and add in an email_service.rb file. Create a class matching the file name as it is a convention in ruby. in the class, create a class method called class and pass in the parameters; from, to, subject, and content. Then copy the code from sendgrid and edit it as follows. Your class should look like this.
require 'sendgrid-ruby'
include SendGrid
class EmailService
def self.call from:, to:, subject:, content:
from = Email.new(email: from)
to = Email.new(email: to)
subject = subject
content = Content.new(type: 'text/plain', value: content)
mail = SendGrid::Mail.new(from, subject, to, content)
sg = SendGrid::API.new(api_key: Rails.application.credentials.sendgrid)
response = sg.client.mail._('send').post(request_body: mail.to_json)
puts response.status_code
puts response.body
puts response.headers
puts Rails.application.credentials.sendgrid
end
end
Note the following changes from the code
- This code has been changed to get the API key set in the credentials.yml.enc file
sg = SendGrid::API.new(api_key: Rails.application.credentials.sendgrid) - The code on
mail = SendGrid::Mail.new(from, subject, to, content)may slightly look different from the one provided on sendgrid account. The code from sendgrid looks like thismail = Mail.new(from, subject, to, content). I made the changes since the code from sendgrid, when I moved it to the class, it was showing an error about missing parameters. Changing the code to look as the one above solved the problem. Edit the user_controller to send mail on user signup The last step, edit the user controller by adding the email service. We are using the EmailService class to send the email. We call thecallclass method of EmailService on the class and pass in the arguments. Edit the code in the create method to look as follows.
def create
@user = User.create!(user_params)
@from = "useyouremail@gmail.com"
@subject = "New User Account"
@content = "Thank you for registering with us #{@user.username}. Your account has been created successfully"
EmailService.call(from: @from, to: @user.email, subject: @subject, content: @content)
render json: {body: @user, message: "User created successfully"}, status: :created
end
Your UserController class should look like the one below
class UsersController < ApplicationController
rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry
# Get all users
def index
users= User.all
render json: users
end
# Create a user
def create
@user = User.create!(user_params)
@from = "useyouremail@gmail.com"
@subject = "New User Account"
@content = "Thank you for registering with us #{@user.username}. Your account has been created successfully"
EmailService.call(from: @from, to: @user.email, subject: @subject, content: @content)
render json: {body: @user, message: "User created successfully"}, status: :created
end
# Private methods
private
def user_params
params.permit(:username, :email)
end
# Invalid entity response
def invalid_entry(invalid)
render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity
end
end
Try and register a user with a valid email and check the rails server if the status printed on the terminal is 200s, which means an email has been sent successfully.
User Signup
Signup email sent
Github repo link
That's it, bye and Happy Coding!
Top comments (0)