Sapper with Firebase Hosting

sapper_with_firebase_hosting.md

1. Create Directory for your app mkdir my-app
2. get the sapper template npx degit "sveltejs/sapper-template#rollup"
3. Install the packages npm i
4. Install express server npm i express
5. Initialize Firebase firebase init
6. Select the firebase feature you wish to use. I chose all except database.
7. Select whether you would like to use an existing project, create a new project or not use a default project. Choice is yours.
8. Follow the prompts
9. You could use TypeScript
10. Choose es-lint
11. Install all the dependencies
12. Choose "static" as the public directory.
13. Don't configure as a single page app.
14. FIREBASE EMULATOR AND SAPPER ARE NOT REALLY FRIENDS.
15. Important transition Sapper from JS to TS. node ./scripts/setupTypescript.js
16. Change Directories into the "functions folder" created by firebase init cd functions
17. Install some dependencies that help in production. npm i express sirv compression polka
18. Change ./src/server.ts to

import sirv from "sirv";
import polka from "polka";
import compression from "compression";
import * as sapper from "@sapper/server";

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";

if (dev) {
  polka() // You can also use Express
    .use(
      compression({ threshold: 0 }),
      sirv("static", { dev }),
      sapper.middleware()
    )
    .listen(PORT, (err: any) => {
      if (err) console.log("error", err);
    });
}

export { sapper };

19. Go back to the top level folder cd ..
20. Change the build script of the top level package.json. It should copy the results of sapper build and place them inside the functions folder.

  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy && cp -Rp ./__sapper__/build ./functions/__sapper__",
    "prebuild": "rm -rf functions/__sapper__/build",
    "deploy": "firebase deploy --only functions,hosting",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "validate": "svelte-check --ignore src/node_modules/@sapper"
  },

21. Build the Sapper Project npm run build
22. Go into the "functions" folder again and make the ./functions/index.ts look like this.

import * as functions from "firebase-functions";
import * as express from "express";
// @ts-ignore
import { sapper } from "../__sapper__/server/server";

const app = express().use(sapper.middleware());

exports.ssr = functions.https.onRequest(app);

23. Go into the top-level project and change the firebase.json file to include the rewrites.

{
  "hosting": {
    "public": "static",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

24. Delete the ./static/index.html and ./static/404.html files.
25. Build the top level sapper project and the functions folder.
26. Deploy to firebase npm run deploy
27. To develop locally run npm run dev