GUIDE_STEPS.md

Guide: Steps

🚧 WIP

Steps to know, check, or redo.

Prerequisites

OS-level

Choose one for each category.

1. Code editor: Vim, VS Code
2. Terminal app: Warp, iTerm
3. Version control: Git
4. JavaScript runtime: Node.js

Account-level

Choose one for each category.

1. Email: Gmail, Skiff Mail
2. Credential manager: Bitwarden, 1Password
3. Repository: GitHub, GitLab, Bitbucket
4. Deployment: Vercel, Netlify, Render.com, Railway.app, Fly.io
5. Secrets: Doppler, etc

Git

Initialize or clone the repo. Preferably with SSH URL.

git clone [email protected]:dogokit/dogokit-remix.git

Ignore some files.

.gitignore

README

README.md

LICENSE

LICENSE

Code of Conduct

CODE_OF_CONDUCT.md

package.json

Check for the dependencies.

Check the scripts for:

• App-related tasks
• check:*: Code check commands
• fix:*: Code fix commands
• db:*: Database-related commands

Node.js Dependencies with pnpm

npm install -g pnpm

pnpm install

Can also check the version updates with taze:

pnpm taze

Config to enable some features for pnpm:

.npmrc

Prettier

Formatter with various plugins.

.prettierrc.js

ESLint

Linter with various plugins.

.eslintrc.cjs

Note that ESLint does not support ESM configuration at this time.

Stylelint

.stylelintrc

commitlint

.commitlintrc

TypeScript

tsconfig.json

Remix Config

remix.config.js

Also to enable tailwind and postcss.

Favicons

Use Real Favicon Generator.

Remove the site.webmanifest file as in Remix it will be handled dynamically.

Use TinyPNG to compress the images.

Configure in Remix root.tsx

Tailwind CSS & PostCSS

pnpm install -D tailwindcss postcss autoprefixer
pnpm install -D @tailwindcss/typography @tailwindcss/forms tailwindcss-animate

tailwind.config.ts
postcss.config.js

Radix UI

No config necessary.

But if install the packages manually:

pnpm install @radix-ui/react-slot

shadcn UI

Skip this if not prefer to use it.

Automatically setup Tailwind CSS, PostCSS, Radix UI, Class Variance Authority, clsx, Tailwind Merge, and more.

pnpx shadcn-ui@latest init

But if install the packages manually:

pnpm install class-variance-authority clsx tw-merge

Then follow the next installation steps. The components are configured in:

components.json

Then can install the UI component as needed:

pnpx shadcn-ui@latest add component-name

Progress Bar

...

Icons

shadcn UI install Lucide React icons by default, which can be removed and replaced.

Use Iconify (@iconify/react) to get any popular icons via Icônes.

Fonts

Use Fontsource to install the font locally without using online-required Google Fonts.

pnpm install @fontsource-variable/font-name
# or
pnpm install @fontsource/font-name

Theme Mode

TBA

Docker

TBA

Docker Compose

docker-compose.yml

docker compose up -d

MySQL on a Docker container

TBA

MySQL on PlanetScale

TBA

Environment Variable

.env.example

For local development:

.env

For production copy if needed:

.env.production

Prisma ORM

pnpm db:push
pnpm db:reset
pnpm db:generate
pnpm db:seed
pnpm db:studio
pnpm db:docs

References:

• https://planetscale.com/docs/prisma/automatic-prisma-migrations

---

Extra

Some extra stuffs are below.

VS Code

• Change workspace color
• Install recommended extensions

Remix Forge

VS Code extension to generate configurable Remix code.

Code-Forge-Net/Remix-Forge

Remix Dev Tools

Code-Forge-Net/Remix-Dev-Tools