Skip to content

Step 1 — Deploy it (and meet the login page)

About 20 minutes. Branch: step-1.

The one new idea: an app is a Git repository plus one file.

Where you are

git fetch upstream && git reset --hard upstream/step-1
git push --force origin tutorial

Tally is a static React site. The roadmap lives in frontend/src/roadmap.json, compiled into the bundle by Vite.

The whole config

appmecca.yaml @ step-1
static_site:
  build_command: "cd frontend && npm ci --no-audit --no-fund && npm run build"
  output_dir: frontend/dist
  spa_fallback: true
  index_document: index.html

deploy:
  - name: web
    primary: true
    type: spa

Four ideas, and that is the entire surface for a static site:

  • static_site: at the top level means the whole app is static. There is a per-service form too, and you meet it at step 15 when only part of the app is static. Top level for the whole app; per service when it is one among several.
  • build_command runs in the build, from the repository root. output_dir is where it leaves the files, and the build asserts that directory exists — get it wrong and you get a build that succeeds and uploads nothing.
  • spa_fallback: true is what makes /item/3 work. There is no file at that path; the fallback serves index.html and React Router takes over. Without it that URL is a 404, and it will be the first thing you notice.
  • type: spa deploys straight to storage and the edge. No container, no web server to configure.

Do it

mecca register <your repository URL> -b tutorial
mecca app redeploy tally -b tutorial

register records the repository; app redeploy builds your current commit and ships it. From here on mecca app redeploy tally -b tutorial is the command you will run most — every time you change code, that is the one.

Why redeploy and not deploy

They are different jobs. redeploy rebuilds from your repository, so it picks up the commit you just pushed. deploy ships an image that already exists — no build. That is exactly what you want for a rollback (step 14), and exactly what you do not want after an edit: it would redeploy your previous build and report success.

What you should see

mecca app show tally -b tutorial

A URL — and opening it gives you a login page, not the board.

That is not a fault. A new app is private, and a private app is served behind an authentication gateway. Log in with the account from step 0 and the board appears. Step 2 makes it public in one word.

Deep-link straight to /item/3 while you are there. It works, and spa_fallback is why.

If it didn't work

Symptom Try Usually
not found in .../tutorial mecca app list You registered a different branch, or dropped -b tutorial
Build failed mecca logs tally --type build -b tutorial Step 3 teaches this properly
Deploy never finishes mecca queue diagnose <id> It says what it is waiting for
Page loads, deep link 404s spa_fallback is missing or false

Reset to the reference

git fetch upstream && git reset --hard upstream/step-1 && git push --force origin tutorial

If you are not in North America or Europe

The edge cache defaults to standard, which has no edge in Africa, Asia or South America — so this site is served to you from another continent. One line fixes it, and step 16 explains it:

cdn:
  coverage: extended

Next: Step 2 — Make it public, and read the queue