Are you starting a new project and need a dedicated backend API to persist data? Look no further; this guide should lead you in the right direction.

0. Planning out Domain Model and Associations

When starting a new project, it is always important to plan out your domain model and associations first. Refer to the following chart for drawing out your model associations.

In this guide, we will be building a simple API for a library application using the following domain model:

The association between the two models is drawn out above using the “Crow’s Foot” notation.

An author has_many books. A book belongs_to an author.

1. Initializing Rails API

In your terminal, use the following command below to initialize a new Rails API.

Template:

$ rails new <API NAME> --api --database=postgresql

Example:

$ rails new library-api --api --database=postgresql

The --api flag tells Rails to initialize a new application without the bloat and middleware that is not necessary in an API application.

The --database= flag specifies to Rails what database we will be using. In this case, we will be using PostgreSQL as it is Heroku’s standard database if you plan on deploying your API onto Heroku.

Without specifying a database type, Rails will use SQLite by default.

Remember to change the directory into the root folder of your newly initialized API and run $ bundle to install your dependencies.

2. Models

Once Rails finishes initializing our API, use the following command to generate our models for our API and tables for our database.

Template:

$ rails generate model <MODEL NAME> <COLUMNS>

Generating the Author Model

In our example, we created a model and migration for our Author table consisting of two columns (name and bio) with type string.

Example:

$ rails generate model Author name:string bio:string

We can shorten the generate command by using the following rules:

• If the column type is a string, we can omit :string as Rails will set each column type to string by default if not specified.
• Shorten rails generate model to rails g model.

Example (shortened):

$ rails g model Author name bio

Generating the Book Model

Based on our domain model, an Author has many Books and a Book belongs to an Author. In order for our database to acknowledge the association between Book and Author, we can add a new column using the name of the model we’re trying to link to and set the column type to :belongs_to.

Example:

$ rails g model Book title pages:integer author:belongs_to

Setting the column type as :belongs_to will tell Rails to automatically:

• Create an author_id column in the Book table that will store the Author’s ID as a foreign key.
• Add the belongs_to association to the Book model.

Add Associations to Models

Although Rails may have already set up the association between Book to Author during the Book model generation, we still need to manually set up the association from our Author to Book model.

In our app/models/author.rb file, add the association has_many :books.

Note: When adding a has_many association, remember to pluralize the model.

Add Validations to Models

To prevent invalid data from being saved to our database, we can set up validators for our models.

3. Starting the Database

In order to start the database, we will need to create the database and migrate our changes to update the schema.

$ rails db:create
$ rails db:migrate

Confirm your migrations have taken place by checking the schema in db/schema.rb. If you find that you are missing a column in one of your tables, do not manually change the schema.rb as it can break your app.

Generating a Migration

Missing a column in one of the tables? We can generate a migration to add a column to our table.

Note: Remember to pluralize the table name to match database conventions.

Template:

$ rails g migration add_<COLUMN>_to_<TABLE NAME> <COLUMN>:<TYPE>

Example:

$ rails g migration add_genre_to_books genre:string

After generating your migration, simply run $ rails db:migrate to migrate any changes.

4. Controllers

Now that we have set up our database, we will need a way for the API to access the data. To do this, we will need to set up controllers.

Generating Controllers

Housing all the methods and actions, our controllers will act as the “control” for our collections as the name implies.

Note: The controller name should be plural as it contains all the methods for the collection.

Template:

$ rails g controller <CONTROLLER NAME>

Example:

$ rails g controller Authors
$ rails g controller Books

Adding Actions to Controllers

After generating our controllers, we need to populate the controllers with actions we would like our API to perform.

Following RESTful architecture and CRUD conventions, we can use the chart above as a reference for common actions we’d like in our API.

Note: This does not limit us from creating our own custom actions. We will just need to do a little bit more configuring in our routes if you decide to add a custom action.

5. Routes

When setting up routes, we are basically setting up the APIs endpoints or URLs that will dispatch a certain action to return a response.

Resource Routing

If we followed the naming conventions that Rails like when setting up our controller actions, we can take advantage of Rails resource routing. Navigate to config/routes.rb and add resources <CONTROLLER NAME> to your routes.

Custom Routing

If you added a custom action to your controller and wanted to dispatch that action to a custom route, we can use the following template.

Template:

<HTTP VERB> '<PATH>', to: '<CONTROLLER>#<ACTION>'

Example:

get 'custom/path', to: 'authors#index'

6. Test the API

Now that we have our routes set up, we want to make sure our routes are working properly. However, our database currently does not have any data to send back yet. We need to seed our database first.

Seed Database

Navigate to db/seeds.rb, add some seed data and run $ rails db:seed.

Starting the Server

