Backend

Frontend

Extras

Webpacker

Jumpstart Pro is built using Webpacker as the primary tool for compiling both Javascript and CSS stylesheets.

Javascript & Babel

Rails 6 uses Webpacker instead of the asset pipeline for providing a more modern Javascript build process. This moves all our Javascript code to app/javascript and allows us use of webpack-dev-server to automatically reload our JS and CSS after save.

webpacker (and webpack) are often changing, so if you run into issues, take a look at the webpacker issues on github.

We are using the following Javascript libraries and features:

  • Turbolinks
  • StimulusJS
  • Tippy for Tooltips
  • Trix, a Rich text editor used by ActionText
  • TailwindCSS Stimulus Components for Dropdowns, Modals, Tabs, etc.
  • Local Time to converts timestamps to the browser's timezone so your app doesn't have to
  • All forms are submitted with AJAX using form_with and Rails UJS for Turbolinks iOS and Android compatibility so you can easily make a mobile version of your Jumpstart Pro app
  • Overriding Rails UJS data-confirm to use a custom Tailwind confirm modal
  • Direct uploads for file uploads with Trix
  • Automatic detection of user's browser timezone and saving to their account on registration
  • Payments integrations for Stripe Elements and Braintree Dropin UI

Stimulus JS

Our Javascript framework of choice in Jumpstart Pro is StimulusJS. This gives us extremely lightweight Javascript sprinkles of functionality with complete flexibility of the HTML it gets applied to.

We're using Stimulus for several pieces of functionality:

  • User @mentions in Trix editor with ActionText
  • PayPal payments form
  • Braintree payments form
  • Stripe payments form
  • Pricing plans toggle
  • TailwindCSS components (Dropdowns, Modals, Tabs, etc.)

We also override data-confirm to use TailwindCSS modals with the default Rails UJS functionality.

The Javascript for Stimulus components can be found in app/javascript/controllers.

TailwindCSS

Jumpstart Pro uses TailwindCSS 1.0 as the CSS framework. We've included a nice default theme and helpers to make using TailwindCSS as easy as Bootstrap. Check out the Frontend section of the docs for more information on how to use the comopnents we have created for you.

Tailwind is processed using PostCSS. The Tailwind config is located app/javascript/stylesheets/tailwind.config.js. You can use this file to tweak colors, fonts and other defaults.

The components are located in app/javascript/stylesheets/components/. You will find an organized set of files for each component in the app design there.

PurgeCSS

We have included PurgeCSS by default to automatically remove unused CSS when deploying to production. This greatly reduces the size of TailwindCSS in production to deliver a much faster experience in production.

PurgeCSS works by searching folders for exact matches of any CSS classes in your app. By default, we have configured PurgeCSS to look for CSS classes used in app/views/**/*.html.erb and app/helpers/**/*.rb. Any CSS classes referenced in these files will automatically be kept for production.

To add more search paths to PurgeCSS, add them to postcss.config.js.