# Installation & Update ## Installation Make sure to install and get to know `matestack-ui-core` first! Add the Ruby gem and NPM package: ``` bundle add 'matestack-ui-bootstrap' yarn add 'matestack-ui-bootstrap' ``` Adjust the relevant application layout and add a div with the ID `matestack-ui` `app/views/layouts/application.html.erb` ``` Your App <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all'%> <%= javascript_pack_tag 'application'%>
<%= yield %>
``` Tell Webpack to import Bootstraps CSS: `app/javascript/packs/stylesheets/application.scss` ```css @import "~bootstrap/scss/bootstrap.scss"; ``` Import the required JS libraries and mount MatestackUiCore and MatestackUiBootstrap properly. We recommend to remove Turbolinks, as it might interfere with some of the reactivity feature of Matestack: `app/javascript/packs/application.js` ```javascript import Rails from "@rails/ujs" // import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import "./stylesheets/application.scss"; import Vue from 'vue/dist/vue.esm' import Vuex from 'vuex' import MatestackUiCore from 'matestack-ui-core' import MatestackUiBootstrap from "matestack-ui-bootstrap" let matestackUiApp = undefined document.addEventListener('DOMContentLoaded', () => { matestackUiApp = new Vue({ el: "#matestack-ui", store: MatestackUiCore.store }) }) Rails.start() // Turbolinks.start() ActiveStorage.start() ``` Download and import Bootstraps icons: `app/assets/images/icons` * download latest compatible icons: * extract the bootstrap-icons.svg to this path: app/assets/images/icons (currently served via assets pipeline, we had issues serving the icons via Webpack) and finally compile the code with webpack: ``` $ bin/webpack --watch ``` {% hint style="warning" %} When you update the `matestack-ui-bootstrap` Ruby gem, make sure to update the npm package as well! {% endhint %} ## Update ### Ruby Gem Depending on the entry in your Gemfile, you might need to adjust the allowed version ranges in order to update the Gem. After checked and adjusted the version ranges, run: ```bash bundle update matestack-ui-bootstrap ``` and then check the installed version: ```bash bundle info matestack-ui-bootstrap ``` ### JavaScript Package If you've installed the JavaScript dependecies via Yarn/Webpacker you need to update the JavaScript assets via yarn: ```bash yarn upgrade matestack-ui-bootstrap ``` {% hint style="info" %} No need to specify a version in your package.json.\ \ matestack-ui-bootstrap's version is automatically picked up to be compatible with the installed matestack-ui-core version. {% endhint %} and finally check if the correct version is installed: ```bash yarn list --pattern "matestack-ui-bootstrap" ``` {% hint style="warning" %} The Ruby gem version and the NPM package version should match! {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.matestack.io/matestack-ui-bootstrap/2.1/getting-started/installation-update.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.