С тех пор, как я услышал слова «это компилятор, а не среда выполнения», я понял, что должны быть некоторые последствия, когда дело доходит до рендеринга на стороне сервера, особенно в мире JVM.
Что ж, я здесь, чтобы сказать вам, что можно рендерить приложения Svelte на сервере Java Spring Boot, и я написал небольшую базу кода, которая позволяет вам делать это с помощью нескольких строк кода, но есть загвоздка: нам нужно настроить подходящую среду, чтобы он работал.
В этом посте я сначала расскажу, как настроить среду, а затем мы напишем простое SSR-приложение.
Получите шаблон
Первым делом нам нужно клонировать шаблон, реализующий базу кода для рендеринга Svelte.
git clone https://github.com/tncrazvan/java-springboot-svelte3-ssr-template ProjectName
or
npx degit tncrazvan/java-springboot-svelte3-ssr-template ProjectName
теперь cd в свой проект и установите зависимости javascript
cd ProjectName npm i
Получить GraalVM
Затем вам необходимо загрузить GraalVM.
Официальный сайт предлагает бесплатную версию сообщества с открытым исходным кодом: https://www.graalvm.org/downloads
Целевой GraalVM JDK
ПРИМЕЧАНИЕ: вы можете пропустить этот шаг, просто установив GraalVM в качестве JDK по умолчанию.
В этом руководстве я собираюсь использовать NetBeans в качестве IDE, и я собираюсь настроить свой проект шаблона на GraalVM JDK.
Эта часть явно специфична для NetBeans.
- Щелкните правой кнопкой мыши свой проект и откройте его свойства.
- Проверьте конфигурацию Сборка → Компиляция.
- Изучите Управление платформами Java…
- Теперь Добавить платформу… и выберите Java Standard Edition.
- И, наконец, найдите свой каталог GraalVM и завершите настройку.
Как только вы закончите, вы заметите, что NetBeans обнаружил новый JDK 11 (это версия, которую GraalVM предлагает на эту дату), обязательно настройте таргетинг на эту недавно добавленную версию Graal JDK 11.
Установить зависимости NPM
Выполните в корне вашего проекта следующее:
npm install
Это установит ваши зависимости npm.
Теперь вы можете запустить свой сервер Spring Boot с помощью GraalVM и отображать стройные страницы на стороне сервера.
Рендеринг
Создайте новый контроллер отдыха и внедрите службу Svelte3SSRService
, она предлагает несколько методов, с которыми вы можете поиграть, но основным методом является .page(...)
Вот как вы бы это использовали:
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"); } }
Вы также можете передать реквизит своей стройной странице:
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); }}); } }
и в вашем изящном компоненте вы должны экспортировать эти реквизиты, чтобы получить к ним доступ, например:
<script> export let myFirstProp; export let mySecondProp; </script> This is my first prop: {myFirstProp}<br /> and this is my second prop: {mySecondProp}
Вот результат этого примера
Надеюсь, вам понравится, берегитесь!