CODEWITHSUNDEEP
sveltesveltekit
jackr
jackr

Reputation: 13

How do I get SvelteKit to use my Express backend while doing SSR?

In here, it says that SvelteKit can work with any Express server. My backend uses Express.

It appears that SvelteKit can't do requests to my Express backend which I attached SvelteKit to while doing SSR. How do I make it able to do this?

Upvotes: 1

Views: 1683

Answers (2)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83438

One way to accomplish this is to run frontend SSR and backend as a separate web server processes. This would even be recommended from the website stability point of view. It's also a bad idea to have a process to do HTTP requests to itself in any web server.

  • You launch two node.js processes that bind to a different port or IP
  • You can make backend available as as URL path, /api is a popular choice
  • You can have different domains for the frontend and backend web servers: www.example.com and api.example.com

Both frontend and backend node.js web servers can be configured to the same domain if you use a reverse proxy server and then maps requests to the frontend SSR process listening to one localhost port and backend Express process listening to another localhost port.

I am pretty sure reverse proxying can be done with Node.js tools, but it can also be accomplished with normal web server software. Caddy is a popular production web server, because it provides built-in support for getting a TLS certificate for your domain for HTTPS traffic. Another benefit for such setup is that a normal web server is often faster to serve static assets (production JS bundles, images).

Here is an example Caddyfile configuration file that shows outline of the setup:

#
# Production frontend and backend and docs
#
# PYramid backend API server is localhost:3456
# SvelteKit Node.js frontend SSR server is localhost:3000
#
http://tradingstrategy.ai {

    # Backend API request
    handle /api* {
        # This is the upstream Waitress server
        reverse_proxy 127.0.0.1:3456 {
            # Backend API must respond to an individual API call under 120s seconds
            transport http {
                response_header_timeout 120s
            }
        }
    }

    # SvelteKit production server from frontend repository.
    # SvelteKit node-adapter running at port 3000
    handle {
        reverse_proxy 127.0.0.1:3000 {
        header_up X-Forwarded-Host {host}
            # Frontend must render the page under 20 seconds
            transport http {
                response_header_timeout 20s
            }
        }
    }

    # Set the default 404 page
    # https://caddyserver.com/docs/caddyfile/directives/handle_errors
    handle_errors {
        respond "{http.error.status_code} {http.error.status_text}"
    }

    log {
        format json
        output file /var/log/caddy/access.log
    }

}

For a local development setup you can simply just run two node.js processes on different ports on your local computer.

You can find a full production example for Trading Strategy website.

Upvotes: 3

Ivucady
Ivucady

Reputation: 1

If what you are trying to do is to make an API calls to an external server, other than the backend shipped with sveltekit, you could do it within the load function (which should be triggered during SSR).

export const load = async () => {
    const response = await fetch(`https://myExpressServer.com`);

    return {
        data: response.json()
    };
};

Concerning the documentation you mentioned, I personally never used this feature but it seems that you can ship you own express server within sveltekit. I'm guessing that is what you are trying to do. Could you provide some snippet?

Upvotes: 0

Related Questions