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.

bridgetown new my_project -c swup,purgecss

Configuration Setup Details

Turbo

โš™๏ธ Adds and configures Turbo.

๐Ÿ›  Configure using:

bin/bridgetown configure turbo

An optional script (turbo_transitions.js) is provided to add transition animation to Turbo navigation. If you donโ€™t wish to use any transition animations, youโ€™re welcome to delete the file. You can also edit the script to adjust the animation style or change the element being animated from <main> to whatever you prefer.

It is recommended you add the data-turbo-track="reload" attribute to the script and CSS link tags in your HTML head. This will allow Turbo to perform a full page reload any time newly-deployed assets are available.

Stimulus

โš™๏ธ Sets up Stimulus and adds an example controller.

๐Ÿ›  Configure using:

bin/bridgetown configure stimulus

TailwindCSS

๐Ÿƒ Adds TailwindCSS with an empty configuration along with PurgeCSS.

Please be aware that you need to have PostCSS installed to run this configuration.

This configuration will overwrite any existing postcss.config.js file.

๐Ÿ›  Configure using:

bin/bridgetown configure tailwindcss

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.

๐Ÿ›  Configure using:

bin/bridgetown configure purgecss

โ›“๏ธ 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.

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

Vercel JSON Configuration

โš™๏ธ Adds a basic configuration to your site for use in Vercel deployments along with a builder to ensure Bridgetown uses the correct absolute_url on preview deployments.

๐Ÿ›  Configure using:

bin/bridgetown configure vercel

Automated Test Suite using Minitest

โš™๏ธ Adds a basic test suite using Minitest and Rails DOM assertions for extremely fast verification of your output HTML. Check out our automated testing guide for more info!

๐Ÿ›  Configure using:

bin/bridgetown configure minitesting

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