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 tidycommand :)
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.
Createmakefilein project directory.
This way,
run:
npm run dev & go run .
build:
npm run build
and from terminal, run
make runormake buildcommands.
You can check out my GitHub Repo.
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.
Latest comments (6)
Hi, How to create/use "svelte-navigator" or mutli page apps
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 thannpm 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.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
Thanks for your replying. I figured out how to do this. My Svelte project is in a
webfolder, so it worked after I adding/web/...in front of css/js sources.Hi Kaan, this is an interesting approach to creating a website. Sharing your codes under GitHub may be helpful. Thanks.
Completed ✓