Skip to content

Instantly share code, notes, and snippets.

@andrewmcodes

andrewmcodes/WORKFLOW.md

Last active July 6, 2021 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewmcodes/0b16db1f0f48f8634f5b187c32fec2c0 to your computer and use it in GitHub Desktop.
Save andrewmcodes/0b16db1f0f48f8634f5b187c32fec2c0 to your computer and use it in GitHub Desktop.
Download ZIP
Snowpack + Bridgetown + Tailwind + Vercel
Raw
bridgetown.config.yml
#
# Docs: https://www.bridgetownrb.com/docs/configuration/options/
#
# Change the directory where Bridgetown will write files.
# 🚨 Referenced on line 8 of `snowpack.config.mjs`
destination: bridgetown
# Change the template engine Bridgetown uses by default to process content files. This is OPTIONAL unless you want to use ERB.
template_engine: erb
permalink: simple
timezone: America/Phoenix
content_engine: resource
Raw
default.erb
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="/dist/styles/index.css" />
<!-- ... -->
<body class="<%= class_map "debug-screens": Bridgetown.env.development? %>">
<div class="min-h-screen bg-primary-black">
<%= render "site_header" %>
<main class="mx-auto">
<%= yield %>
</main>
</div>
<%= render "footer", metadata: site.metadata %>
<!-- Include JS in your layout or a partial in your layout -->
<script type="module" src="/dist/javascript/index.js"></script>
<!-- -->
</body>
</html>
Raw
snowpack.config.mjs
// https://www.snowpack.dev/reference/configuration
// note that as of 2021-07-06 06:36 this has not had the optimizations cranked up for the final production deploy though this could be used as is if you’re using a similar stack (ie postcss instead of sass). Excuse any mess.
/** @type {import("snowpack").SnowpackUserConfig } */
export default {
mount: {
bridgetown: { url: "/", static: true },
frontend: "/dist",
},
exclude: ["**/node_modules/**/*", "**/.vercel/**/*", "**/tmp/**/*"],
plugins: [
"@snowpack/plugin-postcss",
[
"@snowpack/plugin-run-script",
{
name: "bridgetown",
cmd: "bundle exec bridgetown build",
watch: "$1 --watch --quiet",
},
],
],
packageOptions: {
// types: true,
NODE_ENV: true,
},
devOptions: {
tailwindConfig: "./tailwind.config.js",
open: "none",
hmrDelay: 300,
output: "stream",
},
buildOptions: {
out: "output",
// metaUrlPath: "snowpack",
sourcemap: false,
},
optimize: {
// bundle: true,
// minify: true,
target: "es2018",
sourcemap: false,
},
};
Raw
WORKFLOW.md
  1. snowpack dev
  2. Bridgetown builds to bridgetown/
  3. Snowpack builds that output + output of your frontend assets to out/
  4. Runs with hot reloading on localhost:8080
  5. Build for production BRIDGETOWN_ENV=production snowpack build
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment