Creating a website using Golang and Svelte.js together
Tags: go, svelte, webdev
Published: 2021-11-28 21:15:11

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8r7uret55uy6lm3fk896.png)
First, we have to init `go.mod` file.

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

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

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`
```json
...
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.
```js
// 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.

```js
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`
```html
<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.
```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")
}
```
> Don't forget run `go mod tidy` command :)

Now We are going to change `mainpage` function like bellow.

```go
func mainPage(c *fiber.Ctx) error {
	return c.Render("mainpage", nil)
}
```
and change `./templates/mainpage.html` like bellow.

```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>
```
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 ksckaan1/go-and-svelte-template %}