Once your database is seeded, start the server by running $ rails s in your terminal. By default, your Rails server should start on port 3000. If you want to use a different port, you can add the -p <PORT NUMBER> flag to specify which port you want your server to run on.

Example:

$ rails s -p 3000

Test Endpoints

Once the server is running, we can check the authors route by navigating to http://localhost:3000/authors in our browser.

Note: Keep in mind, our browsers are only able to perform GET requests. If you want to test out other requests, I recommend using Postman.

This is great that we are getting a response, but where are the books we seeded? This brings us to our next topic, Serializers.

7. Serializers

Serializers allow us to format our data in a way that is easy for developers like us to use. Perhaps, there are some things we want to omit to send back such as passwords or pointless metadata.

Installation

We will be using the ActiveModelSerializer gem. Navigate to your Gemfile and add gem 'active_model_serializers' as a dependency. Then run $ bundle to install all dependencies.

Generate Serializer

Once ActiveModelSerializer is installed, we are given access to a new generate command.

Template:

rails g serializer <MODEL NAME>

Example:

rails g serializer author
rails g serializer book

Serialize your Data

Navigate to your serializers located in app/serializers directory and add or remove attributes that you’d want in your JSON response.

Now that you have set up your serializers, start up your server again and check out your API’s JSON responses. That looks clean!

Conclusion

Hopefully, this guide gave you a clear understanding of how to start your own Rails API. Being able to build your own API definitely has it’s perks and opens up a lot of opportunities for awesome project ideas.

How to Create a Rails Backend API was originally published in Geek Culture on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever wondered how some websites are able to stream real-time sports data or how users are able to receive messages almost as instantly as soon as they were sent?

In this tutorial, we’ll go over how to utilize WebSockets via Action Cable in a React frontend and Rails backend simple chat web application for real-time communication between multiple clients.

1. Initial Setup

Rails Backend

After initializing your new rails application, enable the redis gem in your Gemfile and add the following route to your routes.rb file.

# rails-backend/config/routes.rb 

mount ActionCable.server => '/cable'

Remember to run $ bundle install after enabling redis.

React Frontend

Next we will need to install Action Cable on our React frontend.

$ npm install @rails/actioncable

Create a separate JavaScript file that will be responsible for handling and creating the initial WebSocket connection to your Rails backend.

$ touch ./src/cable.js

Import createConsumer from the Action Cable library. Assuming your Rails server is running on port 3000, fill in the following.

// react-frontend/src/cable.js

import { createConsumer } from '@rails/actioncable';

const URL = 'ws://localhost:3000/cable';
const consumer = createConsumer(URL);
 
export default consumer;

Notice for the URL, we’re not using http anymore; instead, we’re using ws which stands for WebSocket. This creates an open connection between the consumer and the server that will allow them to receive any message(s) broadcasted as long as they are subscribed or connected.

Import consumer to the React component where you want the connection to be present. In this example, we’ll be displaying our messages to a React component called ChatBox.

// react-frontend/src/ChatBox.js

import React from 'react';
import consumer from './src/cable';

export default class ChatBox extends React.Component {

   . . .

};

2. Initialize Channels

Rails Backend

In our Rails backend server, we will need to initialize channels for our consumers/subscribers to connect to. In your terminal, use the following command to generate a channel. In this example, we’ll be creating a channel called chat.

$ rails generate channel chat

This will generate the following in your Rails directory.

# rails-backend/app/channels/application_cable/chat_channel.rb

class ChatChannel < ApplicationCable::Channel

  def subscribed
  end

  def unsubscribed
  end

end

3. Create Subscriptions

React Frontend

Now that the channels have been created, our clients or subscribers will need a way to connect to that channel. In the previous React Component where consumer was imported, add the following for creating subscriptions.

// react-frontend/src/ChatBox.js

export default class ChatBox extends React.Component {

  componentDidMount() {
    consumer.subscriptions.create({
      channel: 'ChatChannel',
      username: 'cool_kid_20',
    })
  };

  componentWillUnmount() {
    consumer.disconnect()
  };

  . . .

};

This will create a subscription or connection to our ChatChannel as soon as the ChatBox component renders. In this case, a username param will also be sent as well.

Upon unmounting of the component, the WebSocket connection will close. This is important to prevent memory leaks or hidden open connections within your web application.

4. Handling Subscriptions

Rails Backend

Once subscribed to a channel, we will have our subscribers actively listen for broadcasts sent to streams. In our example, the subscriber will begin listening for broadcasts sent to the 'public_chat’ upon subscribing and broadcast the string 'cool_kid_20 joined!' to every subscriber currently listening to the ‘public_chat` stream.

# rails-backend/app/application_cable/channels/chat_channel.rb

def subscribed
  user = params['username']
  stream_for 'public_chat'
  ActionCable.server.broadcast 'public_chat', "#{user} joined!"
