Remix and Tailwind CSS simple page block editor. Built by saasrock.
- β Remix v2 + React v18
- β Dockerfile: Demo is now hosted on Fly.io
- β Vercel demo: Translations take a second to load. I still don't know how to implement
i18n-fetch-backend
for Vercel.
https://www.loom.com/share/eccf927d35cd4ad3b4a1d512257cea53
πΏ Rename .env.example
to .env
and set your variables.
πΏ Install all the dependencies.
npm install
πΏ Run the app.
npm run dev
πΏ Set the app name
and primary region
at fly.toml.
app = "YOUR_APP_NAME"
...
primary_region = "iad"
The primary region should match your database (e.g. Supabase) region.
πΏ Create the app using fly
CLI:
fly apps create YOUR_APP_NAME
πΏ Set your secrets:
You can see the examples at .env.fly.example
.
flyctl secrets set \
SERVER_URL=https://YOUR_APP_NAME.fly.dev \
SESSION_SECRET=abc123 \
APP_NAME="Remix Page Blocks" \
CONVERTKIT_APIKEY=abc123 \
CONVERTKIT_FORM=abc123 \
GITHUB_TOKEN=abc123 \
CONTACT_FORMSPREE=abc123 \
--app YOUR_APP_NAME
πΏ Deploy the app:
fly deploy --remote-only
πΏ (Optional) Scale
fly scale vm shared-cpu-2x --app YOUR_APP_NAME
Pages are built using blocks.
...
export function defaultLandingPage({ t }: { t: TFunction }) {
const blocks: PageBlockDto[] = [
// Banner
{
banner: {
style: "top",
text: "Upgraded to Remix v2 + React 18 β¨"
cta: [{ text: "Meet saasrock", href: "https://saasrock.com/?ref=remix-page-blocks-banner-v2", target: "_blank" }],
},
},
// Header
{
header: {
style: "simple",
withLogo: true,
withSignInAndSignUp: false,
withThemeSwitcher: true,
withLanguageSwitcher: true,
links: [
{ path: "/", title: t("blocks.header.product") },
{ path: "/contact", title: t("blocks.header.contact") },
{ path: "/newsletter", title: t("blocks.header.newsletter") },
],
},
},
// Hero
{
hero: {
style: "simple",
headline: "Remix Page Blocks",
subheadline: "A collection of functional blocks: Header, Footer, Hero, Banner, Features, Logo Clouds, Community, Embeded Video, Testimonials, FAQ, Contact, Newsletter, and more.",
image: "https://via.placeholder.com/720x600?text=Your%20Hero%20Image",
cta: [
{
text: "View on GitHub"",
href: "https://github.com/AlexandroMtzG/remix-page-blocks",
isPrimary: true,
},
{
text: "Built by SaasRock"",
href: "https://saasrock.com/?ref=remix-page-blocks-hero",
isPrimary: false,
target: "_blank",
},
],
topText: {
text: "Remix 2.3.1 β¨ Tailwind CSS 3.3.5 π
DaisyUI 2.42.1",
},
},
},
// Logo Clouds
// Gallery
// Video
// Community
// Testimonials
// Features
// Newsletter
// Faq
// Footer
...
];
return blocks;
}
Result: