Ruby 3 Rails 6 Bootstrap 5 Project Setup

Ruby 3 Rails 6 Bootstrap 5 Project Setup

Testing out the latest version of some great tools.

Trying out latest ruby and rails setup for a side project.

Tools I end up setting up for this:

  • Ruby with RVM
  • Rails
  • Postgresql database
  • RSpec for testing
  • Github repo
  • Ruby Standard instead of Rubocop
  • Bootstrap for styling
  • Heroku for deployment/hosting
  • Devise for authentication

Update/install RVM rvm.io/rvm/upgrading

rvm get stable
rvm list known
rvm install 3.0.1
ruby -v

Install rails guides.rubyonrails.org/v5.0/getting_started..

gem install rails
rails -v

Generate new rails app without minitest (adding RSpec instead) and with postgresql as the database joesasson.github.io/2017/03/24/setting-up-a..

rails new app-name -T -d postgresql
cd app-name

Open project in editor code .

Add to gemfile

group :development, :test do
  ...
  gem 'rspec-rails'
end

Back in terminal

bundle install
rails generate rspec:install

Setup database. macOS I recommend postgresapp.com as simple way to manage this.

rails db:create

Great make sure app boots & it runs at localhost:3000

rails s

Screen Shot 2021-05-18 at 1.24.13 PM.png

Great lets get a git repo setup here next. In terminal

git init
git add .
git branch -M main
git commit -m "first commit"

In github setup a repo and add to local project

git remote add origin git@github.com:TristanToye/app-name.git
git push -u origin main

I love static analyses, usually I'd use rubocop. Today I am going to use a different tool from the people at testdouble ruby standard github.com/testdouble/standard

Add to gemfile

group :development, :test do
  ...
  gem 'standard'
end

And again in terminal bundle install. Might need to restart VSCode here.

Following instructions to add plugin/setup for VSCode. github.com/testdouble/standard/wiki/IDE:-vs..

I ended up adding a project specific config at .vscode/settings.json to the repo.

Cool lets get a visual library in here before we start generating and displaying our content. Bootstrap always is my go to pick - exploit familiarity getbootstrap.com

Ended up following the notes here bootrails.com/blog/rails-bootstrap-tutorial

Alright lets add some content and get this online to start development.

We want this project to be a web app and a API source. Looking to leverage as much of rails as we can to have a single controller for both purposes.

Next a new model to start working with and displaying using built in generators guides.rubyonrails.org/command_line.html#bi..

rails g scaffold MyModel column_name:string
rails db:migrate

Now head to localhost:3000/MyModel to see your new model scaffold.

App now has a bare minimum functionality. So deploy time. I'll use heroku as again exploit familiarity. Setup a new app and then jump into the guides here devcenter.heroku.com/articles/getting-start..

Also adding a Procfile to the repo to configure how to run the app in heroku

release: rails db:migrate
web: bundle exec puma -C config/puma.rb

I also add the Heroku Postgres and Papertrail free tier resources to the app in Heroku.

App is now running and available. Setup to auto deploy from github on every commit to main branch. Great!

Before I attach a domain to it should add authentication to ensure only I can edit the data as desired.

Going to use devise for this github.com/heartcombo/devise

Not document steps here for setup. Adding a User model though a normal and not extra setup, just default devise.

Now we can add before_action :authenticate_user! to our MyModel controller to ensure only logged in Users can make changes.

However, we want to limit this to just my account as being registered - so we will remove the :registerable module from devise model stackoverflow.com/a/44489551

File: app/models/user.rb
4:   devise :database_authenticatable, # :registerable,
5:     :recoverable, :rememberable, :validatable

Then via cli for Heroku we will add our single user account

heroku run rails console -a app-name
User.create(email: "myemail@gmail.com", password: "super_password, password_confirmation: "super_password")

We should now be able to login as out user still but not have anyone else register.

Great! now we have our app started, deployed, and some basic authentication. Now it is like time to build something... gosh.

We want to leverage rails to display pages and also make an API call available. By default this should be available out of the box, but right now we have limited it with devise. Lets fix that.

In our controller we will change how we are managing auth so index and show routes are accessible to all.

before_action :authenticate_user!, except: [:index, :show]

And in our views we will want to just hide options that only the current_user from devise can access. For example:

<% if current_user %>
  <td><%= link_to 'Show', model %></td>
  <td><%= link_to 'Edit', edit_model_path(model) %></td>
  <td><%= link_to 'Destroy', model, method: :delete, data: { confirm: 'Are you sure?' } %></td>
<% end %>

Now for the API-ish part, how do those requests look? Rails default is to respond to .json calls. So localhost:3000/my_model.json will return the example API content. Not bad. But adding .json doesn't feel like using a normal API.

Fortunately, out of the box if the requester adds Accept: application/json header to their request the .json route and build in jBuilder layout is used. We will stick with this for now as we do not have any more complex use cases.

So that is our API building goals handled as well here - great!

I'll update this as I go if there are more tools to be used here.