Part 1: Full Stack Application Set Up — React with Ruby on Rails

7 min readApr 13, 2021

Introduction

Hello there and welcome to my personal notes.

This post is a step-by-step instruction on setting up a simple full stack web application using React and Ruby on Rails.

This is part one of my blog series for my StickyNote mini-project. The main objective is to practice CRUD with MVP. Though be warned, no styling is involved so it might be an eye sore 😬.

Here’s an outline of upcoming posts:

Part 1: Full Stack Application Set Up — React with Ruby on Rails
Part 2: The R in CRUD
Part 3: The C in CRUD
Part 4: The U in CRUD
Part 5: The D in CRUD
Part 6: Refactoring

Funny story actually, I’ve been working as a frontend developer for over seven months now and at one point, I got so stuck and felt so defeated that I had to create this mini-project to boost my confidence and self-esteem. Then it hit me, I haven’t created a full stack project in almost a year already!

I wanted to strengthen my core foundational skills and found that writing about it really helps. Thus the creation of this blog series.

After I successfully developed this small application, I felt more powerful and refreshed. It felt great going back to my work project with more confidence.

Anyway, feel free to correct me in anything I write as, again, these are my personal notes I’m publishing to the world~

Cheers!

StickyNote Mini-Project

Before we start with the instructions, let’s cover the data structure and functionality for this mini-project.

Data Structure

We’re going to have one model with two attributes.

Both attributes will have a string data type. Since “category” is a reserved word in Rails, I figured it would be best to attach “note” to it. And to keep things consistent, I did the same for the “description” attribute as well.

StickyNote- note_category: ''- note_description: ''

Functionality

Full CRUD 😗.

Full Stack Application Set Up

Step 1: In our terminal, let’s create a directory for the mini-project as a whole.

mkdir stickyNote

Step 2: Navigate into that directory and create two more; one for the front end and the other for the back end.

cd stickyNote
mkdir front-end
mkdir back-end

Step 3: Let’s set up our back end first.

Do note that it really doesn’t matter which one we set up first, since this is my personal notes, I’m choosing the back end for us 😘.

cd back-end

Back End Set Up — Ruby on Rails

I’m going to go ahead and assume that you have the proper prerequisites installed for Ruby on Rails.

Step 4: Create a new Rails application.

rails new . --api -T --database=postgresql

Command line explained:

rails new
This command creates a new Rails application with a default directory structure and configuration at the path we specify..
Indicates to create a new Rails application within the current directory.--api
Preconfigure smaller stack for API only apps.-T
Skips test files.--database=postgresql
Preconfigure for selected database(PostgreSQL in this case).

You can customize your rails application with various command line options found in:

rails new --help

Step 5: Open the project with an IDE. My personal choice is VS Code.

code .

Optional: Connect this project to a GitHub repository for your records.

Step 6: Inside the ‘Gemfile’ file, uncomment the following line:

gem rack-cors

As the comment says, enabling this line will allow cross-origin AJAX possible. Which is what we want and will utilize with our application.

Step 7: Navigate to the following file ‘/config/application.rb’ and paste the following CORS code inside the Application class:

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :patch, :delete]
      end
    end

This will eliminate any CORS issues when we connect to our React app.

Step 8: Save everything and run the following command:

bundle install

Step 9: Create a database.

rails db:create

Step 10: Create a table.

rails g resource StickyNote note_category note_description --no-test-framework

Command line explained:

rails g resource
Stubs out a new resource including an empty model and controller suitable for a RESTful, resource-oriented application. StickyNote
Singular model name (either CamelCased or under_scored works).note_category
An attribute with a string data type.Normally attributes are formatted as 'field:type' but since the default data type is a string, we can leave it as is.note_description
A second attribute with a string data type.--no-test-framework
Skips test files.

You can learn more by running the following command:

rails g resource --help

Step 11: Migrate the model to the database.

rails db:migrate

Note: Normally, there would be relationships to set up in the models (e.g. has_many, belongs_to, has_many through, etc.) but since we only have one model, it’s not necessary for this mini-project.

Step 12: Create some sample seeds located in ‘/db/seeds.rb’.

p "Initiating seeds..."StickyNote.create(
   note_category: 'Mini-project',
   note_description: 'CRUD on ugly notes'
)StickyNote.create(
   note_category: 'Project',
   note_description: 'Style Me 3.0'
)StickyNote.create(
   note_category: 'Study',
   note_description: 'More Algorithms'
)p "Seeds planted"

Since the seeds file is pretty quiet, I found it helpful to add a print command before and after the sample seeds. This way, I can visually see on my terminal if it was loaded successfully or not. This is a helpful debugging trick when dealing with projects that have a large seeding list. Simply add more print commands in between the bundles of data.

Feel free modify the print message.

Step 13: Load the sample seeds into the database.

rails db:seed

Step 14: Set up the controller in ‘app/controllers/sticky_notes_controller.rb’.

class StickyNotesController < ApplicationController  def index
     stickies = StickyNote.all
     render json: stickies
  end  def show
     sticky = StickyNote.find(params[:id])
     render json: sticky
  end  def create
     sticky = StickyNote.create(sticky_params)
     render json: sticky
  end  def update
     sticky = StickyNote.find_by(id: params[:id])
     sticky.update(sticky_params)
     render json: sticky
  end  def destroy
     sticky = StickyNote.find_by(id: params[:id])
     sticky.destroy
  end  private  def sticky_params
     params.require(:sticky_note).permit(:id, :note_category, :note_description)
  endend

I’ll go over each of these methods in detail in the upcoming CRUD posts.

After setting up the controller(s), there is an option to modify the routes as needed but since we’re executing full CRUD for this model, it’s appropriate to keep the routes file (located in ‘/config/routes.rb’) as is.

Rails.application.routes.draw do
   resources :sticky_notes
end

Step 15: Check to see if everything is good to go.

Run the application.

rails s

Open a [Google Chrome] browser and enter the URL below:

http://localhost:3000/sticky_notes

If all went well, you should see something like this:

Note: I have a JSONView extension on my browser to beautify the api.

Amazing! Our back end is nice and set, now for our front end.

Front End Set Up — React

I’m also going to go ahead and assume that you have the appropriate React prerequisites installed.

Step 16: In our terminal, let’s navigate to the front-end directory.

cd ../front-end/

Step 17: Create a new React application and start it.

npx create-react-app .
npm start

Since we already have our localhost:3000 running in the background, you might get this message:

Don’t worry, just enter ‘y’ for “yes” and it’ll run our React application to localhost:3001. No biggie.

Optional: Now would be a good time to connect this project to a GitHub repository for your records.

Step 18: Let’s get rid of any auto-generated files and folders we don’t need.

Step 19: Modify our App.js to the bare bones.

Step 20: Repeat for index.js.

Step 21: Now if we run ‘npm start’ again, our application should look like this:

And there we have it, a running front end application! 🙌

Next time…

Now that we have both our front and back end applications set up, our next step is to integrate them together.

The upcoming blog, “Part 2: R in CRUD” will cover how to read and render our StickyNote JSON API from Rails to our React application.

Again, feel free to correct me or provide feedback in anything I write as these are my personal notes I’m publishing to the world~

Thank you for reading and I hope to see you in the next post!

Cheers🥂

Resources

Ruby on Rails Guides

React