zipzippy / svelteapp-typescript-go

The Essential TypeScript Demo in Svelte/SvelteKit Version with Go-Gin Backend and SQLite Database

A Svelte Demo Web App with Golang Backend Service and SQLite

This is a simple shopping demo app, inspired by the same Angular/React/Vue.js examples in Essential Typescript by Adam Freeman:

• The frontend is built with Svelte and SvelteKit using TypeScript. @sveltejs/adapter-static is used to generate a static JavaScript production. The CSS styles are provided by Bootstrap.
• The backend is built with Golang - a web server/REST APIs using gin plus the go-sqlite3 package as the SQLite database driver. In theory you can swap the DB driver to the ones you like.
• A Dockerfile that creates a single container with multi-stage builds (image size ~26 MB).

Adam Freeman's original projects use json-server on an Express server as mock API services. I did not change the spec of the services for the sake of demonstration. Right now, like all the original examples, the app only reads product lists and write order data.

The purpose of project is an experiment to build a small, modern and self-contained full-stack monolithic application, but it is not meant to be a practical template for any real world applications.

A similar version using Vue.js, Express, MongoDB and Docker Compose can be found here.

Setup Local Project

For local development you'll need

• Git
• Node.js
• Golang (not required in dev mode)
• Docker (only required for generating the container)

If you are using Windows the go-sqlite3 package needs GCC to compile, which can be installed with MinGW (choose MinGW32-base, MinGW32-gcc-g++ and MinGW32-gcc-objc package, then add \MinGW\bin to $PATH). On Linux you can get it by installing package build-essential.

Prepare the project:

git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm run setup

Run in Dev Mode (no backend required)

npm run dev

Run the Svelte app in dev mode: the app will not call any backend APIs, instead it returns built-in mock product data and the returned order number is always 1.

Build and Run Production

npm run setup-all

Install Svelte and Golang app dependencies. Equivalent to

npm i
npm prune
go get ./...

You can run npm run setup to install Svelte app's dependencies only.

npm run upgrade-all

Upgrade all Svelte/Go dependencies. Equivalent to

npx npm-check-updates -u
npm i
npm prune
go get -u ./...

You can run npm run upgrade to upgrade the Svelte app packages only.

npm run build-all

Build the Svelte production and Golang executable binary. Equivalent to

npm run check
npx vite build
go build .

You can run npm run build to build the Svelte app only.

npm run serve or npm run serve-win

npm run serve-win is for Windows users since NPM would use CMD to run bash scripts.

Start a server at http://localhost:8080. Equivalent to

./main

Then open http://localhost:8080. You can also use custom address and port like

./main -host 127.0.0.1 -port 8080

Build and Run the Docker Container

npm run docker and npm run docker-run

Does not require to install local packages or build productions first

Generate a Docker image then run it. Equivalent to

docker build . -t svelte-ts-go -f Dockerfile
docker run -p 8080:8080 --rm svelte-ts-go

Then open http://localhost:8080.

Open Project in DevContainer/CodeSpace

Does not require to install local packages or build productions first. You need Docker and VS Code (with the DevContainer extension installed).

The project has a .devcontainer/devcontainer.json which can create a Ubuntu container with both Node.js and Golang installed. It would also run a bash script to install dependencies and build the app for you.

SQLite DB Schemes and Data

The database (./db/data.sqlite3) in this repo already contains the table products with 9 product records (copied from here) and an empty table orders. You can use DB Browser for SQLite to read the database.

Here's the SQL statements to recreate them:

CREATE TABLE "products" (
	"id"	INTEGER NOT NULL UNIQUE,
	"name"	TEXT NOT NULL,
	"category"	TEXT NOT NULL,
	"description"	TEXT,
	"price"	REAL NOT NULL,
	PRIMARY KEY("id" AUTOINCREMENT)
);

CREATE TABLE "orders" (
	"id"	INTEGER NOT NULL,
	"product_id"	INTEGER NOT NULL,
	"quantity"	INTEGER NOT NULL
);

INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('1', 'Kayak', 'Watersports', 'A boat for one person', '275.0');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('2', 'Lifejacket', 'Watersports', 'Protective and fashionable', '48.95');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('3', 'Soccer Ball', 'Soccer', 'FIFA-approved size and weight', '19.5');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('4', 'Corner Flags', 'Soccer', 'Give your playing field a professional touch', '34.95');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('5', 'Stadium', 'Soccer', 'Flat-packed 35,000-seat stadium', '79500.0');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('6', 'Thinking Cap', 'Chess', 'Improve brain efficiency by 75%', '16.0');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('7', 'Unsteady Chair', 'Chess', 'Secretly give your opponent a disadvantage', '29.95');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('8', 'Human Chess Board', 'Chess', 'A fun game for the family', '75.0');
INSERT INTO "main"."products" ("id", "name", "category", "description", "price") VALUES ('9', 'Bling Bling King', 'Chess', 'Gold-plated, diamond-studded King', '1200.0');