Svelte SSR… but it’s Java Spring Boot!

Ever since I heared the words “it’s a compiler not a runtime” I knew there had to be some implications when it comes to server side rendering, specifically in the JVM world.

Well I’m here to tell you that it is possible to render Svelte applications on a Java Spring Boot server, and I wrote a small code base that allows you to do that with a few lines of code, but there’s catch: we’ll need to setup a proper environment for it to work.

In this post I’m first going to walk through how to setup the environment and then we’re gonna write a simple SSR svelte application.

Get the template

git clone https://github.com/tncrazvan/java-springboot-svelte3-ssr-template ProjectName

or

npx degit tncrazvan/java-springboot-svelte3-ssr-template ProjectName

now cd into your project and install the javascript dependencies

cd ProjectName
npm i

Get GraalVM

Target GraalVM JDK

Throughout this guide I’m going to use NetBeans as an IDE and I’m going to make my template project target the GraalVM JDK.

This part is obviously specific to NetBeans.

  • Right click your project and open its properties
  • Check your Build → Compile configuration
  • Explore Manage Java Platforms…
  • Now Add Platform… and pick Java Standard Edition
  • And finally find your GraalVM directory and finish the configuration

Once you’re done you’ll notice that NetBeans has detected a new JDK 11 (that’s the version GraalVM offers as of this date), make sure to target that newly added Graal JDK 11 version

Install NPM dependencies

npm install

This will install your npm dependencies.

Now you can run your Spring Boot server using GraalVM and render svelte pages server side.

Rendering

Here’s how you would use it:

package com.github.tncrazvan.svelte3ssr.template.api;import com.github.tncrazvan.svelte3ssr.template.services.Svelte3SSRService;
import java.io.IOException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Home {

@Autowired
Svelte3SSRService ssr;

@RequestMapping("/")
public String home() throws IOException{
return ssr.page("./www/App.svelte","UTF-8");
}
}

You can also pass in props to your svelte page:

package com.github.tncrazvan.svelte3ssr.template.api;import com.github.tncrazvan.svelte3ssr.template.services.Svelte3SSRService;
import java.io.IOException;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class Home {

@Autowired
Svelte3SSRService ssr;

@RequestMapping("/")
public String home() throws IOException{
return ssr.page("./www/App.svelte","UTF-8",new HashMap<>(){{
put("myFirstProp","value");
put("mySecondProp",1);
}});
}
}

and in your svelte component you would export those props in order to access them, like so:

<script>
export let myFirstProp;
export let mySecondProp;
</script>
This is my first prop: {myFirstProp}<br />
and this is my second prop: {mySecondProp}

Here’s the result of this example

I hope you like it, stay safe!