Go-Svelte Journey : Svelte as Reactive Frontend Apps (Part-3)

3 min readAug 26, 2020

in previous tutorial we have finished our backend API. In this tutorial we’ll create out todo front end with svelte

first install our svelte

npx degit sveltejs/template frontend
cd frontend
npm install

just test our installation :

npm run dev

access our browser to localhot:5555, you will see :

to simplified our styling here I will use bootstrap 4. just edit our index.html file to

src/frontend/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>

   <title>Svelte app</title>

    <!-- boostarp cdn starts here  -->
    <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
            crossorigin="anonymous"
    />

    <!-- bootstrap cdn ends here  -->

   <link rel='icon' type='image/png' href='/favicon.png'>
   <link rel='stylesheet' href='/global.css'>
   <link rel='stylesheet' href='/build/bundle.css'>

   <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

lets make our contract to our backend API:

firstly install axios :

npm install axios

src/frontend/src/service/todo.js

// Api.js
import axios from "axios";

// Create a instance of axios to use the same base url.
const axiosAPI = axios.create({
    baseURL : "http://localhost:8181/todos/" // it's not recommended to have this info here.
});

// implement a method to execute all the request from here.
const apiRequest = (method, url, request) => {
    const headers = {
        authorization: ""
    };
    //using the axios instance to perform the request that received from each http method
    return axiosAPI({
        method,
        url,
        data: request,
        headers
    }).then(res => {
        return Promise.resolve(res.data);
    })
        .catch(err => {
            return Promise.reject(err);
        });
};

// function to execute the http get request
const get = (url, request) => apiRequest("get",url,request);

// function to execute the http delete request
const deleteRequest = (url, request) =>  apiRequest("delete", url, request);

// function to execute the http post request
const post = (url, request) => apiRequest("post", url, request);

// function to execute the http put request
const put = (url, request) => apiRequest("put", url, request);

// function to execute the http path request
const patch = (url, request) =>  apiRequest("patch", url, request);

// expose your method to other services or actions
const TodoService ={
    list : () =>{
        return axios.get('http://localhost:8181/todos/?size=3')
            .then(res => {
                return Promise.resolve(res.data);
            })
            .catch(err => {
                return Promise.reject(err);
            });
    },
    create: (todo) =>  {
        return axios.post('http://localhost:8181/todos/', todo)
            .then(res => {
                return Promise.resolve(res.data);
            })
            .catch(err => {
                return Promise.reject(err);
            });
    },
    update: (todo) => {
        return axios.put('http://localhost:8181/todos/'+todo.id+"/", todo)
            .then(res => {
                return Promise.resolve(res.data);
            })
            .catch(err => {
                return Promise.reject(err);
            });
    },
    delete: (id) => {
        return axios.delete('http://localhost:8181/todos/'+id+"/")
            .then(res => {
                return Promise.resolve(res.data);
            })
            .catch(err => {
                return Promise.reject(err);
            });
    }
};
export default TodoService;

src/frontend/src/App.svelte

<script>
    import Todo from "./Todo.svelte";
</script>

<main>
    <Todo />
</main>

<style>
   main {
      text-align: center;
      padding: 1em;
      max-width: 240px;
      margin: 0 auto;
   }

   h1 {
      color: #ff3e00;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
   }

   @media (min-width: 640px) {
      main {
         max-width: none;
      }
   }
</style>

src/frontend/src/Todo.svelte

<script>
    import Todo from "./Todo.svelte";
</script>

<main>
    <Todo />
</main>

<style>
   main {
      text-align: center;
      padding: 1em;
      max-width: 240px;
      margin: 0 auto;
   }

   h1 {
      color: #ff3e00;
      text-transform: uppercase;
      font-size: 4em;
      font-weight: 100;
   }

   @media (min-width: 640px) {
      main {
         max-width: none;
      }
   }
</style>

Run our backend API :

docker-compose up -d
go run src/backend/main.go webserver

Run our frontend Apps :

cd src/frontend/
npm run dev

For complete code you can access here:

https://github.com/anggakes/gosvelte-todoapps

Go-Svelte Journey : Svelte as Reactive Frontend Apps (Part-3)

Written by Angga Kesuma