Setup Ruby on Rails 6 + Bootstrap

This is a quick tutorial showing how to properly set a Ruby on Rails 6 project with Bootstrap.

This is a quick tutorial showing how to properly set a Ruby on Rails 6.x.x project with Bootstrap.

  • First step. Create a Rails 6.x.x project. For example, I have Rails version 6.1.7 installed in my computer:

rails _6.1.7_ name-of-project -d postgresql

Here I chose to create a Rails 6.1.7 project (named name-of-project) with postgresql. The next step, ideally, would be to check if the project works, therefore, you’d need to check the postgresql connection in config/database.yml. For example, here’s how I set that connection:

default: &default
  username: postgres
  password: 12345
  host: localhost
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

As this is a local project only, I defined my local username, password and host on the default section of database.yml

  • Second step. Install jquery, popper.js and bootstrap via Yarn. Run on terminal:
yarn add jquery popper.js bootstrap
  • Third step. Add the following lines to the file environment.js (config/webpack/environment.js):
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment
  • Fourth step. Create the stylesheets folder (app/javascript/stylesheets)
  • Fifth step. Inside the stylesheets folder that you’ve just created, create the file application.scss
  • Sixth step. Make your stylesheets available in application.html.erb. Add the following lines to application.html.erb (inside <head> </head>):
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  • Seventh step. Inside application.js (app/javascript/packs/application.js), import bootstrap by adding the following lines of code:
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")
  • Final step. Install popperjs/code by running the following command on terminal:
yarn add @popperjs/core

Example of the System Engineering Engine

This is a brief aerospace mission example that helped me understand System Engineering (SE) engine.

This is a brief aerospace mission example that helped me understand System Engineering (SE) engine. The different phases of a life cycle allows the various products of a product to be gradually developed and matured from initial concepts through the fielding of the product and its retirement.

The example has two main phases: Formulation and Implementation.

Formulation

Pre-Phase A: Concept Studies

The purpose of this stage is to product a broad spectrum of ideas and alternatives for missions from which new programs/projects can be selected.

This stage is also used to determine feasibility of the desired system, development of mission concepts, draft system-level requirements and identify potential technology needs.

Outputs: Feasible system concepts in the form of simulations, analysis, study reports, models and mockups (nothing above that)

Phase A: Concept and Technology Development

The purpose of this stage is to determine the feasibility and desirability of a suggested new major system. Develop the final mission concept, system-level requirements, and needed system structure.

Output: System concept definition in the form of simulations, analysis, engineering, models, and mockups, also trade study definitions.

Phase B: Preliminary Design and Technology Completion

In this stage we should define the project in enough detail to establish a initial baseline capable of meeting mission needs. Also, develop system structure end product (and enabling product). Generate a preliminary design for each system structure end product.

Output: End products in the form of mockups, trade study results, documents and prodotypes.

Implementation

Phase C: Final Design and Fabrication

The purpose of this stage is to complete the detailed design of the system and its associated operation systems, fabricate hardware and code software. Generate final system designs.

Output: End product detailed designs, end product component fabrication and software development.

Phase D: System Assembly, Integration, Test and Launch

Assemble and integrate the products to create the system, meanwhile developing confidence that it will be able to moet the system requirements. In this phase, it usually follows the steps:

  • System end product implementation
  • Assembly
  • Integration and Test
  • Transition to use

The output is the desired system.

Phase E: Operations and Sustainment

To conduct the mission and meet the initially identified need and maintain support for that need.

The output is the desired system.

Phase F: Closeout

Implement the system’s disposal plan developed in Phase E and perform analyses of the returned data and returned samples

Output: Product closeout.