Создание веб-сайта с использованием языка Go и Svelte.js

Иногда нам необходимо использовать динамические или одиночные страницы на наших сайтах. Для этого мы можем использовать инструменты «реактивного» программирования на JavaScript (или фреймворки).

В этой статье я расскажу вам, как использовать Svelte.js на нашем сервере, написанном на Go для создания нашего веб-сайта. Для этого примера я выбрал пакет gofiber в качестве пакета веб-сервера. Начнем!

Создание базового веб-сервера Gofiber

Структура проекта на стороне Go будет выглядеть следующим образом.

Сначала нам нужно инициализировать файл go.mod.

В качестве второго шага мы можем создать файл main.go следующим образом:

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()
    app.Static("/public","./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

func mainPage(c *fiber.Ctx) error {
    //This function will be see different soon
    return c.SendString("Hellö")
}

После создания проекта Svelte мы изменим часть Go.

Создадим простой проект Svelte на основе этого проекта Go.

Создание базового проекта Svelte

Таким образом:

npx degit sveltejs/template . --force

Мы используем флаг --force, потому что папка проекта не пуста.

После:

npm install

для установки всех зависимостей.

Для проверки мы можем выполнить команду npm run dev.

Если все работает, мы можем перейти к следующему шагу.

Итак, мы заполнили папку *public некоторыми файлами.

Для использования Svelte с Go нам нужно изменить некоторые настройки на стороне Svelte.

Шаг 1.

rollup.config.js

...
svelte({
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production,
                customElement: true,
            }
        }),
...

Мы должны добавить строку customElement: true.

Это дополнение поможет отделить элемент от базового проекта.

Таким образом, мы можем добавить компонент, используя имя элемента, например <App/>, в наши шаблоны Go.

Шаг 2.

Мы можем использовать изменения на стороне Svelte без перезапуска приложения Go.

Для этого нужно закомментировать одну строку в файле rollup.config.js.

// In dev mode, call `npm run start` once
        // the bundle has been generated
        //!production && serve()

!production && serve() должны быть закомментированы.

Шаг 3.

Редактируем файл ./src/main.js.

Этот файл будет выглядеть так, как показано ниже.

import App from './App.svelte';

Мы будем использовать только строку import.

В этом коде мы импортировали компонент под именем App, но это название не имеет значения. Прежде всего, мы укажем тег компонента из его файла.

Шаг 4.

Редактируем ./src/App.svelte:

<script>
    // It can be empty for this example
</script>
<svelte:options tag="my-app"/>
<p>My App</p>
<style>
    /* It can be empty :) */
</style>

С помощью этих процессов мы можем использовать компонент App (App component) в качестве тега <my-app/>.

Мы закончили работу со стороной Svelte.js. Теперь мы можем перейти на сторону Golang.

Прежде всего, мы определим движок рендеринга шаблонов.

Отредактируем файл main.go, как показано ниже.

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)

func main() {

    //template render engine
    engine := html.New("./templates", ".html")

    app := fiber.New(fiber.Config{
        Views: engine, //set as render engine
    })
    app.Static("/public", "./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

Не забудьте выполнить команду go mod tidy 🙂

Теперь мы изменим функцию главной страницы, как показано ниже.

func mainPage(c *fiber.Ctx) error {
    return c.Render("mainpage", nil)
}

и изменяем ./templates/mainpage.html следующим образом.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel='stylesheet' href='/public/global.css'>
    <script defer src='/public/build/bundle.js'></script>
</head>
<body>
    <my-app/>
</body>
</html>

Мы можем назвать компонент App как my-app.

Последний этап

Метод 1.

Мы можем запустить приложение с помощью этих команд.

npm run build собирает собранный js-файл.

go run . запускает веб-сервер.

Метод 2.

Мы можем запустить приложение с помощью этой команды:

npm run dev & go run .

Таким образом, если мы перезагрузим веб-страницу, вы сможете увидеть изменения, не перезапуская приложение Go. Но это может быть полезно только для изменений на стороне Svelte.

Советы

Мы можем запустить сервер простым способом, создав makefile.

Создайте makefile в директории проекта. Таким образом:

run:
    npm run dev & go run .
build:
    npm run build

и в терминале выполните команды make run или make build.

Репозиторий проекта на GitHub.

Создание веб-сайта с использованием языка Go (Golang) и Svelte.js