create-bison-app

The Full Stack Jamstack in-a-box

Bison is a starter repository created out of real-world apps at Echobind. It represents our team's "Greenfield Web Stack" that we use when creating web apps for clients.

We're always improving on this, and we welcome suggestions from the community!

Technology

• Next.js
• TypeScript
• tRPC API for end-to-end type safety
• Prisma w/ Postgres
• Tailwind
• React Hook Form
• Playwright for E2E tests
• React Testing Library and Jest for unit and API request tests

Features

• Customizable Hygen Templates to generate new files
• Fully wired up login/signup pages with client and server-side validation.
• Eslint pre-configured with Echobind best practices
• Import path alias to the root project folder (@/) to avoid the need for long relative import paths.
• Set up for components from ui.shadcn.com

Conventions

• Don't copy/paste files, use generators and Hygen templates. Need to update the generator as your project evolves? they are all in the _templates folder.
• Don't manually write types for tRPC procedures. Infer the types from the router definition.
• All frontend pages are static by default. If you need something server rendered, just add getServerSideProps like you would in any Next app.
• Instead of creating component CSS classes (like .btn or .input) or installing a component library, UI components should be copy/pasted into the /components/ui folder and adjusted as needed. ui.shadcn.com is the recommended source for these components.

Tradeoffs

• To reduce complexity, Bison avoids yarn workspaces and separate top-level folders. Think of your app like a traditional monolith, but with a separate frontend and API. This means that folders may be a little more intermingled than you're used to.

Alternatives

A few other projects that are rapidly maturing in the Full Stack Jamstack space.

RedwoodJS Redwood is a very promising framework that we're watching. We took the concept of "Cells" directly from Redwood (though admittedly our version takes a bit more code!)

Blitz.js Blitz is also very promising. Blitz is built on Next.js (which we love!) and takes a very different approach by attempting to remove the API layer using conventions provided by Next.js.

We may borrow concepts from Redwood and Blitz over time or even switch to one as they continue to mature.

Think of Bison as a bit closer to the metal and preconfigured for maximum DX and efficiency. The good news is, if you disagree with any of the choices that we've made, nothing is hidden from you. You're welcome to adapt the "framework" to fit your needs.

---

Getting Started

Create a new repo from the Bison template.

Using yarn:

yarn create bison-app MyApp

Using npx:

npx create-bison-app MyApp

Setup the database

Please refer to: Set up Postgres.

Run the app locally

From the root, run yarn dev. This runs next dev to run the frontend and serverless functions locally.

Next Steps

After the app is running locally, you'll want to set up deployment.

Docs

• Recommended Dev Workflow
• Deployment

Have an idea to improve Bison? Let us know!

---

About Echobind

Echobind is a full-service digital agency that creates web and mobile apps for clients across a variety of industries.

We're experts in React, React Native, Node, GraphQL, and Rails.

If you're building a new app, your team is tackling a hard problem, or you just need help getting over the finish line, we'd love to work with you. Say hello and tell us what you're working on!

Changelog

1.13.0-canary.27 (2023-08-19)

Bug Fixes

• prisma type error (6e1f273)