Add Bootstrap to app

.dockerignore

@@ -0,0 +1,5 @@
+**/node_modules
+
+node_modules
+
+node_modules/

Dockerfile

@@ -24,11 +24,14 @@ WORKDIR /app
 COPY . /app/
 
 ENV BUNDLE_PATH /gems
-RUN yarn -y install
+RUN yarn -y install --force --verbose
+RUN yarn install node-sass
+RUN ls /app/node_modules/node-sass/vendor/
 RUN bundle config force_ruby_platform true
 RUN bundle install
 
 
+
 ENTRYPOINT ["bin/rails"]
 CMD  ["s", "-b", "0.0.0.0"]
 

app/javascript/packs/application.js

@@ -9,6 +9,16 @@ require("@rails/activestorage").start()
 require("channels")
 // require("jquery")
 
+import "bootstrap"
+import "../stylesheets/application"
+
+document.addEventListener("turbolinks:load", () => {
+  $('[data-toggle="tooltip"]').tooltip()
+  $('[data-toggle="popover"]').popover()
+})
+
+
+
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/javascript/stylesheets/application.scss

@@ -0,0 +1 @@
+@import "node_modules/bootstrap/scss/bootstrap";

app/views/layouts/application.html.haml

@@ -4,15 +4,49 @@
     %title BbbDemo
     = csrf_meta_tags
     = csp_meta_tag
+    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
     = 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'
+
   %body
+
+    %nav.navbar.navbar-expand-lg.navbar-light.bg-light
+      .container-fluid
+        %a.navbar-brand{:href => "#"} Navbar
+        %button.navbar-toggler{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", :type => "button"}
+          %span.navbar-toggler-icon
+        #navbarSupportedContent.collapse.navbar-collapse
+          %ul.navbar-nav.me-auto.mb-2.mb-lg-0
+            %li.nav-item
+              %a.nav-link.active{"aria-current" => "page", :href => "#"} Home
+            %li.nav-item
+              %a.nav-link{:href => "#"} Link
+            %li.nav-item.dropdown
+              %a#navbarDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "data-bs-toggle" => "dropdown", :href => "#", :role => "button"}
+                Dropdown
+              %ul.dropdown-menu{"aria-labelledby" => "navbarDropdown"}
+                %li
+                  %a.dropdown-item{:href => "#"} Action
+                %li
+                  %a.dropdown-item{:href => "#"} Another action
+                %li
+                  %hr.dropdown-divider/
+                %li
+                  %a.dropdown-item{:href => "#"} Something else here
+            %li.nav-item
+              %a.nav-link.disabled Disabled
+          %form.d-flex
+            %input.form-control.me-2{"aria-label" => "Search", :placeholder => "Search", :type => "search"}/
+            %button.btn.btn-outline-success{:type => "submit"} Search
+
+
     - if current_user
       %strong
         = "Welcome #{current_user.name}!"
         = link_to "Log Out", destroy_user_session_path, method: :delete
     - else
       = link_to "Sign In", new_user_session_path
       = link_to "Create Account", new_user_registration_path
-      -# = link_to 'Connect via Github', user_github_omniauth_authorize_path, method: :post
+
     = yield

config/database.yml

@@ -17,6 +17,7 @@ default: &default
 
 development:
   <<: *default
+  url: postgres://postgres:docker@localhost
   database: bbb_demo_development
 
 # Warning: The database defined as "test" will be erased and

config/webpack/environment.js

@@ -1,10 +1,12 @@
 const { environment } = require('@rails/webpacker')
 
 const webpack = require('webpack')
+
 environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin({
     $: 'jquery/src/jquery',
-    jQuery: 'jquery/src/jquery'
+    jQuery: 'jquery/src/jquery',
+    Popper: ['popper.js', 'default']
   })
 )
 

db/schema.rb

@@ -12,6 +12,9 @@
 
 ActiveRecord::Schema.define(version: 2022_01_24_193401) do
 
+  # These are extensions that must be enabled in order to support this database
+  enable_extension "plpgsql"
+
   create_table "meetings", force: :cascade do |t|
     t.string "external_meeting_id"
     t.string "name"

docker-compose.yml

@@ -20,9 +20,11 @@ services:
     depends_on:
       - db
     environment:
-      - DATABASE_URL=postgres://postgres:password@db:5432/postgres
-    volumes:
-      - .:/app
+      - DATABASE_URL=postgres://postgres:postgres@db:5432/postgres
+    # volumes:
+      # - .:/app
+    #   - node_modules:/app/node_modules
+
 
   nginx:
     container_name: nginx-reverse-proxy
@@ -38,5 +40,7 @@ services:
 
 
 #TODO what is this
+# its a named volume
 volumes:
   dbdata:
+  # node_modules: {}

nginx.conf

@@ -20,6 +20,12 @@ http {
 
     location / {
         proxy_pass http://rails-app:3000/;
+        proxy_set_header  Host $host;
+        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header  X-Forwarded-Proto $scheme;
+        proxy_set_header  X-Forwarded-Ssl on; # Optional
+        proxy_set_header  X-Forwarded-Port $server_port;
+        proxy_set_header  X-Forwarded-Host $host;
     }
 
   }