Skip to content

Configuration

You've installed Superglue and now you're ready to configure your app.

application_visit.js

Modify the application_visit.js file to intercept and enhance Superglue's core navigation functions. It contains a single exported factory that builds the remote and visit functions that will be used by Superglue, your application, and the UJS attributes data-sg-visit and data-sg-remote.

The pattern looks like this:

export const buildVisitAndRemote = (ref, store) => {
  // Your custom logic here
  return { visit: appVisit, remote: appRemote }
}

To get you started, the generator creates an application_visit.js file with your first custom UJS attribute: data-sg-replace, which allows a link click or form submission to replace history instead of the usual push.

  const navigationAction = !!dataset?.sgReplace
    ? "replace"
    : meta.navigationAction

This is where you'll add progress bars, error handling, custom UJS attributes, analytics tracking, or any navigation behavior your app needs. Since every navigation goes through these functions, you have complete control over the developer experience.

page_to_page_mapping.js

Info

Stop by the tutorial to learn how to work with this file.

Vite Users This step can be entirely optional if you're using Vite. See the recipe for more information.

This file exports a mapping between a componentIdentifier to an imported page component. This gets used in your application.js so that superglue knows which component to render with which identifier.

For example:

const pageIdentifierToPageComponent = {
  'posts/edit': PostsEdit,
  'posts/new': PostsNew,
  'posts/show': PostsShow,
  'posts/index': PostsIndex,
}

application.js

This is the entry point of your application and uses Superglue's [Application] component. There's nothing to do here, but if you need finer control of how redux is setup, you can build your own Application using the source as inspiration.

flash.js

The installation generator will add a flash.js slice to app/javascript/slices and will work with the Rails flash. You can customize it to pass any temporary props that would last as along as flash.now or flash. The file is an example of a custom slice.