DevGang
Авторизоваться

Создание веб-сайта с использованием Golang и 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 {
    //Эта функция скоро станет другой
    return c.SendString("Hellö")
}

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

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

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

Сюда,

npx degit sveltejs/template . --force

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

После,

npm install

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

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

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

Таким образом, мы заполнили папку * public несколькими файлами.

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

Шаг 1

rollup.config.js

...
svelte({
            compilerOptions: {
                // включить проверки во время выполнения, когда они не находятся в рабочей среде
                dev: !production,
                customElement: true,
            }
        }),
...

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

Шаг 2

Редактирование файла ./src/main.js.

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

import App from './App.svelte';

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

Шаг 3

Редактирование ./src/App.svelte

<script>
    // В этом примере он может быть пустым
</script>
<svelte:options tag="my-app"/>
<p>My App</p>
<style>
    /* Это может быть пустым */
</style>

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

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

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

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

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

func main() {

    //механизм рендеринга шаблонов
    engine := html.New("./templates", ".html")

    app := fiber.New(fiber.Config{
        Views: engine, //установить в качестве движка рендеринга
    })
    app.Static("/public", "./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

Не забывайте запускать команду go mod tidy:)

Теперь мы собираемся изменить функцию mainpage, как показано ниже.

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.

Последний шаг

Мы можем запустить приложение с помощью этих команд.
npm run build строит связанный файл js.
go run . запускает веб-сервер.

Подсказки

Мы можем запустить сервер простым способом, создав makefile.
Создайте makefileв каталоге проекта.
Сюда,

run:
    npm run build
    go run .

и с терминала запустите команду make run.

Источник:

#Golang #Svelte
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В подарок 100$ на счет при регистрации

Получить