Merge branch 'main' of https://github.com/crewdevio/Snel

crewdevio · Jul 27, 2021 · 3d0cd2f · 3d0cd2f
2 parents 06eb810 + 7be9af0
commit 3d0cd2f
Showing 1 changed file with 151 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -322,6 +322,157 @@ this syntax can be used in javascript, typescript files and components.
 
 > **note**: you can change the behavior by rewriting the pattern inside the import_map.json file, although be careful when doing this.
 
+## Deploy SPA app
+
+If you want to have a simple workflow to deploy your SPA application, you can use this.
+
+`deploy`
+
+```yml
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+
+      - name: Install Deno
+        uses: denolib/setup-deno@v2
+        with:
+          deno-version: v1.x
+
+      - name: Build
+        run: |
+          deno run --allow-run --allow-read https://deno.land/x/snel/install.ts
+          trex run build
+      - name: Upload Artifacts 🔺
+        uses: actions/upload-artifact@v1
+        with:
+          name: site
+          path: dist
+
+  deploy:
+    needs: [build]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+
+      - name: Download Artifacts 🔻
+        uses: actions/download-artifact@v1
+        with:
+          name: site
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          branch: deploy
+          folder: "site"
+          clean-exclude: |
+            vercel.json
+            manifest.json
+```
+
+this compiles the application every time it is pushed to the `main` branch, and uploads the compiled files to the `deploy` branch, which could be deployed in hosts such as `vercel` or `netlify`.
+
+If you are using the snel client router and you are going to deploy vercel or netlify you must add the respective configuration files to avoid having 404 errors.
+
+`for vercel: vercel.json`
+
+```json
+{
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "dest": "/index.html" }
+  ]
+}
+```
+
+`for netlify: _redirects`
+
+```console
+/*   /index.html   200
+```
+
+to avoid this files was removed in each deploy, you can ignore specific files:
+
+```yml
+....
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          branch: deploy
+          folder: "site"
+          clean-exclude: |
+            vercel.json # <- ignore vercel.json and manifest.json file
+            manifest.json
+```
+
+for github pages you can use this trick:
+
+create a `404.html` file:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>....</title>
+  <script>
+    sessionStorage.redirect = location.href;
+  </script>
+  <meta http-equiv="refresh" content="0;URL='/sghpa'"></meta>
+</head>
+  <body>
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  </body>
+</html>
+```
+
+and in your `index.html` add this:
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>....</title>
+  <style type="text/css">
+    body:before {
+      content: attr(message);
+    }
+  </style>
+</head>
+<body>
+  .....
+  <script>
+    (() => {
+      const redirect = sessionStorage.redirect;
+      delete sessionStorage.redirect;
+      if (redirect && redirect !== location.href) {
+        history.replaceState(null, null, redirect);
+        // REMOVE THIS - just showing the redirect route in the UI
+        document.body.setAttribute('message', 'This page was redirected by 404.html, from the route: ' + redirect);
+      } else {
+        // REMOVE THIS - just showing the redirect route in the UI
+        document.body.setAttribute('message', 'This page was loaded directly from the index.html file');
+      }
+    })();
+  </script>
+</body>
+</html>
+```
+
 ## Hot Reloading
 
 Snel provides hot reload capability, it compiles and updates the application when changes are applied to it