DEV Community

Cover image for Deploying Sapper application to Deta.sh
Amal Shaji
Amal Shaji

Posted on • Originally published at amalshaji.com

Deploying Sapper application to Deta.sh

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

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 logo amalshaji / sapper-deta-template

A template to deploy sapper to deta.sh

Sapper-Deta template

Sapper template with polka replaced with express.

Dev mode

make dev 
# or
npm run dev
Enter fullscreen mode Exit fullscreen mode

Deploy to deta

make deploy
# or 
npm run build # to build the sapper project into the __sapper__ directory
deta deploy # make sure the project is initialized with deta
Enter fullscreen mode Exit fullscreen mode



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,

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

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

npm uninstall polka
npm install express
Enter fullscreen mode Exit fullscreen mode

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 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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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/*
Enter fullscreen mode Exit fullscreen mode

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

Oldest comments (1)

Collapse
 
albermonte profile image
Alberto Monterroso

That sveltekit adapter would be very helpful ;D
Congrats for the template and the article