Skip to main content
Documentation Setup

Bundled Configurations

Bridgetown bundles a number of automation scripts to set up common project configurations. You can run these scripts using bin/bridgetown configure [CONFIGURATION]

The configurations we include are:

The full list of configurations can also be seen by running bridgetown configure without arguments.

Bundled configurations can also be run while creating a new Bridgetown project using the --configure= or -c flag and passing in a comma-separated list of configurations.

Looking for Tailwind?

The bundled configuration for TailwindCSS has been relocated to a separate community-maintained repo. The Bridgetown core team recommends looking into options such as Open Props, Web Awesome, and otherwise “vanilla” CSS (perhaps with a bit of help from PostCSS) as a best practice for “Use the Platform”, future-compatible frontend development.

Looking for Turbo or Stimulus?

The bundled configurations for Turbo & Stimulus have been relocated to a separate community-maintained repo.

Configuration Setup Details #

SEO #

🔍 Adds metadata tags for search engines and social networks to better index and display your site’s content. Check out the gem readme for more info and configuration options.

🛠 Configure using:

bin/bridgetown configure seo

Feed #

🍽️ Generate an Atom (RSS-like) feed of your Bridgetown posts and other collection documents. Check out the gem readme for more info and configuration options.

🛠 Configure using:

bin/bridgetown configure feed

Web Awesome #

👑 Installs Web Awesome for an instant design system and UI component library at your fingertips. Use CSS variables and shadow parts to customize the look and feel of Web Awesome components in any way you like. This very website uses Web Awesome for example.

Individual components can be imported by adding the import statement to the ./frontend/javascript/index.js file. Refer to Web Awesome documentation Importing section for each individual component, and copy the import statement under the “npm” tab.

Read more at Frontend Bundling (CSS/JS/etc.).

🛠 Configure using:

bin/bridgetown configure webawesome

Automated Test Suite using Minitest #

⚙️ Adds a test suite using Minitest and Rack::Test which lets you test both static and dynamic routes. Check out our automated testing guide for more information.

🛠 Configure using:

bin/bridgetown configure minitesting

Open Props #

🎨 Installs Open Props, a collection of “supercharged CSS variables” and optional normalize stylesheet to help you create your own design system.

🛠 Configure using:

bin/bridgetown configure open-props

Lit #

🔥 Sets up Lit plus the Lit SSR Renderer plugin and adds an example component. Every Lit component is a native web component, with the superpower of interoperability. This makes Lit ideal for building shareable components, design systems, or maintainable, future-ready sites and apps.

🛠 Configure using:

bin/bridgetown configure lit

Read our full Lit Components documentation here.

Ruby2JS #

🔴 Installs Ruby2JS, an extensible Ruby to modern JavaScript transpiler you can use in production today. It produces JavaScript that looks hand-crafted, rather than machine generated. You can convert Ruby-like syntax and semantics as cleanly and “natively” as possible. This means that (most of the time) you’ll get a line-by-line, 1:1 correlation between your source code and the JS output.

Write your files in frontend/javascript or in src/_components with a .js.rb extension and they’ll be supported the same way as .js file by Bridgetown’s frontend bundling pipeline.

🛠 Configure using:

bin/bridgetown configure ruby2js

⛓️ Installs and configures a set of PostCSS plugins recommended by the Bridgetown community:

It will also configure postcss-preset-env to polyfill all features at stage 2 and above. If you don’t need certain polyfills for your use case, you can bump up stage to 3 or 4 (for example, custom properties won’t get polyfilled if stage is set to 4). nesting-rules and custom-media-queries are explicitly enabled.

This configuration will overwrite your postcss.config.js file.

🛠 Configure using:

bin/bridgetown configure bt-postcss

If you’d like to customize your setup further you can find more plugins here.

PurgeCSS Post-Build Hook #

🧼 Adds a builder plugin which runs PurgeCSS against the output HTML + frontend JavaScript and produces a much smaller CSS output bundle for sites which use large CSS frameworks. NOTE: do not install this if you are also installing Tailwind, as this plugin and the Tailwind JIT will conflict with one another.

🛠 Configure using:

bin/bridgetown configure purgecss

Render YAML Configuration #

⚙️ Adds a static site service defined in YAML to your site for use in Render deployments.

🛠 Configure using:

bin/bridgetown configure render

Netlify TOML Configuration #

⚙️ Adds a basic configuration to your site for use in Netlify deployments.

🛠 Configure using:

bin/bridgetown configure netlify

GitHub Pages Configuration #

⚙️ Sets up a GitHub Action so you can host your Bridgetown site directly on GitHub.

Make sure you follow the provided instructions after you run this command so your base_path is configured correctly.

🛠 Configure using:

bin/bridgetown configure gh-pages

Cypress #

⚙️ Installs and sets up Cypress for browser based end-to-end testing. Check out our automated testing guide for more info!

🛠 Configure using:

bin/bridgetown configure cypress

Command Line Usage