# README

go-htmx-data-dashboard

This project is a part of a series of videos on the Web Dev Fuel channel.

To set up the project, clone the Go project with git.

git clone https://github.com/webdevfuel/go-htmx-data-dashboard

If you have the air executable, then you can run the command below, and everything will just work.

air

If you want to do it manually, you can check the .air.toml file and manually run the following commands.

templ generate
npm run dev
go run .

To set up Meilisearch, install it locally with the help of the documentation.

Then, inside the root of the project, export the enviroment variable.

export MEILISEARCH_HOST=http://localhost:7700

To set up PostgreSQL, install it locally with the help of the documentation.

Then, inside the root of the project, export the enviroment variable.

export DATABASE_URL=postgres://$USER:$PASSWORD@localhost:5432/$DATABASE?sslmode=disable

Also, ensure the database exists. You can use the shell, or a DB client to create the database.

The project contains a way to seed both PostgreSQL and Meilisearch. This helps us populate the web application with data.

To run it, run the Go program from within the cmd/seed directory.

cd cmd/seed
go run .

If the environment variables are correctly exported, it should work.

To be able to render charts on the browser, we're using the Chart.js library.

To install it, run the command below to copy the minified JS file from the CDN to the static directory.

wget https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js -O ./static/chart.min.js

To be able to have frontend interactivity, we're using the HTMX library.

To install it, run the command below to copy the minified JS file from the CDN to the static directory.

wget https://unpkg.com/[email protected]/dist/htmx.min.js -O ./static/htmx.min.js

Since we're using WebSockets to have live notifications (e.g. on user creation), we also want to install the HTMX extension.

wget https://unpkg.com/[email protected]/ws.js -O ./static/ws.js

Finally, to set up the static files, simply copy them from the assets directory into the static directory.

cp assets/table.js static/
cp assets/pagination.js static/
cp assets/notification.js static/
cp assets/chart.js static/