Webie.dev

Note

Welcome to webie.dev, this is a open-source project for building modern web.

Tech Stack

• Framework: REMIX
• Database: MongoDB
• ORM: Prisma
• Style: tailwindcss
• UI LIbrary: shadcn/ui
• Email SDK: Resend

Why use Webie?

1. Totally free without branding logos.
2. You own the codebase.
3. Fully modulized, take what you want and build with Typescript, HTML, JSX, and inline class (tailwindcss)
4. Built-in blog system with WYSIWYG text editor.
5. Optimized for performance, start with score 100, tested by PageSpeed.
6. Authenticate with Email Magic Link.

---

Required documents

1. environment variable file .env in the root directory (/)

Before you start

You should:

1. Have a useful IDE. (e.g. Visual Studio Code)
2. Have a MongoDB Atlas (MongoDB's cloud service) account to host your database, every project has up to 1 free 512MB M0 cluster.
3. Have a Resend account to send email.

[!INFO] You should allow all IPs, or all posible IPs, to connect to your MongoDB Atlas project when deploy, because deploying services often run various IPs. Go to your project in MongoDB Atlas Network Access > Actions > EDIT > Allow access from anywhere.

4. Have either Cloudflare Turnstile, reCAPTCHA v3 (upcoming...) or hCaptcha (upcoming...) to secure your subscribe form.
5. Chose where to deploy your Webie application.

Usage

1. Copy and configure the required environment variables

If you haven't creat a .env file:

Run this in / shell.

mv .env.sample .env

1. SUPER_EMAIL: Your super admin email.
2. DATABASE_URL: We are using MongoDB, please replace your Username, Password, and name your Database Name.
3. (optional) VITE_TURNSTILE_SITE_KEY: This key is used to get Turnstile token in client, if you use Cloudflare Turnstile as captcha, so should be exposed in the frontend with VITE_ prefix.
4. (optional) TURNSTILE_SECRET_KEY: Used to verify Turnstile token get in the frontend in the backend
5. AED_SECRET: Used to encrypt your magic link for authentication flow. Run node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" to get one.
6. COOKIE_SECRET: Used to make your cookies secure. Run node -e "console.log(require('crypto').randomBytes(64).toString('hex'))" to get one
7. RESEND_API_KEY: Send emails via Resend.
8. BASE_URL: This is the domain where you're hosting your Webie. e.g. BASE_URL=webie.dev
9. (optional) GOOGLE_GENERATIVE_AI_API_KEY, OPENAI_API_KEY, ANTHROPIC_API_KEY: For use of Generative AI in /admin/api/ai
10. OBJECT_STORAGE_ACCESS_KEY_ID, OBJECT_STORAGE_SECRET_ACCESS_KEY, OBJECT_STORAGE_ACCOUNT_ID: Where you save your objects, accept S3 compatible services. Using in route /admin/api/object-storage

Warning

VITE will expose any environment variable with VITE_ prefix, please use it carefully.

2. Install and generate prisma schema, then start

Run this in / shell to install packages and generate prisma schema for database.

npm i && npx prisma generate && npx prisma db push

3. Start in dev mode

For first time ever, you should set super admin email address in .env file, and make sure your email server has set (fill in your RESEND_API_KEY). Then run npm run check-admin && npm run dev, it will send a verification email to you. After verify, webie will create an ADMIN role user and you will see role : "ADMIN" in the database User table.

Run this in / shell to start in dev mode, press q to exit application, r to restart.

npm run check-admin && npm run dev

If you sure have already created admin:

npm run dev

4. Sign in at route /admin

Documents

Action

Conventional Return

Refer to: Definitions in lib/utils

type ConventionalSuccess = {
    msg: string
    data?: unknown
}
type ConventionalError = {
    err: string
    data?: unknown
}

return json<ConventionalSuccess>({ msg: 'Action success 🎉' })
return json<ConventionalError>({ err: 'Something went wrong 🚨' })