Version 0.1.5 by Ellie and Daddy aka Dave Peck <davepeck@gmail.com>.
🐱 and 🐶 boilerplate makes it super simple to write and deploy simple React + TypeScript front-end sites. My daughter and I use it to play with "modern" web development.
🐱 and 🐶 automagically deploys to the real web! When you make changes to the main branch and push them to GitHub they are tested and, if successful, automatically deployed (see below).
🐱 and 🐶 is best with a clean install of VSCode. The rule is this: if a fresh install of VSCode flags errors in your code, it won't pass its tests, and therefore won't deploy. On the other hand, if a fresh install of VSCode is happy with your code, then tests will pass.
You'll need to install Node 20.
There are lots of ways to do this; it depends on your own set-up. If you have a Mac, consider installing node via HomeBrew.
Then clone this repository, npm install, change the CNAME to the name of the website you want to deploy to, and get coding on App.tsx and App.css.
Use npm run dev and visit http://localhost:5173/. It'll automatically refresh when you change most app content.
It's super easy!
Push your code to a new repository on GitHub and enable GitHub Pages for that repository. (You can do this by visiting the repository's main page, clicking on Settings, and then clicking on Pages.)
Every time you push to the main branch after that, the built-in GitHub Actions will deploy to GitHub Pages by running npm run ci to test, and then npm run build. If both are successful, the contents of the ./dist/ directory are placed into the root of the gh-pages branch.
If you have a file named CNAME in the top-level of your main branch, that CNAME will also be used in the gh-pages branch.
Please do!
The goal for 🐱 and 🐶 is to be the simplest possible "modern" front-end boilerplate. We want be as minimal as possible while still supporting React, TypeScript, and instant deployment to GitHub Pages.
If something 🐱 feels missing to you, please submit a PR that adds it. And if something 🐶 feels extraneous to you, please submit a PR that removes it. Thanks!
This template:
- Uses Vite 5 as our key frontend tool
- Includes React 18
- Includes TypeScript 5
- Contains out-of-the-box configuration for VS Code that lints and formats on every save with VSCode's built-in rules
- Includes modern-normalize
- Has built-in GitHub Actions to automatically deploy changes to the main branch to GitHub Pages, a static web host.
- Has a asdf
.tool-versionsfile if you happen to like to installnodeand friends using that tool - Is sure to bring joy to small children everywhere.