Sapper, a server side framework with Svelte

Sapper is officially dead. It has been replaced by sveltekit.

TODO: The firebase related material here, needs to be moved elsewhere. We will eventully remove this section.

Sapper

• sapper
• Building a project with Sapper, a JavaScript app framework
• Simple Svelte 3 app with router
• Exploring Sapper + Svelte: A quick tutorial
• Build a fast reactive blog with Svelte and Sapper

Sapper with firebase

• How to host a Sapper.js SSR app on Firebase
• Sapper - Deploy to Firebase Cloud Functions
• migrating to Sapper part 1 - SEO, Twitter Cards, OpenGraph
• migrating to Sapper part 2 - TDD with Cypress.io
• migrating to Sapper part 3 - RSS feed
• migrating to Sapper part 2 bis - Netlify, GitHub Actions with Cypress.io
• https://github.com/fusionstrings/firebase-functions-sapper

A recipe to be tried for firebase

from https://dev.to/nedwards/comment/h1l7 ...snip -->

Thanks very much for breaking this down.

I also tried following this video, https://youtu.be/fxfFMn4VMpQ and found the workflow a bit more manageable when creating a Firebase project. Sources from video https://github.com/sveltecasts/006-deploy-sapper-to-firebase-cloud-functions.

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.

<-- snip..