Jumpstart docs logo Back to the app

JavaScript

Jumpstart Pro leverages Stimulus.js for a variety of interactive components. Feel free to reach for any front-end framework you may need, just keep in mind that you'll want it to be Turbo compatible.

Bundling JavaScript

Jumpstart Pro uses esbuild, which is a JavaScript bundler and minifier written in Go, to bundle your JavaScript. It's fast, and it's easy to use.

When developing your application, Jumpstart Pro defaults to having a configuration setup that will watch for changes in your views, JavaScript, or stylesheets and reload the page when it detects changes. This helps speed up your development process by not having to manually refresh the page every time you make a change or run commands to rebuild your assets.

JavaScript Packages

Jumpstart Pro comes with a few JavaScript packages pre-installed. You can find them in the dependencies section of the package.json file.

One of the packages is our own tailwindcss-stimulus-components package which is a set of StimulusJS controllers and components for TailwindCSS apps similar to Bootstrap JS components. This package has components of it's own which you can find links to in the Components section of the README in the repository.

Jumpstart Pro has some of the controllers from this package already imported in the app/javascript/controllers/index.js file by default: 

import { Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from  "tailwindcss-stimulus-components"
If you need to import any of the remaining controllers from this package, you can do so by adding to that line. The controllers are all listed here.

The StimulusJS controllers from the tailwindcss-stimulus-components package and the components from Jumpstart Pro or any of your own code can be wired up together easily, saving you time and effort. For example, it can be used to add show and hide functionality to the Jumpstart Pro alert components.

Adding Additional JavaScript Packages

Adding new JavaScript packages to your application is easy. You can use the yarn add command to add new packages to your application. For example, if you wanted to add the SortableJS package to your application, you could run the following command: 

yarn add sortablejs

Once you have run the above, you can then import the package in your JavaScript file with: 

import Sortable from 'sortablejs'