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

Image Source

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:

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

Image Source

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

Image Source

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)
end
end

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.

Before
After

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! 🙌

Image Source

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🥂

while(true){ learn }

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store