Deploying Sapper application to Deta.sh
Tags: svelte, node
Published: 2021-09-03 12:44:53

[Deta.sh](https://deta.sh) is a cloud platform that lets you run Python or Node applications for **free**. They also offer other products such as deta base, a NoSQL-based database, and deta drive for hosting files. 

> Hoping the `Golang` support comes to deta sooner. I'm a big fan of the service. 

Why Sapper?

[Sapper](https://sapper.svelte.dev) is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. It is the predecessor of [Sveltekit](https://kit.svelte.dev/). 

You can quickly deploy svelte to deta. But it does not provide server-side rendering. So when deta is providing a fully-fledged nodejs environment, why miss out on using SSR? Besides, SSR gives you other benefits like SEO, etc.

> I tried working on a sveltekit adapter, didn't reach anywhere. However, Sapper is production-ready, and the basic template gives you PWA too.

## Source

{% github amalshaji/sapper-deta-template  %}

## Demo

https://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,

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

Sapper, by default, uses [polka](https://github.com/lukeed/polka) as the server. I decided to use [express](https://github.com/expressjs/express) instead. 

```bash
npm uninstall polka
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. 

```js
import sirv from 'sirv';
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';

if (dev) {
	express() // You can also use Express
		.use(
			compression({ threshold: 0 }),
			sirv('static', { dev }),
			sapper.middleware()
		).listen(3000)
} else {
	const app = express() // You can also use Express
	.use(
		compression({ threshold: 0 }),
		sirv('static', { dev }),
		sapper.middleware()
	)
	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

```bash
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 lines.

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

if (dev) {
	express__default['default']() // You can also use Express
		.use(
			compression__default['default']({ threshold: 0 }),
			sirv__default['default']('static', { dev }),
			middleware()
		).listen(3000);
} else {
	const app = express__default['default']() // You can also use Express
	.use(
		compression__default['default']({ threshold: 0 }),
		sirv__default['default']('static', { dev }),
		middleware()
	);
	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.

```js
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.

```env
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.