end

5. Handling Broadcasts

React Frontend

When any message is broadcasted at anytime and as long as we are subscribed and listening to the same stream, our subscriber will be able to receive that data. In this example, we will just console.log() the data that was broadcasted.

// react-frontend/src/ChatBox.js

ComponentDidMount() {

  consumer.subscriptions.create({
    channel: 'ChatChannel',
    username: 'cool_kid_20',
  }, {
    connected: () => console.log('connected'),
    disconnected: () => console.log('disconnected'),
    received: data => console.log(data),
  })

};

6. Broadcasting Messages

React Frontend

Assuming we have a form that will send a POST request to our backend upon submit, we can send a message to be broadcasted to the ChatChannel public_chat stream.

// react-frontend/src/ChatBox.js

state = {
  content: 'Hi!',
  username: 'cool_kid_20'
}

handleSubmit = () => {
  fetch('http://localhost:3000/messages', {
    method: 'POST',
    body: JSON.stringify(this.state)
  })
}

Rails Backend

In the controller that will be handling the POST request, we will have the message broadcasted to 'public_chat' as long as the created message passes validation.

# rails-backend/app/controllers/messages_controller.rb

def create

  user = User.find_by(params['username'])
  message = Message.create(
    content: params['content'],
    user_id: user.id
  )
  if message.valid?   
    ActionCable.server.broadcast 'public_chat', message.content
  end

  render json: message

end

In order to fully test this out, open up a second browser in incognito mode and start sending messages!

There are a multitude of uses that WebSockets offer besides messaging. Whether it’s streaming live sports data, multiplayer game data or real-time collaboration, the uses are endless. Hopefully this tutorial was a good starting point for learning how to integrate WebSockets into your React/Rails web application. I know you’ll make something awesome.

Resources

• Action Cable Documentation
• Action Cable NPM

How to Use Action Cable With React and Rails was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

Deploy your JavaScript web application in less than 30 minutes

Have you just finished your first JavaScript application and are now wondering “How do I get my application online?” In this tutorial, we’ll go over the quickest and easiest way on how to deploy your JavaScript application on to Heroku, using Git, Node, Node Package Manager(NPM), and Express.

Heroku, is a cloud-based platform which offers a free plan for web developers to manage and deploy their projects. In order to utilize their services, we will have to sign up.

0. Prerequisites

Before we get started, please verify that Git, Node and NPM is installed by running the below commands in your terminal:

* $ means to run the command in your terminal.

$ node --version

If Node is not installed, download it here.

$ npm --version

NPM is normally installed alongside with Node. However, if NPM isn’t installed on your system, try to reinstall a more current version of Node.

$ git --version

If Git is not installed, download it here. After Git is installed, let’s initialize a local repository for our application.

$ git init

1. Install Heroku CLI

Once we have signed up for Heroku and installed all prerequisites, install the Heroku CLI and login through your terminal.

$ heroku login

2. Initialize a package.json in your Application Directory

If you already have a package.json file already in your root application directory, you can skip to step 3.

Otherwise, in your root application directory, run the following command to initialize a package.json file. This file acts as an identifier (like an ID card for your application) and is required by NPM to know which dependencies to install for your application.

$ npm init

After running the command, you will be prompted with a series of questions which will auto-populate your package.json file with metadata from your answers. You can skip the questions for now by pressing enter as you are able to edit the file later.

3. Installing Express

Next, we will be using a Node.js web application framework called Express to set up our server. To install Express, we’ll need to run the following command:

$ npm install --save express

Using NPM, this will help us download and install the necessary files for the Express module into the application directory. The --save flag will also list Express as a dependency in our package.json file.

4. Setting up the Express server

Create a server.js file. This will act as our initializer script when we deploy our application on Heroku.

$ touch server.js

Next open the server.js file and save in the following code:

What does this even mean? Let’s go into a little bit more detail.

const express = require('express');
const app = express();
const path = require('path');

In order for our server.js script to use Express, we need to require the Express module by initializing const express = require('express').

The following line, const app = express(), then initializes the app variable with a new Express object. This will allow us to use the methods provided by the Express module.

Another module we’ll be using is the Path module provided by Node which we can access by const path = require('path'). This will provide us with a set of methods we can use when working with path directories. In our case, we’ll mostly be using path.join(...).

app.use(express.static(path.join(__dirname)));

The app.use(path, callback) is called whenever a request (GET, POST, PATCH, DELETE) is sent to the path which triggers the callback function. Simply put, think of an event listener being placed on the denoted path with a callback function. However; if a path is not specified, the callback will trigger on every request regardless of the path. Since we currently don’t have a path set, our callback function express.static(...) will trigger on every request our site receives.

