Published: Sun 04 February 2024
By Arnaud
In Misc .
tags: javascript golang agayontodo
For years, I have used myTinyTodo to manage my to-do lists. It is super light, fast and easy to use.
At some point, I struggled to update it to use my up-to-date version of PHP. Last year, I wanted to explore other languages than Python. I decided to start a small project to replace myTinyTodo. As I wanted to explore Go and React , I created two projects to build my to-do list system.
The project fulfills my needs for now. The IU is not perfect, and it lacks a lot of functionalities of MyTinyTodo but I don't really need them for now.
Development
I named the project AgayonTodo. The repositories can be found here:
The Javascript frontend relies on React and calls the API to display the data. I used the create-react-app tool to build the whole thing and followed the main tutorial. Even if I had to download the whole internet of dependencies, it is pretty efficient.
I used the Bulma CSS Framework because I wanted to try something else than Bootstrap. It can be used without Javascript, which could be helpful in some of my other projects.
The Go backend service relies on gorm , an ORM in Go. The service only provides a small CRUD API and some small tools because I don't need much at the moment. I did not want to do all the SQL requests by myself, especially if I want to add access control in the future. I thought it would be better to learn how to use that popular library.
Production
The frontend is built and copied in a nginx virtual host and the backend static executable is run with a systemd unit. The system is basically launched like that. Running the frontend and the backend in the same virtual host prevents dealing with CORS issues.
server {
listen * : 443 ssl ;
listen [::]: 443 ssl http2 ;
server_name example . org ;
ssl_certificate / etc / letsencrypt / example . pem ;
ssl_certificate_key / etc / letsencrypt / example . key ;
location = / robots . txt {
add_header Content - Type text / plain ;
return 200 "User-agent: * \n Disallow: / \n " ;
}
error_log / var / log / nginx / error . log ;
include / etc / nginx / global . d / letsencrypt . conf ;
root / srv / http / example . org ;
location / {
auth_basic "Authorized users only" ;
auth_basic_user_file / etc / nginx / security . txt ;
}
location / api {
auth_basic "Authorized users only" ;
auth_basic_user_file / etc / nginx / security . txt ;
proxy_pass http : // localhost : 8080 / api ;
}
}
Captures
Links
