Day 1: tech stack, creating project from scratch

Jun 09, 2022

💡

This is a dev diary of implementing Filerion, a web-based file manager for online storage (Dropbox, OneDrive, Google Drive, s3 and more).

Today I’m creating a project from scratch.

My tech stack:

Svelte for JavaScript framework as it’s mostly JavaScript client app
vite for build tool and dev server
Tailwind CSS
Go for the backend. I don’t expect much need for it but there will be occasional need to run some code on the backend
hosted on https://render.com/
DNS and caching proxy by Cloudflare
writing the code in Visual Studio Code, Windows 10 is my OS

Here’s what I did today:

create a “hello world” Svelte project with vite as a build tool / dev server
a basic Go server for running in production. All it really does is serve static files

I envision this as mostly client-side project and Svelte is the best framework.

You write .svelte files that combine HTML with JavaScript and CSS. Svelte compiler converts them to actual .html / .css / .js files.

vite is a dev web server and a build tool that can optimize .html / .css / .js files for production deployment.

I deploy the projects to render.com. Many Svelte projects can be 100% client side and deploy as static website.

I want a bit more flexibility so I wrote a very simple server in Go for doing things that cannot be done in the browser and require server side processing.

To setup a Svelte project with tailwind CSS you can follow tutorial on their sites.

I did that in the past and already have a project with a similar setup, so I just copy & pasted chunks of code from that project.

Here’s what’s involved:

package.json where you list dependencies (svelte, vite, tailwindcss, postcss, vite-plugin-svelte)
vite.config.js : configures vite to serve as a dev server and builder. Vite runs svelte compiler
my html / svelte code is in fe (for front-end) directory and everything starts from index.html
index.html imports the root Svelte component and css file
.svelte files are compiled by Svelte and .css files are processed by tailwind css
vite.config.js tells vite to compile / bundle starting with fe/index.html. It generates final files in fe/dist directory.
tailwind.config.cjs which files (.html, .js and .svelte to process to look for tailwind css classes and generate the right css
postcss.config.cjs with tailwind css pluging

Go server is the simplest thing possible: for now it just serves static files from fe/dist directory (in production build)

I like setting things up from scratch.

I’ve been frustrated by getting stuck for undetermined period of time because I couldn’t comprehend and fix a complicated build pipeline I didn’t setup and therefore didn’t understand.

Creating things from scratch might be slower at the beginning but it makes it less likely I’ll get stuck in the future.

Also helps me keep things minimalistic. Some people don’t think twice about creating a monster webpack build pipeline with lots of plugins.

I prefer things that I fully understand.

Deploying to render.com is also simple:

connect GitHub repository
configure with:
- build command to run. In my case it’s go build -tags netgo -ldflags '-s -w' -o app && npm i && npx vite build which builds Go server, installs npm packages and runs vite to build Svelte app
- the output directory of the build step
- what command to run. In my case it’s ./app -run-prod, which is the name of the Go server executable built above

For now it runs on free tier, on a shared 512 MB server, because Go servers are really efficient and the app doesn’t do anything yet.

After about 2 hours I had a “hello world” Svelte app with Go backend running on render.com: https://filemanager-x0mq.onrender.com/

The first step: displaying files

Now that I have a “hello world” running, what next?

Thinking about how much work needs to be done is overwhelming.

It’s important to make progress and figure out how to get from here to final product via a sequence of small steps.

The crucial parts of file manager for the web are:

display of files
connect to online storage systems that are a source of file listings: S3, Dropbox, OneDrive etc.

I’ll start with file display.

But what files to display? Connecting to online storage is probably a bunch of work and requires (potentially slow) network connection.

For now I’ll just use a static list of files.

Here’s the result so far:

I’ve also implemented a multi-selection of items with a mouse click.