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

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

You can check out my GitHub Repo.

GitHub logo ksckaan1 / go-and-svelte-template

Go and Svelte.js Starter Template



Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
blueskyson profile image
Jack Lin • 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.

Collapse
 
ksckaan1 profile image
Kaan Kuscu • 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

Collapse
 
blueskyson profile image
Jack Lin

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.

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

Completed ✓

Collapse
 
faizalom profile image
faizalom • Edited

Hi, How to create/use "svelte-navigator" or mutli page apps