Building React Components with Bootstrap Studio

#react #bootstrap #ruby #rails

Do you know Bootstrap Studio? It's a graphical HTML/Bootstrap builder. The latest version features support for Bootstrap 4 and includes a migration function for converting Bootstrap 3 projects to Bootstrap 4. It's not free, but at least the price tag is not very high. It looks like this:

Since I liked the idea of using it for building my Rails web application, I was wondering if there's a better way to use it than manually copy-and-pasting HTML and CSS code from BSS's export. Spoiler alert: Yes, there is!

I recently integrated React into my Rails app and that was just about the right decision, because a company called WIX has written react-templates, which provides a way to wrap a BSS export into a React component. So the idea is to export the BSS page to html, transform it to a React template, which is a Javascript function, and use that function as React's render function in a component. Since BSS can run a custom export script each time I hit the export button, this process can be automated.

Here's a step-by-step guide:

Add react-rails to your rails application, see github page for details.
Create an additional directory components_rt under app/assets/javascripts of your rails application for the template files. You also need to add an import line for it right before the import line of the components directory in app/assets/javascripts/application.js.coffee:
```
#= require_tree ./components_rt
#= require_tree ./components
```
Install the rt command from react-templates:
```
npm install react-templates -g
```

In BSS you can supply an export script. Use this one and change the TARGET to your needs:

#!/bin/sh
TARGET=~/path/to/rails/app/assets/javascripts/components_rt
[[ -z $1 ]]          && echo "argument error: bss export directory required" && exit 1
[[ ! -d $1 ]]        && echo "bss export directory does not exist" && exit 1
[[ ! -d ${TARGET} ]] && echo "target does not exist: ${TARGET}" && exit 1
# is rt installed?
which rt >/dev/null 2>&1
[[ $? -ne 0 ]]       && echo "rt (react-template compiler) is not installed" && exit 1
# main
RC=0
for f in "$1"/*.html; do
    RTFILE="${f%.html}.rt"
    xmllint --html --xpath '/html/body/*' "$f" | tee ${RTFILE}
    sed -i 's|<script .*script>||g' "${RTFILE}"
    sed -i 's|%7B|{|g' "${RTFILE}" # fix due to xmllint/xpath bug 788398
    sed -i 's|%7D|}|g' "${RTFILE}" # fix due to xmllint/xpath bug 788398
    mv "${RTFILE}" "${TARGET}/"
    rt "${TARGET}/$(basename ${RTFILE})"
    RC=$(($RC+$?))
done
exit $RC

Write a React component, let's call it "Hello":

class Hello extends React.Component {
    render: helloRT
}

Now you can build your component in BSS. Rename the html file to "hello.html". It will be transformed into the Javascript function "helloRT" when you click on export.
Use the component in any view of your rails project:

<%= react_component 'Hello' %>

Put your elements under /html/body in BSS. There's only 1 element allowed directly under /html/body, so wrap your stuff in a container element. And use 1 HTML file in BSS for each React component.

Have fun!

P.S.: You might want to extend the export script by the ability to bring CSS files from the BSS export into Rails.