replicate.md

Steps to replicate this setup

Create new remix app

npm create remix@latest

Install dependencies

pnpm install

Setup Prettier

pnpm add prettier --save-dev
touch .prettierrc

Setup Tailwind

pnpm add @tailwindcss/typography @tailwindcss/forms prettier-plugin-tailwindcss

Add to tailwind.config.ts

{
    ...,
  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
};

Add to .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Install utilities

pnpm add clsx pretty-cache-header

Setup ESLint

pnpm create @eslint/config@latest

Setup .cursorrules

touch .cursorrules

Then add your coding styles and information about your project.

Setup Plausible

• add Plausible proxy via app/routes/api.event.ts for tracking the pageviews
• add Plausible script proxy via app/routes/js.script.js
• add Plausible tracking function via app/lib/plausible.ts
• add script to app/root.tsx:

<script
  defer
  data-api="/api/event"
  src="/js/script.js"
  data-domain={config.productionDomain}
></script>

Setup Meta/SEO/OG

Files to add/update:

• app/config.ts
• app/root.tsx
• Sitemap: app/routes/[sitemap.xml].tsx
• Robots: app/routes/[robots.txt].tsx
• Webmanifest: app/routes/[webmanifest.json].tsx
• other
  • icons
  • theme colors
  • metas
  • webmanifest
  • og meta tags