Jun 09, 2022
Today I’m creating a project from scratch.
My tech stack:
- 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.
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 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
tailwind.config.cjs which files (
.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.
- 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.
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.