Skip to main content

Frontend from Scratch

W7S can publish static frontend assets from the same repo as your backend. The simplest version is to commit built assets under frontend/dist.

Repo structure​

my-app/
  frontend/
    dist/
      index.html
      app.js
      styles.css
  w7s.site.json

Static site config​

Create w7s.site.json:

{
  "version": 1,
  "root": "frontend/dist",
  "mode": "spa",
  "fallback": "/index.html",
  "cleanUrls": false
}

For a plain static site without SPA fallback, use:

{
  "version": 1,
  "root": "frontend/dist",
  "mode": "static",
  "fallback": "/index.html"
}

Minimal frontend​

frontend/dist/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My W7S App</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <main>
      <h1>My W7S App</h1>
      <p id="status">Loading...</p>
    </main>
    <script type="module" src="/app.js"></script>
  </body>
</html>

frontend/dist/app.js

const status = document.getElementById("status");

async function main() {
  const response = await fetch("/health");
  const data = await response.json();
  status.textContent = data.ok ? "Backend is live." : "Unexpected response.";
}

main().catch((error) => {
  status.textContent = `Failed: ${error.message}`;
});

Frontend-only deploy workflow​

name: Deploy Frontend

on:
  push:
    branches: [main]
    paths:
      - "frontend/**"
      - "w7s.site.json"
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
    steps:
      - uses: actions/checkout@v4
      - run: zip -qr repo.zip . -x ".git/*" -x ".github/*"
      - run: |
          OWNER_SLUG="$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')"
          REPO_SLUG="$(basename "${{ github.repository }}")"
          curl --fail --show-error \
            -X POST "https://${OWNER_SLUG}.w7s.cloud/${REPO_SLUG}/_deploy?artifact=source&scope=frontend" \
            -H "Authorization: Bearer ${{ github.token }}" \
            -H "x-github-repository: ${{ github.repository }}" \
            -H "x-github-sha: ${{ github.sha }}" \
            -H "x-github-branch: ${{ github.ref_name }}" \
            -H "content-type: application/zip" \
            --data-binary "@repo.zip"

Custom domains​

If you want a custom frontend hostname, add:

frontend/CNAME

Example:

app.example.com

W7S will attempt to attach the domain during deploy through the runtime custom-domain flow.

  • keep source frontend code wherever you want
  • emit final static assets to frontend/dist
  • let W7S publish only the built output
  • use a separate frontend workflow with scope=frontend once your repo grows