Important Steps to Setting Up a Rails Backend With a JavaScript Frontend

(Along with Syntax) The Prevention Method

Best Practice:

Create a folder that helps you to understand what might be nested within that folder. If you wanted to create a one to many relationship about pirates:

mkdir one_to_many_pirates_belongs_to_ship
mkdir pirates_1:m
//Many to Many Relationship
mkdir pirates_many_to_many
mkdir pirates_m:n

Backend:

Create a backend folder-

rails new --api backendFolder
cd /backendFolder

fix cors error-

command + p cors.rb
command + p gemfile

Create migration tables, models, and controllers all in one go-

rails g resource name_of_model name_of_attribute:data_type

You will want to see if your migration table looks correct and then run a rails db:migrate to create a schema file for your migration tables which will contain your generated tables.

rails db:migrate

You will want to check your models to ensure your relationships are set up correctly between your models.

belongs_to :singular_model_name
has_many :plural_model_name
has_many :join_table_plural
has_many :singular_model_name, through: :join_table_plural

You will want to seed at least three instances of each model so you can check to see if they have been created successfully in your database, of which you will want to reference your migration table for each model to help you create your seeds. If you apply destroy_all in your seeds.rb file, be sure to destroy_all to the model that depends on the other model first also known as your belongs_to model. Example below -

Pirate.destroy_all
Ship.destroy_all
s1 = Ship.create(name: "Black Pearl", description: "Fastest ship in the sea")
s2 = Ship.create(name: "Dark Flamingo", description: "Slowest ship in the sea")
s3 = Ship.create(name: "Queen Anne's Revenge", description: "Most infamous ship in the sea")
p1 = Pirate.create(name: "Jack", fav_color: "green", ship: s1)
p2 = Pirate.create(name: "Pete", fav_color: "black", ship: s1)
p3 = Pirate.create(name: "Misty", fav_color: "blue", ship: s1)

You will want to create your endpoints such as your index and show endpoints in your controllers. Actually all CRUD functionality can be created here from which you can use postman to make changes to your database or else set up a front end with CRUD functionality to update to your database as well. Syntax reference below-

def index
@pirates = Pirate.all
render json: @pirates
end
def show
@pirate = Pirate.find(params[:id])
render json: @pirate, include: :ship
end
def create
@pirate = Pirate.create(
name: params[:name],
fav_color: params[:fav_color],
ship_id: params[:ship]
)
# redirect_to ""
render json: @pirate
end
def update
@pirate = Pirate.find(params[:id])
@pirate.update(
name: params[:name],
fav_color: params[:fav_color],
ship_id: params[:ship]
)
render json: @pirate
end
def destroy
@pirate = Pirate.find(params[:id])
@pirate.destroy
render json: @pirates
end

Frontend:

Create a frontend folder-

mkdir frontendFolder
cd /frontendFolder
touch index.html app.js app.css pirate.html pirate.js pirate.css ship.html ship.js ship.css

It’s important to note-

lite-server by default will search for your index.html file when you run lite-server and you will be unable to launch your if you do not start by using your index.html file initially
also, nesting files like your pirate.html, pirate.js, pirate.css within a folder will make it difficult for you to apply query params to link from you index.html page over to your pirate.html page.

When on your index.html file-

! + tab
within your head element/tag:
link + tab
app.css
within your body element/tag:
<!-- Make sure your script element/tag is the very last thing at the bottom within the body element/tag-->
script:src + tab
app.js
<!-- create a form which requires a form element/tag; input elements/tags; a select element/tag with an option element/tag within the select element/tag; and an input element/tag with an attribute type="submit" -->
form + tab
<form action="<BACKEND_URL>" method="POST">
input + tab
<input type="text/number" name="<reference your migration table>"
select + tab
<select name="" ></select>
<input type="submit">
</form>
<!-- Remember a <select name ="">
contains <option value=""></option>
</select> -->

Understanding more about Query Params will be useful to help you dynamically link your show.html pages with your show endpoints located in the database on your backend.

create an element: document.createElement('')
manipulate the element to contain innerHTML so you can create a clickable link: variable.innerHTML = `<a href='url?query=${}'>${}</a>
then you can fetch from your show endpoint and attach the query value to your url, once you instantiate:
const searchParams = new URLSEARCHPARAMS(window.location.search)
const query = searchParams.get("query")
fetch(`url/${query}`)

Understanding relationships is powerful, and knowing how it applies to an include in the controller of your show endpoint can really make your database more usable for easier data extraction-

If pirate belongs_to :ship and ship has_many :pirates for your show endpoint:
render json: @ship, include: :pirates
render json: @pirate, include: :ship