6
26 Comments

Rails 6 Bootstrap Theme Help

Hey everyone. I've been trying all day (literally almost all day) to fully implement a Bootstrap 4 theme into a Rails 6 app. I simply do not understand how to organize the relevant JS and CSS files with webpacker (really, implementing the JS is the big issue). I know enough RoR to be dangerous. I'm more than willing to pay for an hour of your time for some one-on-one tutoring. If you care for more details ahead of time the project I'm working on is artwerks.io and the theme I'm trying to fully implement is: https://bootstrapmade.com/resi-free-bootstrap-html-template/. Thanks in advance.

  1. 4

    Hey Michael! I've struggled with this a lot over the past month as I integrated a couple themes from Creative Tim (https://www.creative-tim.com/) into Rails (no relation 🙂).

    I open-sourced the result here - https://github.com/Dino-SaaS/Argon.

    And wrote a blog post here talking through some details on how to customize it - https://www.dinosaas.com/articles/starter-app-1-argon.

    This specific template probably doesn't make sense for you, but hopefully seeing a completed example will be helpful.

    1. 1

      Thank you and sorry for the delayed response, will definitely be reviewing this code for some how to help!

    2. 1

      Thank You, you are such a good person

  2. 4

    Hey Michael, I'm also happy to help (although you should definitely pair up with justalever, he's brilliant). Feel free to hit me up on the StimulusReflex Discord any time; there's an excellent #rails channel there. Everyone is super helpful: https://discord.gg/XveN625

    For better or worse, I've had a lot of experience bringing in Bootstrap 4 themes to Rails 6. There's two major hurdles to overcome, conceptually:

    1. Most themes are made by front end designers who were using whatever JS ecosystem tooling was super cool the year that they were made... sadly, you might have heard that JS folks are fickle and everything is constantly being re-written. There's very little chance that these folks anticipate you integrating the themes with Rails. They always seem to be created in a sort of static HTML vacuum. It means that in addition to getting the SCSS and JS properly massaged, you're going to have to do a ton of work cutting up the sample pages and components into partials or whatever. I am very confident and know what I'm doing, and it still takes 3-5 days of mindless, repetitive grunt work. Lots of search and replace. The best advice I have for you is to spend real $ on a high quality theme, such as one from the official BS theme store; I also love @themesberg's themes.

    2. The biggest issue you're going to run into is converting jQuery scripts into stuff that plays nicely with webpacker (and Turbolinks). Lots of jQuery plugins simply don't work in a 2020 context, because there's no page load event when you're doing (for example) Turbolinks navigations, or loading new content in via StimulusReflex. I wrote about this in "Mutation-first development: a call to action". My suggestion here is that the best way to bridge jQuery into modern tooling is Stimulus. Stimulus is criminally under-used in general, but it's great for bolting on lifecycle events to plugins that were made in a different era.

    1. 1

      Thank you very much for the thoughts. I will check out the discord group and follow your advice (and reach out to @themesberg as well for follow up. I suppose my biggest frustration is that it seems that copying and pasting the provided CSS file easily works for the layout/style of the page. Shouldn't it be as simple as copying the provided .js files (or min.js files) into the proper directory and referencing them in the code? How is it that CSS can be so (relatively) straightforward and JS so convoluted within the same framework #endrant

      1. 1

        You're a Rails developer, right? So I can actually make a pretty compelling response to your question. The reason is that webpack (or equivalent) is taking the whole tree of imported dependencies as input, linking it all together so that variables are shared and redundancies are removed + unused code is purged, then outputting a single executable file that runs like an application. The top level application.js is sort of like the void main() function in C, which begins your run loop.

        So the old jQuery way, with many in-lined script tags pulling in plugins from all over the web, that's a bit like calling classic PHP pages where every URL maps directly to a file someone FTP'd over... whereas having an application pack js file is a bit more like calling a route on a Rails application, where the mapping is virtual and connects to a program that is running even if nobody is hitting it.

        I did not give up jQuery easily, but Stimulus eased the path. I was able to use Stimulus controllers to help me break out of the most dangerous part of the jQuery mindset, which is this idea of having a single "page loaded" lifecycle moment where you're supposed to initialize everything. As I mentioned in my original comment, you just can't rely on that in a modern application.

        The other major strike against jQuery at this stage is that it doesn't create or work with real DOM events. This is sort of like owning a television with 13 channels and no ability to decode a digital signal. I actually created a library to help bridge events between jQuery and ES6 javascript.

        I'm still happy to help with any questions you might have about making the transition.

    2. 1

      Appreciate the good thoughts and the recommendation! We also make sure we provide the necessary support to our clients :)

    3. 0

      You've mentioned the most problems anyone can face when dealing with pre-made templates. I tried to solve these problems for myself and ended up building an entire project with my friend for this.

      Frontendor is a library of reusable HTML blocks: Hero sections, Pricing Tables, Call to actions, etc.

      • Zero complexity (No bundler, No SCSS).
      • Customizable using CSS variables.
      • Lightweight (No jQuery).
      • Each block/section has it's own HTML & CSS, so you can integrate any section (pricing table, hero section, footer, etc) easily.

      Just assemble these blocks to build a landing page quickly.

      I'd like to know your opinion.

      1. 2

        Hi Hamza, I'm not sure why your comment was voted down. Seems like it was offered in good faith.

        It sounds like Frontendor is sort of like TailWindUI for HTML blocks. I actually think that, properly marketed to the right people, it could be really handy. I would emphasize what it is over what it isn't, if that makes sense.

        For example, no jQuery might be great for some but 70% of the web still uses it. Most who are excited about HTML blocks they can drop in won't really care.

        As for the no bundler, no SCSS... progress marches forward and most apps will use webpack or some other bundler strategy going forward. Sass in particular isn't new and isn't going anywhere. Not using Sass might actually be a strike against you here, unfortunately.

        1. 1

          Not using Sass might actually be a strike against you here, unfortunately.
          Good point, I didn't think about that.

          I want to build another version of these HTML blocks for Vue and React. I thought about Web Components but I see that it's not really popular among JavaScript developers. In fact, they prefer native components (Vue components, React components, etc).
          What do you think about using Web Components?

          1. 2

            Let's get one thing straight: Web Components ARE native components. React and Vue are just bloated, heavy libraries with cult followings but no real compelling use-case that doesn't have better options.

            I think that WC has some systemic issues (complexity, visibility) that have slowed adoption, but most folks would be shocked by how easy it is to get started with packages like Shoelace.

            Long story short, I don't think that there's anything particularly wrong with your offering. I personally wouldn't recommend that anyone do anything in React/Vue at this stage - these are legacy technologies with developer communities that haven't realized they've been disrupted yet. Focus on the future, friend.

            1. 1

              Thank you for the response, I guess you have years if not decades in this industry (MY RESPECT <3).

              these are legacy technologies with developer communities that haven't realized they've been disrupted yet

              Focus on the future, friend

              I thought the future is about these Frameworks! these Frameworks make it possible to develop some Web Apps that was hard/impossible to build before.

              1. 2

                I feel a lot of anger about the way React has been sold as this progressive future vision. The buyer of that view is typically people who have recently learned or career switched into coding... situations where they often pay $$$ to code bootcamp programs to tell them how they are going to provide for their families. So of course they get emotionally attached to the thing that they are taught, defending it becomes part of your identity since if you don't know how other things could be far better, it causes you pain to confront the idea that maybe you've put all of your betting chips on something that was already approaching its natural zenith when you got in the door.

                Don't get me wrong, React and co are not going anywhere any time soon, but more and more people are waking up to the realization that these tools - pushed by the largest corporations in the world, who are happy to have developers believe that their tools are necessary to build the web - are not actually the best choice for most applications.

                I've mentioned StimulusReflex as an example of technologies that are better at reacting than React. It's far from the only option. Phoenix LiveView, Laravel LiveWire... all of these frameworks keep application state logic on the server where it belongs, only broadcasting changes to the client. This cuts down on development complexity by 80% or more compared to working in React.

                A lot of React folks hate hearing this, it makes them go freaking crazy because it directly challenges the narrative that has to be true for them to feel secure. Instead of getting angry, I wish that they'd get curious.

                1. 1

                  ...Laravel LiveWire... all of these frameworks keep application state logic on the server where it belongs, only broadcasting changes to the client.

                  I'm spending more time focusing on the business side so I neglected what's new in tech.

                  This is a game-changer, I left Laravel just because I wanted to build modern dynamic apps using Vue (SSR). In fact, many people switched to Node+(Vue/React) stack just to build SSR apps.

                  This makes me happy because I can take the benefits of very strong and robust frameworks to do the same work but with less complexity. it's the future!

                  1. 2

                    Right on. You might get a kick out of this post from Obie Fernandez this morning: https://twitter.com/theleastbad/status/1313131504554381312

                    If you ever need help with Rails/StimulusReflex, your best bet is to join the Discord: https://discord.gg/XveN625

      2. 1

        Thanks! I had taken a look at this a few weeks (?) back when you launched, and then it fell out of my memory. I will take a look. I suppose my question is, even if I use this for the front end, I also need an admin section/theme, so how will this play with that? I imagine I can just use two different CSS files, one for the landing page and one for the rest of the app.

        1. 1

          I also need an admin section/theme, so how will this play with that?
          I thought you only need a landing page.

          Are you using different Templates for building your app (template for the landing page, another template for the dashboard, etc)?

          1. 1

            Hamza. Thanks for the reply. Primarily the immediate problem to solve is a decent looking landing page. However, so far I have been hand coding the admin pages that a user sees when they log in. It should be good enough for the first few users, but I suspect when I stop on boarding users one by one I will need a more "professional" admin section. I just want to make certain that I am not causing too much trouble for my future self.

  3. 2

    I have also encountered the same problem when I wanted to integrate a paid boostrap theme I bought into my Rails app. Most of the issues are because I am not familiar with javascript and the webpacker side of stuff.

    I have since managed to solve the issues by reading up on some webpack articles, I have written a tutorial on how to integrate Bootstrap theme to Rails 6 here : https://rubyyagi.com/how-to-integrate-html-bootstrap-theme-into-rails-6/ , hope this can help!

    1. 1

      This is phenomenal. Thank you (seriously)!

  4. 2

    Hey everyone, just to follow up on what I ended up doing. First, a big thank you to all the replies. At some point I will definitely dig through the code suggested by @Tjones4413 and glad I could spark some conversation between @leastbad and @hamza__nouali.

    I ended up going with @Frontendor from @hamza__nouali (and his co-founder). I primarily went this way because of the ease of adding the components and adjusting the css. I still haven't implemented the JS, but the library seems much simpler than the teme I purchased. Additionally, unlike the theme shop (which repeatedly pushed back on providing a refund after refusing to provide any real support) @hamza__nouali responded in a very timely fashion and went out of his way to re-write some of my code modification.

    Well done, sir!

    1. 1

      That's awesome!

      Thanks for the follow-up, too.

  5. 2

    👋 Happy to take a look at your code if you have it hosted on GitHub or similar

    1. 1

      Thank you, just sent you an email with the repository and additional information on what I have done so far.

  6. 1

    Hey @mikeneedle. I'm also using a bootstrap theme at btfy.io. You don't actually copy-paste the JS in the themes. You're gonna implement it one by one or as needed. I recommend you use StimulusJS so it's easier.

  7. 0

    I'm using Frontendor to build my landing pages, it doesn't need Webpack or any other bundler. It's just HTML, CSS and JavaScript (no jQuery).
    You'll end up building your landing page in 1 hour.

    Watch this: https://youtu.be/CqAp1TSACf4

    Let me know if you have any question :p

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments