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

learn, do, and share ~ Senior Software Engineer @KompasGramedia