README.md

🍳 Omelette

Omelette is an opinionated recipe that demonstrates how to build a fast dynamic website/application. It was created as a foundation for a real-world ecommerce website and jump-starts you with:

• A flexible architecture suitable for production websites.
• Hand-picked tools and libraries for painless development.
• A cost-effective and scalable preset deployment platform.

Core Ingredients

• 🍯 — brillout/vite-plugin-ssr — The binding agent that makes everything stick!
• 🥘 — vitejs/vite — The base that gives the recipe its delicious flavor.
• 🍫 — vuejs/core — The sweetener that makes the recipe so good.
• 🍇 — unocss/unocss — The garnish for decorating the recipe.
• 🍽 — Cloudflare Workers — The dish for serving the recipe.

For a less silly deep dive into the reasoning behind why these ingredients were chosen over potential alternatives, see the chemistry section below. The section also explains some of the recipe's custom features.

📙 Table of Contents

• Getting Started
  Start exploring Omelette for yourself!
• Deployment
  Learn how to deploy an Omelette project.
• The Chemistry
  Learn why each ingredient was chosen.

🐣 Getting Started

1. Clone this repository.

   $ git clone https://github.com/AaronBeaudoin/omelette
   

2. Install project dependencies.

   $ npm install
   

3. Run the development setup.

   $ npm run dev
   

4. Explore the project and make it your own! ✨

🚀 Deployment

1. Create a Cloudflare account here if you don't already have one. After doing so, make sure to go to the Workers page in the dashboard and complete the setup steps.

2. Login to Wrangler, the CLI for working with Cloudflare Workers.

   $ npx wrangler login
   

3. Create a Workers KV namespace for production and another one for preview.

   $ npx wrangler kv:namespace create PRODUCTION
   $ npx wrangler kv:namespace create PREVIEW
   

4. Bind the namespaces to FUNCTIONS in your worker environment. To do this, replace id under [[kv_namespaces]] in your wrangler.toml config with the ID of the PRODUCTION namespace you just created and replace preview_id with the ID of the PREVIEW namespace.

   [[kv_namespaces]]
   id = "<your-production-namespace-id-here>"
   preview_id = "<your-preview-namespace-id-here>"
   binding = "FUNCTIONS"

   The ID for each namespace should be in the terminal output under each command from the last step. If you can't find them, you can easily get them again via another command.

   $ npx wrangler kv:namespace list
   

5. Update the name of your worker in your wrangler.toml config to whatever you want.

6. Create a Workers Secret named SECRET to enable function ?preview= and ?refresh=.

   $ npx wrangler secret put SECRET
   

7. Preview your build output before actually deploying, if you want.

   $ npm run preview
   

8. Deploy your project and sit back and relax! Watch a movie. Whatever you want! 🍹

   $ npm run deploy
   

Deploy on Push — Optional

1. Create an API token in your Cloudflare account here. If you're not sure exactly what permissions you want, just use the Edit Cloudflare Workers template.

2. Copy the token into a GitHub Secret called CLOUDFLARE_API_TOKEN under your repository.

3. Copy your account ID into a GitHub Secret called CLOUDFLARE_ACCOUNT_ID under your repository. You can find your Cloudflare account ID on the right hand side of the Workers page in the dashboard.

4. Push a new commit! From now on, pushing to the main branch of your repository should use the .github/workflows/deploy.yaml GitHub Action to deploy your project automatically!

🥼 The Chemistry

This section is a work in progress.