Search code examples
node.jshttp-compressionsveltekit

SvelteKit and adapter-node -> production


Curious what others are doing with SvelteKit adapter-node builds to put them into production.

For example...

  • Serving pre-compressed files
  • Setting a cache TTL
  • Maybe something like helmet

Is it better to define an entryPoint for the adapter like a server.js that implements polka/express/connect like this...

// src/server.js
import { assetsMiddleware, prerenderedMiddleware, kitMiddleware } from '../build/middlewares.js'
import polka from 'polka'
import compression from 'compression'
import helmet from 'helmet'

const app = polka()

app.use(helmet())
app.use(assetsMiddleware, prerenderedMiddleware, kitMiddleware)
app.use(compression())

app.listen(3000)

or is it better to implement similar functionality in the handler() method of hooks.js?

Interested to know what people are doing to go from a build via adapter-node to production.


Solution

  • After examining what adapter-node generates in the build folder, I decided to set the entryPoint property for the adapter's options in svelte.config.js to ./src/server.mjs which gets added to the build. The handle() method in hooks.js/ts doesn't allow for any control over the static content.

    In the code below, I set a redirect for non-https and use helmet to beef up security.

    // /src/server.mjs
    import polka from 'polka'
    import helmet from 'helmet'
    import { assetsMiddleware, prerenderedMiddleware, kitMiddleware } from '../build/middlewares.js'
    
    const { PORT = 3000, DOMAIN } = process.env
    
    const isHttpPerHeroku = (req) =>
        req.headers['x-forwarded-proto'] &&
        req.headers['x-forwarded-proto'] !== 'https'
    
    polka()
      // On Heroku (only), redirect http to https
      .use((req, res, next) => {
        if (isHttpPerHeroku(req)) {
          let url = `${DOMAIN}${req.url}`
          let str = `Redirecting to ${url}`
          res.writeHead(302, {
            Location: url,
            'Content-Type': 'text/plain',
            'Content-Length': str.length
          })
          res.end(str)
        } else next()
      })
    
      // Apply all but two helmet protections
      .use(helmet({
        contentSecurityPolicy: false, // override below
        referrerPolicy: false // breaks "Sign in with Gooogle"
      }))
    
      // Set the Content Security Policy on top of defaults
      .use(helmet.contentSecurityPolicy({
        useDefaults: true,
        directives: {
          scriptSrc: [
            "'self'",
            `'unsafe-inline'`,
            'https://accounts.google.com/gsi/',
            'https://assets.braintreegateway.com/web/',
            'https://platform.twitter.com/',
            'https://www.google-analytics.com/',
            'https://www.google.com/recaptcha/',
            'https://www.googletagmanager.com/',
            'https://www.gstatic.com/recaptcha/'
          ],
          connectSrc: [
            "'self'",
            'https://accounts.google.com/gsi/',
            'https://api.sandbox.braintreegateway.com/merchants/',
            'https://api.braintreegateway.com/merchants/',
            'https://origin-analytics-sand.sandbox.braintree-api.com/',
            'https://payments.sandbox.braintree-api.com/',
            'https://payments.braintree-api.com/',
            'https://stats.g.doubleclick.net/',
            'https://www.google-analytics.com/',
            'https://platform.twitter.com/',
            'https://assets.braintreegateway.com/web/',
            'https://www.googletagmanager.com/',
            'https://www.google.com/recaptcha/',
            'https://www.gstatic.com/recaptcha/',
            'https://fonts.gstatic.com/',
            'https://client-analytics.braintreegateway.com/'
          ],
          childSrc: [
            "'self'",
            'https://accounts.google.com/gsi/',
            'https://assets.braintreegateway.com/web/',
            'https://platform.twitter.com/',
            'https://syndication.twitter.com/i/jot',
            'https://www.google.com/maps/',
            'https://www.google.com/recaptcha/'
          ],
          fontSrc: [
            "'self'",
            'https:',
            'data:',
            'https://fonts.gstatic.com'
          ],
          imgSrc: [
            "'self'",
            'data:',
            'https://www.google-analytics.com/',
            'https://www.googletagmanager.com/',
            'www.w3.org/2000/svg',
          ],
          frameSrc: [
            'https://accounts.google.com/gsi/',
            'https://www.google.com/recaptcha/',
            'https://platform.twitter.com/',
            'https://assets.braintreegateway.com/web/',
            'https://www.google.com/maps/',
            'https://syndication.twitter.com/i/jot'
          ],
          workerSrc: [
            "'self'"
          ]
        }
      }))
    
      // Load the SvelteKit build
      .use(assetsMiddleware, prerenderedMiddleware, kitMiddleware)
    
      // Listen on the appropriate port
      .listen(PORT)