Deploying Sapper To Deta.sh

You get free cloud, SSR and PWA. What else do you need?


Deploying Sapper To Deta.sh

Table Of Contents

Template

github.com/amalshaji/sapper-deta-template

Demo

rzl8na.deta.dev

Basic Setup

If you already have a basic template running, you can skip this part. Otherwise, create a sapper application as the official documentation says,

npx degit "sveltejs/sapper-template#rollup" my-app
cd my_app
npm install

Sapper, by default, uses polka as the server. I decided to use express instead.

npm uninstall polka sirv
npm install express

Modify the server

The server setup is defined in src/server.js. Replace the polka with express and modify to support both dev and prod environment.

import express from 'express'
import compression from 'compression'
import * as sapper from '@sapper/server'

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

const app = express()
app.use(compression({ threshold: 0 }), express.static('static'), sapper.middleware())

if (dev) {
  app.listen(PORT || 3000)
} else {
  module.exports = app
}

During development, i.e., when you run the application using npm run dev, sapper expects the server to run. That’s why we run the express app in dev. In production, we’ll export the app so another script can import it.

Before deploying to data, we need to build the application.

Build the application

npm run build

Sapper builds the application into the __sapper__ directory. Next, inspect the server code in __sapper__/build/server/server.js. Especially the last few lines.

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

const app = express__default['default']()
app.use(
  compression__default['default']({ threshold: 0 }),
  express__default['default'].static('static'),
  middleware()
)

if (dev) {
  app.listen(PORT || 3000)
} else {
  module.exports = app
}

At this point, this looks like a hack to make the code work. If you have a better solution, please let me know.

Prepare to deploy

For Deta to run your code, you need to call your app instance app, and it has to be in a file called index.js, which is the only required file for a Node Micro. You also need to export the app. Of course, you could add more files and folders. - Deta Docs

Create a new index.js in the root of the project.

const app = require('./__sapper__/build/server/server')

module.exports = app

Fix the image problem

To serve images properly in a NodeJS micro, add the following to a .env file and update the micro.

BINARY_CONTENT_TYPES=image/*

If you haven’t already, create a new micro and update the env file. Your sapper application should be running now.

Amal Shaji © 2021.