sourdough

Sourdough is the starter (get it?) for web apps at The Michigan Daily.

It has several useful features:

• React as a dependency by default
• MicroCMS with ArchieML
• Data ingest from Google Sheets
• Bundling with Vite
• Easy deploy to S3 bucket
• Easy deploy to GitHub Pages

Using this template

Click the green "Use this template" button to create a new instance of the sourdough template. Then, clone the new instance and run pnpm install to initialize the project.

You can use pnpm dev to start a development server and pnpm build to build production-ready files into dist/.

Importing images

If you want to import an image with a static name, you can simply import it:

import photo from "../assets/photo.jpg";

const Component = () => (
  <img src={photo} alt="Alternative text" />
)

If you want to import images with variable names, you'll need to use a URL constructor and import.meta.url:

const Component = ({ image }) => (
  <img src={new URL(image, import.meta.url).href} alt="Alternative text" />
)

That said, you'll probably want to be importing images by using a CDN (e.g. Jetpack).

Fetching from Google Drive

Refer to the Usage section in the sink README for instructions on how to set up config.json for fetching files from Google Drive.

You can import a JSON file in JS like this:

import copy from "../data/data.json";

You can import a CSV file in JS like this:

import csvfile from "../data/data.csv";

We use the @rollup/plugin-dsv plugin (which relies on d3-dsv) to parse the CSV file into a usable array.

Deploying to AWS S3

Refer to the AWS S3 deployment with cache invalidation section in the sink README for instructions on how to set up config.json for deploying to AWS S3.

1. Make sure that base in vite.config.js is routed correctly (it should probably be config.key prepended by a /).
2. Run pnpm sink deploy aws.

Deploying to GitHub Pages

Refer to the GitHub Actions workflow. Use the manual workflow dispatch.