# Integrating with Rails This page explains how to integrate Stallion with a Rails app. This is a community-maintained document. For questions about this integration, please [ask the community](/getting-started/community). ## Requirements This integration has been tested with the following: - Rails >= 6 - Node >= 12.10 - Webpacker >= 5 ## Instructions To get started using Stallion with Rails, the following packages must be installed. ```bash yarn add @apaq/stallion copy-webpack-plugin ``` ### Importing the Default Theme The next step is to import Stallion's default theme (stylesheet) in `app/javascript/stylesheets/application.scss`. ```css @import '~@apaq/stallion/dist/stallion/stallion'; ``` ### Importing Required Scripts After importing the theme, you'll need to import the JavaScript files for Stallion. Add the following code to `app/javascript/packs/application.js`. ```js import '../stylesheets/application.scss' import { defineCustomElements, setAssetPath } from '@apaq/stallion' // ... const rootUrl = document.currentScript.src.replace(/\/packs.*$/, '') // Path to the assets folder (should be independent on the current script source path // to work correctly in different environments) setAssetPath(rootUrl + '/packs/js/') // This enables all web components for the current page defineCustomElements() ``` ?> This will import all Stallion components for convenience. To selectively import components, refer to the [Using webpack](/getting-started/installation?id=using-webpack) section of the docs. ### webpack Config Next we need to add Stallion's icons to the final build output. To do this, modify `config/webpack/environment.js` to look like this. ```js const { environment } = require('@rails/webpacker') // Stallion config const path = require('path') const CopyPlugin = require('copy-webpack-plugin') // Add stallion icons to webpack's build process environment.plugins.append( 'CopyPlugin', new CopyPlugin({ patterns: [ { from: path.resolve( __dirname, '../../node_modules/@apaq/stallion/dist/stallion/icons' ), to: path.resolve(__dirname, '../../public/packs/js/icons') } ] }) ) module.exports = environment ``` ### Adding Pack Tags The final step is to add the corresponding `pack_tags` to the page. You should have the following `tags` in the `` section of `app/views/layouts/application.html.erb`. ```html <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= yield %> ``` Now you can start using Stallion components with Rails!