Add route support for Fission app publishing (#66)

* Add trailing slash always
* Add leading slashes to gotos
* Add fission.yaml and publish action
* Update Fission app name
* Update README


Co-authored-by: Brian Ginsburg <gins@brianginsburg.com>

.github/workflows/publish.yml

@@ -0,0 +1,26 @@
+name: 🚀 Publish
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish_job:
+    name: '🚀 Publish'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📥 Checkout repository
+        uses: actions/checkout@v2
+      - name: 🧱 Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - name: 📦 Install packages
+        run: npm install
+      - name: 🏗 Build assets
+        run: npm run build
+      - name: 🚀 Publish to production
+        uses: fission-suite/publish-action@v1
+        with:
+          machine_key: ${{ secrets.FISSION_MACHINE_KEY }}
+          app_url: webnative-template.fission.app
+          build_dir: ./build

README.md

@@ -110,15 +110,8 @@ Check out the [Webnative Guide](https://guide.fission.codes/developers/webnative
 
 ## 🧨 Deploy
 
-The [Webnative App Template demo](https://webnative.netlify.app) is currently hosted on Netlify, but it should be supported on any static hosting platform (Vercel, Cloudflare Pages, etc).
 
-### Fission App Hosting
+The Webnative App Template is currently deployed as a [Netlify app](https://webnative.netlify.app) and a [Fission app](https://webnative-template.fission.app), but it should be supported on any static hosting platform (Vercel, Cloudflare Pages, etc).
-
-Coming soon!
-
-_You can't currently deploy to Fission's app hosting infrastructure._ SvelteKit Single-Page Applications require redirects in order to support routing. Redirects are not currently supported by IPFS, so the [Fission Publish GitHub action](https://github.com/fission-codes/publish-action) is not yet supported.
-
-There is [work underway to extend IPFS http gateways to support redirects](https://github.com/ipfs/kubo/pull/8890). Once that is merged, deploying to Fission will work.
 
 ### Netlify
 
@@ -127,6 +120,29 @@ In order to deploy your Webnative application on Netlify:
 1. Create a new Netlify site and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).)
 2. Netlify takes care of the rest. No Netlify-specific configuration is needed.
 3. There is no step 3.
+### Fission App Hosting
+
+A Webnative application can be published to IPFS with the [Fission CLI](https://guide.fission.codes/developers/cli) or the [Fission GitHub publish action](https://github.com/fission-suite/publish-action). 
+
+To publish with the Fission CLI:
+
+1. [Install the CLI](https://guide.fission.codes/developers/installation)
+2. Run `fission setup` to make a Fission account
+3. Run `npm run build` to build the app
+4. Delete `fission.yaml`
+5. Run `fission app register` to register a new Fission app (accept the `./build` directory suggestion for your build directory)
+6. Run `fission app publish` to publish your app to the web
+
+Your app will be available online at the domain assigned by the register command.
+
+To set up the GitHub publish action:
+
+1. Register the app with the CLI
+2. Export your machine key with `base64 ~/.config/fission/key/machine_id.ed25519`
+3. Add your machine key as a GH Repository secret named `FISSION_MACHINE_KEY`
+4. Update the `publish.yml` with the name of your registered app
+
+See the [Fission Guide](https://guide.fission.codes/developers/installation) and the publish action README for more details.
 
 ### Static Build
 

fission.yaml

@@ -0,0 +1,3 @@
+ignore: []
+url: webnative-template.fission.app
+build: ./build

src/components/Header.svelte

@@ -31,7 +31,7 @@
 
   {#if !$sessionStore.loading && $sessionStore.backupCreated === false}
     <span
-      on:click={() => goto('delegate-account')}
+      on:click={() => goto('/delegate-account')}
       class="btn btn-sm h-10 btn-warning rounded-full font-normal transition-colors ease-in hover:bg-orange-500 hover:border-orange-500"
     >
       <Shield />

src/components/auth/backup/AreYouSure.svelte

@@ -28,7 +28,10 @@
         Without a backup device, if you lose this device or reset your browser,
         you will not be able to recover your account data.
       </p>
-      <button class="btn btn-primary" on:click={() => goto('delegate-account')}>
+      <button
+        class="btn btn-primary"
+        on:click={() => goto('/delegate-account')}
+      >
         Connect a backup device
       </button>
       <span

src/components/auth/backup/Backup.svelte

@@ -28,7 +28,10 @@
         so that you have a backup.
       </p>
 
-      <button class="btn btn-primary" on:click={() => goto('delegate-account')}>
+      <button
+        class="btn btn-primary"
+        on:click={() => goto('/delegate-account')}
+      >
         Connect a backup device
       </button>
       <button

svelte.config.js

@@ -9,7 +9,8 @@ const config = {
   kit: {
     adapter: adapter({
       fallback: 'index.html'
-    })
+    }),
+    trailingSlash: 'always'
   },
 }