Discussion on: How to host a Sapper.js SSR app on Firebase.

[n-edwards]

Thanks very much for breaking this down.

I also tried following this video,
youtu.be/fxfFMn4VMpQ
and found the workflow a bit more manageable when creating a Firebase project first, and then adding in a new Sapper project. I got through it without any issues, on Windows. Would have much preferred it to be a write-up like yours though, so here's a summary:

Create a new empty folder, then navigate to it in the VS Code terminal.

firebase init

• functions
• hosting
• use an existing project you've created on Firebase
• no ESLint
• don't install dependencies now
• public directory: functions/static (Sapper project will go into functions folder)
• SPA: no

Move or rename package.json, and delete .gitignore (sapper will create these for us later)

cd functions

npx degit sveltejs/sapper-template#rollup --force

Copy contents of scripts block (Firebase commands) from old package.json into scripts block of new package.json that was generated by Sapper.
Rename Firebase's start command to fb_start.

Copy entire engines block from old to new package.json, and change node version to 10.

Copy over contents of dependencies and devDependencies blocks.

Delete old package.json, once all Firebase stuff is moved over, and save the new Sapper one.

Remove polka from dependencies in package.json.

npm install --save express
npm install

server.js:

• import express instead of polka
• change function to: const expressServer = express()...
• change .listen to if (dev) { expressServer.listen ... }
• export { expressServer }

index.js:

• const {expressServer} = require('./__sapper__/build/server/server')
• exports.ssr = functions.https.onRequest(expressServer);

npm run build
npm run dev

localhost:3000 will show the Firebase default index.html from static folder, which can be deleted.
Page reload will bring up Sapper project.

firebase.json:

• "rewrites": [ { "source": "**", "function": "ssr" }]

npm run build
firebase deploy

Visit app and click around, refresh to verify functionality.

Try Postman, send a GET to your project URL.
In output, look for confirmation that content is SSR.

package.json:

• "deploy": "npm run build && firebase deploy"

Nav.svelte:

• add a new li to the navbar, for a new page

routes:

• create new .svelte page, and add some quick HTML content

npm run deploy

Verify new content shows.
Run audit from Chrome dev tools.