Kaan Kuscu

Posted on Nov 28, 2021 • Edited on Dec 11, 2021

Creating a website using Golang and Svelte.js together

#go #svelte #webdev

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.

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ö")
}

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,
            }
        }),
...

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()

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

Step.3

Editing ./src/main.js file.

This file will look like bellow.



import App from './App.svelte';

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>

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")
}

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)
}

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>

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

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

You can check out my GitHub Repo.

  
    
      
      
        ksckaan1
       / 
        go-and-svelte-template
      
    
    
      Go and Svelte.js Starter Template
    
  
  
    
Created for my blog article
https://dev.to/ksckaan1/creating-a-website-using-golang-and-sveltejs-together-55g8
Before lauch, run npm install from command line.







  View on GitHub

Top comments (6)

Jack Lin • Jan 30 '22 • Edited

Hi, thanks for your article. I'm new to javascript. I wonder that how could I host a Svelte website using Go as server but without sirv, i.e. go run . rather than npm run start & go run .. As our team may not use high end hardware to host the website, I'm afraid that sirv will make it slow.

Kaan Kuscu • Jan 30 '22 • Edited

If you mean using built Svelte.js output and Go Web Server, you can use this method. For you are new to js, i can tell svelte.js can create built (static) html+js+css output. These files are usable without server. You have to provide svelte.js output files inside of Golang server. In Step.2, i was show how to launch server without sirv. If you will stuck in an process, i can help you with dm

Jack Lin • Jan 31 '22

Thanks for your replying. I figured out how to do this. My Svelte project is in a web folder, so it worked after I adding /web/... in front of css/js sources.