> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/other/rails.md).

# Rails

## Required Libraries

| PLUGIN              | DESCRIPTION                                   | DEP. STATUS  |
| ------------------- | --------------------------------------------- | ------------ |
| jquery.js           | Core JS Library                               | **REQUIRED** |
| mordnerizer.js      | Browser Feature Detection                     | **REQUIRED** |
| bootstrap.js        | Core Framework                                | **REQUIRED** |
| pace.js             | Page Progress Loader                          | **OPTIONAL** |
| jquery-unviel.js    | Library Used for displaying retina images     | **OPTIONAL** |
| jquery.ioslist.js   | Used Chat list on the quickview               | **OPTIONAL** |
| jquery.actual.js    | Determine image dimentions                    | **OPTIONAL** |
| jquery.scrollbar.js | Scrollbar plugin used in sidebar and portlets | **OPTIONAL** |

Add the following dependencies in your **package.json**. Inside "**dependencies**" object

```javascript
"jquery": "^3.4.1",
"bootstrap":"4.3.1",
"modernizr":"3.10.0",
"pace-js":"1.0.2",
"jquery-unveil":"1.3.2",
"jquery.actual":"1.0.19",
"jquery.scrollbar":"0.2.11",
"popper.js":"^1.16.0",
"pages-core": "git+https://github.com/revoxltd/pages-core.git"
```

Run the command to install the dependencies to your project

```ruby
yarn install
```

Import the libraries to webpack by adding it to the following file\
**config/webpack/environment.js** 

```ruby
const { environment } = require('@rails/webpacker')

module.exports = environment

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
```

Update `config/webpacker.yml` to be able to resolve assets stored in the `app/assets` folder.

```ruby
resolved_paths: ['app/assets']
```

Import css/scss dependencies into our main webpack `application.scss` : in app/assets/stylesheets

```ruby
 @import "bootstrap/scss/bootstrap";
 @import "pages-core/dist/scss/pages"
```

Thats it! you can use the pages layouts mentioned below

{% content-ref url="/pages/-LDC2HxOSX6DIHvxviyq" %}
[Layouts](/introduction/layouts.md)
{% endcontent-ref %}