DEV Community

Cover image for Creating a website using Golang and Svelte.js together
Kaan Kuscu
Kaan Kuscu

Posted on • Updated on

Creating a website using Golang and Svelte.js together

Hello Gophers,

Sometimes, we need to use dynamic or single pages on our websites. For this, We can develop with reactive javascript programming tools (or frameworks) etc... in this case.

In this post, i'm gonna show you, how to use Svelte.js over our server, written in Go.

For this example, i preferred gofiber package as webserver package.

Lets start!

Creating Basic Gofiber Webserver

Project structure for Go side will be like bellow.
project-structure
First, we have to init go.mod file.

As step two, we can create main.go file like this

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ö")
}
Enter fullscreen mode Exit fullscreen mode

We will change Go side, after created Svelte project.

Lets create simple Svelte project over this Go project.

Creating Basic Svelte Project

This way,

npx degit sveltejs/template . --force

We are using --force flag because this project folder is not empty.

After,

npm install

for installing all dependencies.

For testing, we can run npm run dev command.

If it's working, we can go to next step.

Thus, we have filled *public folder with some files.

For using Svelte with Go, we have to change some setting over Svelte side.

Step.1

rollup.config.js

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

We have to add customElement: true, line.
This addition helps splitting element from base project.
Thus, we can add component using element name like <App/> to our Go Templates.

Step.2

We can use Svelte side changes without restarting go app.
For this, we have to comment one line in rollup.config.js file.

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

!production && serve() have to be commented.

Step.3

Editing ./src/main.js file.

This file will look like bellow.

import App from './App.svelte';
Enter fullscreen mode Exit fullscreen mode

We will use only line of import.
In this code, we imported a component as App but this name is not important. First of all, we will specify the component tag from the component's file.

Step.3

Editing ./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>
Enter fullscreen mode Exit fullscreen mode

With this processes, we can use App component as <my-app/> tag.

We are complete Svelte.js side. Now we can go Golang side.

First of all, we are going to define template render engine.

Edit main.go file like bellow.

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")
}
Enter fullscreen mode Exit fullscreen mode

Don't forget run go mod tidy command :)

Now We are going to change mainpage function like bellow.

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

and change ./templates/mainpage.html like bellow.

<!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>
Enter fullscreen mode Exit fullscreen mode

We can call App component as my-app.

Last Step

Method.1

We can run app with these commands.
npm run build builds bundled js file.
go run . starts web server.

Method.2

We can run app with this command.
npm run dev & go run .

Thus, if we reload the web page, you can see changes without restarting go app. But it can be useful for only Svelte side changes.

Tips

We can run server easy way, creating makefile.
Create makefile in project directory.
This way,

run:
    npm run dev & go run .
build:
    npm run build
Enter fullscreen mode Exit fullscreen mode

and from terminal, run make run or make build commands.

You can check out my GitHub Repo.

Discussion (2)

Collapse
emreodabas profile image
Emre Odabas

Hi Kaan, this is an interesting approach to creating a website. Sharing your codes under GitHub may be helpful. Thanks.

Collapse
ksckaan1 profile image
Kaan Kuscu Author

Completed ✓