The express.static(...) is a middleware function which allows us to expose a directory or file for public usage. In our case, we have passed in path.join(__dirname) as the argument in our middleware function where __dirname represents the root directory of our application. This means every directory and file in our root application directory can be accessed by the client when their browser performs a request.

Don’t be alarmed! Remember that each time a client goes on to our website, their browser is performing a GET request. In turn, our server should send back a response along with html, css, and js file which makes up the basic web application. If we want to only allow a certain directory to be accessed publicly, we can pass in path.join(__dirname, '[name of the directory]') instead. As our web applications become more sophisticated in manner, we may want to keep certain files hidden which may contain our API keys, secrets, etc. by limiting which files can be accessed publicly.

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Here is where we set our routes. In the app.get(path, callback) function, the callback triggers when a GET request is made to the specified path. In our example, we currently have one route to '/’ in which we are sending back index.html to the client. As long as our app.use(express.static(...)) allows our css and js files to be publicly used, the client browser will be able to receive those files for use as well. For now, this is enough to get our site up and running.

app.listen(process.env.PORT || 3000);

This line tells our web application which port to listen on. When we deploy our web application, Heroku will set a default port value for the server to use which will be denoted as process.env.PORT. If a port is not provided, our web application will default to port 3000.

To quickly test this out, we can run $ node server.js and go to http://localhost:3000 in our browser. Once everything looks good, press Ctrl + C in your terminal to shut down the local server.

4. Configuring package.json

Once we have our server.js configured, we will have to set up instructions for Heroku to run our server when deployed. In your package.json file under scripts add "start": "node server.js".

Heroku will automatically look for the start script and execute it when deployed.

5. Commit all changes using Git

Now that we have configured all the files we need, run the following commands to commit our changes. First, we will need to stage our changes.

$ git add .

This command will add all our files to the staging area. Next, we will need to commit the changes.

$ git commit -m '[type some detailed message here]' 

After committing your changes, we can finally deploy our application!

6. Deploying our application to Heroku

Run the following command and replacing the [] with a name of your application.

$ heroku create [name of your app]

This will initialize an app on the Heroku website and set up Heroku as a remote repository in your .git file. Once that is done, let’s push our local repository to the remote Heroku repository.

$ git push heroku master

Once our web application has successfully been pushed up to the remote repository, Heroku will automatically run the npm start script which we have previously defined in our package.json file. In turn, this will run node server.js and start up our server! If all goes well, we will be returned a URL to our web application!

Good luck and happy coding!

Resources

• Getting Started on Heroku with Node.js
• Node.js Path Documentation
• About Node Package Manager
• About Git
• Using ExpressJS Middleware
• ExpressJS - Serving static files

How to Deploy Your JavaScript Application was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Whether you are starting your programming journey in a coding bootcamp or dabbling into JavaScript for the first time, encountering the Arrow Function can be quite daunting and confusing.

In fact, learning how to use Arrow Functions can be a powerful tool to have under your belt when used properly.

By this time, you are probably familiar with the classic function declaration method function foo() {...} as seen below:

function greet(name) {
  return `Hello ${name}.`
}

greet('Joe')

// "Hello Joe."

Or as a function expression let foo = function() {...}

let greet = function(name) {
  return `Hello ${name}.`
}

greet('Joe')

// "Hello Joe."

Although still effective, writing our functions this way can be quite repetitious and bulky at times. What if we were able to condense our code?

Want to read this story later? Save it in Journal.

That’s where Arrow Functions come in. let foo = () => {...}

let greet = (name) => {return `Hello ${name}.`}

greet('Joe')

// "Hello Joe."

We are able to further condense our Arrow Function given certain limitations.

If your Arrow Function :

• only has one parameter, you are allowed to omit the parenthesis () from the parameter.
• expression is only one-line in length, you can omit the curly brackets {} and the return from the expression. This is known as implicit return.

let greet = name => `Hello ${name}.`

greet('Joe')

// "Hello Joe."

Pretty awesome right? More commonly, you will probably encounter them when using iterators such as .map or .forEach. Here you can see an example of using function declaration vs the Arrow Function as a callback function for .map.

Function Declaration

let numbers = [1, 2, 3]

numbers.map(function(number) {
  return number * 2
})

// [2, 4, 6]

Arrow Function

let numbers = [1, 2, 3]

numbers.map(number => number * 2)

// [2, 4, 6]

Arrow Functions makes it easier for us to write short-hand code which can increase in code readability, open to less bug opportunities and often used in more advanced libraries such as React. Of course there will be times when using the function declaration method is preferred. Ultimately, it is up to you as the programmer to decide which method is better suited for the task.

Thanks for reading and happy coding!

Resources

• Arrow Functions by MDN
• Arrow Functions by W3Schools

📝 Save this story in Journal.