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:
- Turbo (
turbo
) - Stimulus (
stimulus
) - TailwindCSS (
tailwindcss
) - PurgeCSS Post-Build Hook (
purgecss
) - Bridgetown recommended PostCSS plugins (
bt-postcss
) - Render YAML Configuration (
render
) - Netlify TOML Configuration (
netlify
) - Vercel JSON Configuration (
vercel
) - GitHub Pages Configuration (
gh-pages
) - Automated Test Suite using Minitest (
minitesting
) - Cypress (
cypress
)
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 turbo,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
Bridgetown recommended PostCSS plugins
โ๏ธ 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
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
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